css中那些需要組合、互斥和特別注意的屬性

plokmju88 發布于2019-08-29 13:44 / 1731人閱讀

摘要：盒子的偏移位置不影響常規流中的任何元素，其不與其他任何折疊。當的值為非時，其層疊級別通過屬性定義。最常見的有簡稱和簡稱。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

css學習

很少有人會很系統的把css學習一遍，大部分都是遍歷下。然后然后記住常用的，不常用的也要回查找，前端人很多都認同要學好css真的不很難，這里記錄下很多場景下使用css需要注意的地方，同樣，開頭頁列出一些學習css的知識點：

基本屬性[定位、盒子模型、文本、背景。。。]

動畫屬性[漸變、變化、過渡、動畫]

堆疊和塊格式化上下文

布局[table、flex、grid]

選擇符[權重、包含、子選擇、相鄰、兄弟、屬性選擇、偽類、偽元素]

媒體查詢

當然遠不止這些，還有什么不同應用場景有不同的樣式、廠商前綴、適配等各種讓人欲生欲死的問題存在。當自認為可以游刃有余的時候，可以深入學習以下：

sass

css魔法[一本腦洞大開的css書籍]

一些需要注意的點

在平時書寫css的時候需要注意些一些屬性的依賴、相關甚至相斥的關系，以下是一些暫時常見的一些坑；

float

float是使用比較平凡的一個布局屬性，需要注意：

float在絕對定位和display為none時不生效。

float:right的時候，第一個繪制的元素在最右邊，

子元素的float屬性都是非none時，父元素不會被撐開，浮動元素脫離了正常的流式布局，需要在父元素內清除浮動，可以使用::after來添加偽元素，為偽元素設置clear:both即可。

z-index

z-index也是css種較為關鍵的屬性，一般而言，只要有彈窗的地方，z-index就會出現，在目前的單頁應用流行的時候，彈窗是必不可少的，也是影響層疊上下文的關鍵因子；

兩鐵律：

z-index只能在position屬性值為relative或absolute或fixed的元素上有效。【flex子項除外】

子元素的層疊順序不可能超過父級，如果父級層疊順序低，子元素再高也不會超過父級同級但是層疊順序高的的其他元素

層疊上下文

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間。

正常布局的時候，整個html就是一個層疊上下文，會根據元素繪制的先后順序來展示，重疊的時候需要根據繪制順序來進行遮蓋，除了在頂層節點會形成層疊上下文時還有下面這些操作會形成層疊上下文：

根元素 (HTML),

z-index 值不為 "auto"的絕對/相對定位，

一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素（參考 the specification for opacity），

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設置為 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值

-webkit-overflow-scrolling 屬性被設置 "touch"的元素
既然形成了新的層疊上下文，那么這個上下文中的層疊順序如何確定？

每個層疊上下文的繪制順序

在每一個層疊上下文中，以下層次按照后來居上的規則繪制

元素的background和borders

擁有負堆疊層級（negative stack levels）的子層疊上下文（child stacking contexts）

在文檔流中的（in-flow），非行內級的（non-inline-level），非定位（non-positioned）的后代元素

非定位的浮動元素

在文檔流中的（in-flow），行內級的（inline-level），非定位（non-positioned）的后代元素，包括行內塊級元素（inline blocks）和行內表格元素（inline tables）

堆疊層級為 0 的子堆疊上下文（child stacking contexts）和堆疊層級為 0 的定位的后代元素

堆疊層級為正的子堆疊上下文

重復一下這兩鐵律：

z-index只能在position屬性值為relative或absolute或fixed的元素上有效。【flex子項除外】

子元素的層疊順序不可能超過父級，如果父級層疊順序低，子元素再高也不會超過父級同級但是層疊順序高的的其他元素

transformZ和z-index最好不要一起使用。

text-overflow

經常會在一個行內標題等地方，文本如果過多的話希望使用...來隱藏，那么text-overflow就是必須得來；

取值：
clip：當內聯內容溢出塊容器時，將溢出部分裁切掉。
ellipsis：當內聯內容溢出塊容器時，將溢出部分替換為（...）。
要使得 <" text-overflow "> 屬性生效，塊容器必須顯式定義 <" overflow "> 為非visible值，同時顯式或者隱式的定義 <" width "> 為非auto值， <" white-space "> 為nowrap值。

overflow:hidden;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;

超出不隱藏、或者可以換行或者寬帶可以自動延伸的話，均不會出現溢出，所以text-overflow會失效

flex

在父級元素是display:flex的時候，子元素的很多布局就失效了，float、clear、vertical-align這三個屬性在子元素上不起作用，需要使用flex相關的布局來完成。

偽元素

偽元素其實就是一個子元素，div::after是在div的最后面添加了一個元素，元素就是::after，所以需要注意在自閉合標簽后面不可以添加偽元素，因為自閉合標簽不能有子元素，比如img、br這樣的標簽。

偽類

偽類其實就是一個類似class的選擇器，在使用的時候注意，:last-child、:first-child這樣的偽類需要注意，必須是父元素中的第一個子元素被命中才可以，所以使用這類偽類的時候，最好是父元素中只有某一類的元素，不含有其他的元素。

position

在絕對定位的時候，需要注意參考元素是離自身最近的定位祖先元素，

absolute：對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

當position的值為非static時，其層疊級別通過z-index屬性定義。

絕對定位的元素，在top，right，bottom，left屬性未設置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規流中的任何元素。用這個特性你或許會干這樣的事

visibility

visibility元素是還在的，只是看不見，位置還是要占住

background

background是圖片的時候，最好加上background-size,不然容易變形或這個平鋪

line-height

line-height很多時候是撐開父級元素的關鍵，可以結合子元素的居中對齊vertical-align

table

配套使用：table table-cell

BFC（block formatting context）

Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

一個塊格式化上下文（block formatting context）是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
bfc布局規則

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算
bfc觸發

根元素或其它包含它的元素

浮動元素 (元素的 float 不是 none)

絕對定位元素 (元素具有 position 為 absolute 或 fixed)

內聯塊 (元素具有 display: inline-block)

表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)

表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)

具有overflow 且值不是 visible 的塊元素，

display: flow-root

column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。

云服務器 GPU云服務器 js包裝對象中的屬性選云服務器的幾個注意和需求 php中css的用法匹配對象的屬性和函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112670.html

瀏覽器渲染機制

摘要：瀏覽器渲染進程瀏覽器內核進程，內部是多線程的默認每個頁面一個進程，互不影響。事件觸發線程歸屬于瀏覽器而不是引擎，用來控制事件循環可以理解成引擎自己都忙不過來，需要瀏覽器另開線程協助。線程和進程進程和線程的概念可以這樣理解：進程是一個工廠，工廠有它的獨立資源--工廠之間相互獨立--線程是工廠中的工人，多個工人協作完成任務--工廠內有一個或多個工人--工人之間共享空間工廠有多個工人...

appetizerio 2019-08-22 15:47 評論0 收藏0
瀏覽器渲染機制

摘要：瀏覽器渲染進程瀏覽器內核進程，內部是多線程的默認每個頁面一個進程，互不影響。事件觸發線程歸屬于瀏覽器而不是引擎，用來控制事件循環可以理解成引擎自己都忙不過來，需要瀏覽器另開線程協助。線程和進程進程和線程的概念可以這樣理解：進程是一個工廠，工廠有它的獨立資源--工廠之間相互獨立--線程是工廠中的工人，多個工人協作完成任務--工廠內有一個或多個工人--工人之間共享空間工廠有多個工人...

lncwwn 2019-08-02 10:03 評論0 收藏0
瀏覽器知識

摘要：瀏覽器的渲染進程是多線程的。異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件隊列中。 [TOC] 瀏覽器進程線程區分線程和進程 **- 什么是進程** 狹義定義：進程是正在運行的程序的實例（an instance of a computer program that is being exe...

Pluser 2019-08-23 15:37 評論0 收藏0
寫給 Android 開發的小程序布局指南，Flex 布局！

摘要：不過在小程序中，這就不是我們需要考慮的了，微信已經幫我們處理好了。而在新手階段，暫時只需要關注兩個參數指定一個塊級布局，它其內的元素，總是起一個新行來顯示，而微信小程序的很多視圖容器組件，默認的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 評論0 收藏0
從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

摘要：如果看完本文后，還對進程線程傻傻分不清，不清楚瀏覽器多進程瀏覽器內核多線程單線程運行機制的區別。因此準備梳理這塊知識點，結合已有的認知，基于網上的大量參考資料，從瀏覽器多進程到單線程，將引擎的運行機制系統的梳理一遍。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 ----------超長文+多圖預警，需要花費不少時間。---------- 如果看完本文后，還...

wanghui 2019-08-22 13:56 評論0 收藏0