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

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就會出現，在目前的單頁應用流行的時候，彈窗是必不可少的，也是影響層疊上下文的關鍵因子；

兩鐵律：

1. z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。【flex子項除外】
2. 子元素的層疊順序不可能超過父級，若是父級層疊順序低，子元素再高也不會超過父級同級可是層疊順序高的的其餘元素

層疊上下文

層疊上下文是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 的定位的後代元素
• 堆疊層級爲正的子堆疊上下文
  

重複一下這兩鐵律：

1. z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。【flex子項除外】
2. 子元素的層疊順序不可能超過父級，若是父級層疊順序低，子元素再高也不會超過父級同級可是層疊順序高的的其餘元素

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 的元素並不被包裹在一個多列容器中。