WEB前端第十三課——瀏覽器內核、位置

来源:https://www.cnblogs.com/husa/archive/2020/07/26/13378944.html
-Advertisement-
Play Games

1.瀏覽器內核及首碼 在CSS中新的屬性標準尚未明確的情況下，各瀏覽器廠商對新屬性的支持情況也不相同，這個階段會對屬性加廠商首碼進行區分。 根據不同的瀏覽器內核，CSS首碼有所不同，最基本的瀏覽器內核有四種，其他內核都是基於此四種進行再研發的。 ① Gecko內核，首碼為“-moz-”，火狐瀏覽器 ...


1.瀏覽器內核及首碼

　　在CSS中新的屬性標準尚未明確的情況下，各瀏覽器廠商對新屬性的支持情況也不相同，這個階段會對屬性加廠商首碼進行區分。

　　根據不同的瀏覽器內核，CSS首碼有所不同，最基本的瀏覽器內核有四種，其他內核都是基於此四種進行再研發的。

　　① Gecko內核，首碼為“-moz-”，火狐瀏覽器

　　② Webkit內核，首碼是“-webkit-”，也叫谷歌內核，Chrome瀏覽器最先開發使用，Safari瀏覽器也使用該內核

　　　　　　　　　 目前，國內很多瀏覽器也使用了webkit內核，如360極速、世界之窗、獵豹等

　　③ Trident內核，首碼為“-ms-”，也稱 IE內核

　　④ Presto內核，首碼是“-o-”，目前只有Opera使用

　　代碼實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS瀏覽器內核</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color:orange;
            border: 36px solid rgba(255,255,255,0.5);
            margin: 60px auto;
            padding: 50px;
            font-size: 200px;
            font-weight: bolder;
            color: rgba(255,255,255,0.5);
            text-align: center;
            -webkit-background-clip: content-box;
            /*屬性值：
            border-box，從邊框開始實現背景
            padding-box，從padding開始實現背景
            content-box，從內容開始實現背景
            text，從文本開始實現背景
　　　　　　　為適應不同瀏覽器，需要同時設置帶有不同瀏覽器內核首碼的屬性
            */
        }

    </style>
</head>
<body>
    <div>馬可波羅</div>
</body>
</html>

2.定位，定義元素相對於正常位置應該出現的位置

　　分類：

　　　　⑴ 普通流定位，Normal

　　　　⑵ 浮動定位

　　　　　　將元素排除在普通流之外，浮動元素不在頁面中占據空間，可以放置在包含框的左邊或者右邊，浮動元素依舊位於包含框內

　　　　　　浮動元素框可以向左或向右移動，直到外邊緣碰到包含框或另一個浮動框的邊框

　　　　　　浮動元素外邊緣不會超過其父元素的內邊緣

　　　　　　浮動元素不會互相重疊、不會上下浮動

　　　　　　行內元素浮動後會變為塊級元素

　　　　　　語法：float: none / left / right;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮動定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div.one{ background-color: pink; float: right;}
        div.two{ background-color: hotpink;}
        div.three{ background-color: deeppink;}
    </style>
</head>
<body>
    <div class="one" align="center">1</div>
    <div class="two" align="center">2</div>
    <div class="three" align="center">3</div>
</body>
</html>

　　　　　　清除浮動，是在使用了浮動之後必不可少的，為了網站佈局的效果清除浮動也變的非常麻煩

　　　　　　　　屬性 clear，屬性值：left（清除左浮動）、right（清除右浮動）、both（全部清除）

　　　　　　　　常用清除方式：① 結尾處加空div標簽 clear: both，或在下一個元素前加 clear:both ② 浮動元素的父元素定義偽元素“ ::after” ③ 浮動元素的父元素定義“overflow: hidden” ④ 浮動元素的父元素定高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮動定位</title>
    <style>
        div.parent{ border:2px solid red; overflow: hidden}  /*第三種方式：overflow:hidden 或 display:inline-block 或 display:table-cell */
        div.one{ width: 150px; height: 150px; background-color: pink; float: left;}
        div.two{ width: 150px; height: 150px; background-color: hotpink; float: left;}
        div.three{ width: 150px; height: 150px; background-color: deeppink; float: left;}
        /*div.clear{ clear: both;}  第一種方式*/
        /*div.parent::after{
            content: "";
            display: block;
            clear: both;
        }                           第二種方式*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="one" align="center">1</div>
        <div class="two" align="center">2</div>
<!--    <div class="clear"></div>   第一種方式-->
    </div>
    <div class="three" align="center">3</div>
</body>
</html>

　　　　⑶ 相對定位

　　　　⑷ 絕對定位

　　　　⑸ 固定定位

3.display屬性

　　根據CSS規範，每一個網頁元素都有一個display屬性，用於確定該元素的類型

　　每一個元素都有預設的display屬性值，比如 div的預設display屬性值為“ block”（塊級元素），而 span的預設display屬性值為“ inline”（行內元素）

　　塊級元素與行內元素是可以轉換的，即 display屬性值可以設置修改

　　display常用屬性值：

　　　　none，隱藏對象，且不占據空間

　　　　inline，指定對象為內聯元素（行內元素）

　　　　block，指定對象為塊級元素

　　　　inline-block，指定對象為內聯塊級元素，可以設置寬高、margin、padding，但會識別代碼之間的空白！

　　　　table-cell，指定對象作為表格的單元格

　　　　flex，指定對象為彈性盒子

　　另外，visibility:hidden和 opacity:0 也會隱藏對象，但仍然占據物理空間

4.position定位，指定一個元素定位方法的類型

　　屬性值：① static，預設值，元素顯示在正常的內容流中，忽略top、bottom、left、right偏移量及z-index聲明，一般用於去除定位

　　　　　　② relative，生成相對定位的元素，相對於其正常位置進行定位，因此，left:20px會向元素的left位置添加20像素，但其正常位置依然占據

　　　　　　③ fixed，生成固定定位的元素，一旦生成其原始位置不再占據，且不隨瀏覽器界面滾動而改變，元素的位置通過 top、right、bottom、left屬性值進行規定

　　　　　　④ absolute，生成絕對定位的元素，相對於瀏覽器視窗進行偏移，一旦發生偏移，原正常位置不再占有，元素的位置通過 top、right、bottom、left屬性值進行規定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            left: 50px;
            top: 30px;
            /*position: absolute;*/
            /*position: relative;*/
            position: fixed;
        }
        pre{font-size: 130px;}
    </style>
</head>
<body>
    <div></div>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
    <pre>文本內容</pre>
</body>
</html>

5.常用居中方式小結

　　文本內容水平居中，text-align:center

　　行內文字垂直居中，line-height=height

　　盒子水平居中，margin:0px  center

　　子元素在父元素內居中，① 父元素定義為彈性盒子，display:flex;   align-items:center;   justify-content:center;     

　　　　　　　　　　　　　② 定義父元素為單元格，display:table-cell;   vertical-align:middle;  子元素中定義水平居中，margin: 0  auto;

　　　　　　　　　　　　　③ 定義父元素為相對位置，position:relative;  定義子元素為絕對位置，position:absolute; left:25%; top:25%;

6.z-index堆疊順序

　　一旦修改了元素的定位方式，在元素可能發生堆疊，使用 z-index屬性可以控制元素重疊的順序

　　z-index屬性：

　　　　① z-index僅能在定位的元素上生效

　　　　② z-index屬性值為數值，數值越大表示堆疊越高，即離用戶越近

　　　　③ 可以設置為負值，表示離用戶更遠，一般不建議設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            left: 100px;
            top: 100px;
            /*position: absolute;*/
            position: relative;
            /*position: fixed;*/
        }
        div:first-child{
            background-color: deeppink;
            left: 0px;
            top: 0px;
            z-index: 2;
        }
        div:last-child{
            background-color: darkorange;
            left: 200px;
            top: 200px;
            z-index: 3;
        }
        div:nth-child(2){
            z-index: 1;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis服務之簡介與部署
    Redis是什麼？redis是一款基於BSD協議，開源的非關係型資料庫（nosql資料庫），作者是義大利開發者Salvatore Sanfilippo在2009年發佈，使用C語言編寫；redis是基於記憶體存儲，而且是目前比較流行的鍵值資料庫（key-value database），它提供將記憶體通過... ...
  • CentOS 8 安裝 MariaDB
    MariaDB 資料庫管理系統是 MySQL 的一個分支，主要由開源社區在維護，採用 GPL 授權許可。開發這個分支的原因之一是：甲骨文公司收購了 MySQL 後，有將 MySQL 閉源的潛在風險，因此社區採用分支的方式來避開這個風險。MariaDB完全相容mysql，使用方法也是一樣的。 系統環境 ...
  • iOS----------數據安全與加密
    參考：https://juejin.im/entry/58b93af3ac502e006c0820c9 1.常見的加密方式：Base64、MD5、AES、EDS、RSA HTTPS 以及SSL/TSL 什麼是SSL？SSL(Secure Sockets Layer, 安全套接字層)，因為原先互聯網上 ...
  • 前端程式員學好演算法系列（五）棧和隊列
    1.棧的基礎使用，js中數組直接可以作為棧使用，棧遵循先進後出的原則，即js可以使用push()和pop() 比較容易的實現一個棧 20. 有效的括弧給定一個只包括 '('，')'，'{'，'}'，'['，']' 的字元串，判斷字元串是否有效。 有效字元串需滿足： 左括弧必須用相同類型的右括弧閉合。 ...
  • CSS選擇器區別
    （一）單一 |【1】屬性選擇器 | | | | | | | |p[alt]|選擇具有att屬性的 |p元素 | |p[alt="val"] |選擇att屬性值 |等於val的p | |p[alt^="val"] |匹配att屬性值 |以val開頭的p | |p[alt$="val"] |匹配att屬 ...
  • 美拍視頻去水印下載，分享一個美拍短視頻批量去水印解析網站
    美拍短視頻按作者批量下載，去水印的方法教程，很多做自媒體搬運或者要下載美拍短視頻上面的素材，都需要批量下載美拍無水印短視頻。這裡教大家如何按作者批量下載美拍無水印短視頻，並自動修改MD5消重。此文分享的是一個線上的網站工具，不需要下載任何軟體，直接在瀏覽器里打開工具網址就可以使用的。 其實不僅僅是支 ...
  • 前端程式員學好演算法系列（四）鏈表
    24. 兩兩交換鏈表中的節點給定一個鏈表，兩兩交換其中相鄰的節點，並返回交換後的鏈表。 你不能只是單純的改變節點內部的值，而是需要實際的進行節點交換。 示例: 給定 1->2->3->4, 你應該返回 2->1->4->3. 解題：我們定義4個指針如上進行節點交換，1.給head添加一個虛擬頭節點t ...
  • JS函數高級
    原型與原型鏈 所有函數都有一個特別的屬性: prototype : 顯式原型屬性 所有實例對象都有一個特別的屬性: __proto__ : 隱式原型屬性 顯式原型與隱式原型的關係 函數的prototype: 定義函數時被自動賦值, 值預設為, 即用為原型對象 實例對象的__proto__: 在創建實 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類