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是一款基於BSD協議,開源的非關係型資料庫(nosql資料庫),作者是義大利開發者Salvatore Sanfilippo在2009年發佈,使用C語言編寫;redis是基於記憶體存儲,而且是目前比較流行的鍵值資料庫(key-value database),它提供將記憶體通過... ...
  • MariaDB 資料庫管理系統是 MySQL 的一個分支,主要由開源社區在維護,採用 GPL 授權許可。開發這個分支的原因之一是:甲骨文公司收購了 MySQL 後,有將 MySQL 閉源的潛在風險,因此社區採用分支的方式來避開這個風險。MariaDB完全相容mysql,使用方法也是一樣的。 系統環境 ...
  • 參考: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. 有效的括弧給定一個只包括 '(',')','{','}','[',']' 的字元串,判斷字元串是否有效。 有效字元串需滿足: 左括弧必須用相同類型的右括弧閉合。 ...
  • (一)單一 |【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 ...
  • 原型與原型鏈 所有函數都有一個特別的屬性: prototype : 顯式原型屬性 所有實例對象都有一個特別的屬性: __proto__ : 隱式原型屬性 顯式原型與隱式原型的關係 函數的prototype: 定義函數時被自動賦值, 值預設為, 即用為原型對象 實例對象的__proto__: 在創建實 ...
一周排行
    -Advertisement-
    Play Games
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...