成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 筆記

syoya / 3280人閱讀

摘要：如果四象值未定義，那么依然處于文檔流，只是不占空間否則，脫離文檔流，相對于瀏覽器窗口定位粘性定位。否則其行為與相對定位相同。并且和同時設(shè)置時，生效的優(yōu)先級高，和同時設(shè)置時，的優(yōu)先級高。設(shè)定為元素的任意父節(jié)點的屬性必須是，否則不會生效。

CSS 優(yōu)先級

基礎(chǔ)

使用 !important 的聲明比沒有使用的優(yōu)先級更高

選擇器優(yōu)先級

ID > 類 | 偽類 | 屬性 > 元素 | 偽元素 > 通配符

組合子(+, >, ~, " ") 和 否定偽類(:not()) 對特異性沒有影響。（但是，在 :not() 內(nèi)部聲明的選擇器是會影響優(yōu)先級）。

來源優(yōu)先級

自定義樣式 > 瀏覽器樣式 > 繼承樣式

引用優(yōu)先級

行內(nèi)樣式 > 外部樣式、內(nèi)部樣式

外部樣式、內(nèi)部樣式出現(xiàn)的位置靠后的優(yōu)先級更高

同等情況下，定義位置靠后的優(yōu)先級更高

參考

https://developer.mozilla.org...

postion 屬性 
四象值未定義，即：top、left、bottom、right 未定義或者屬性值 auto

static 文檔流。默認(rèn)值

relative 相對定位。相對于四象值未定義時位置定位

absolute 絕對定位。

如果四象值未定義，那么依然處于文檔流，只是不占空間

否則，脫離文檔流，相對于最近的非 static 屬性的父級元素（包含 html）定位

fixed 固定定位。

如果四象值未定義，那么依然處于文檔流，只是不占空間

否則，脫離文檔流，相對于瀏覽器窗口定位

stricy 粘性定位。

如果四象值未定義，那么依然處于文檔流。

否則

其行為與相對定位相同。并且 top 和 bottom 同時設(shè)置時，top 生效的優(yōu)先級高，left 和 right 同時設(shè)置時，left 的優(yōu)先級高。
設(shè)定為 position:sticky 元素的任意父節(jié)點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：
如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 overflow:hidden，則父容器無法進(jìn)行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。
如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 position:relative | absolute | fixed，則元素相對父元素進(jìn)行定位，而不會相對 viewport 定位。
達(dá)到設(shè)定的閥值。這個還算好理解，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed 是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。

參考

http://web.jobbole.com/90352/

https://developer.mozilla.org...

BFC 與浮動

http://www.w3cplus.com/css3/d...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112367.html

相關(guān)文章

  • CSS Variables學(xué)習(xí)筆記

    摘要：注本文首發(fā)于個人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來設(shè)置變量名，并使用特定的來訪問。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡單，如下，聲明了一個名叫的變量。 注：本文首發(fā)于個人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。 ...

    mudiyouyou 評論0 收藏0

  • webpack深入與實戰(zhàn)筆記（20171015待續(xù)...）

    摘要：中添加同樣起作用。說明提供的命令，打包時模塊綁定的加載器為命令，監(jiān)聽打包的文件，只要改變自動會打包命令窗口顯示打包進(jìn)度命令窗口列出引入的所有模塊命令窗口顯示打包引入模塊的原因 標(biāo)注：本筆記來自 imooc-qbaty老師-webpack深入與實戰(zhàn)gitbash（or CMD）進(jìn)行命令操作 一、準(zhǔn)備工作 lenovo@lenovo-PC MINGW64 ~ $ cd /d/imooc/ ...

    Airy 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    codeKK 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    SolomonXie 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

    HollisChuang 評論0 收藏0

發(fā)表評論

0條評論

syoya

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<