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

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

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>

  


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

更多相關文章
  • 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__: 在創建實 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...