摘要：盒子的偏移位置不影響常規(guī)流中的任何元素，其不與其他任何折疊。當(dāng)?shù)闹禐榉菚r(shí)，其層疊級(jí)別通過(guò)屬性定義。最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。

很少有人會(huì)很系統(tǒng)的把css學(xué)習(xí)一遍，大部分都是遍歷下。然后然后記住常用的，不常用的也要回查找，前端人很多都認(rèn)同要學(xué)好css真的不很難，這里記錄下很多場(chǎng)景下使用css需要注意的地方，同樣，開(kāi)頭頁(yè)列出一些學(xué)習(xí)css的知識(shí)點(diǎn)：

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

動(dòng)畫(huà)屬性[漸變、變化、過(guò)渡、動(dòng)畫(huà)]

堆疊和塊格式化上下文

布局[table、flex、grid]

選擇符[權(quán)重、包含、子選擇、相鄰、兄弟、屬性選擇、偽類(lèi)、偽元素]

媒體查詢(xún)

當(dāng)然遠(yuǎn)不止這些，還有什么不同應(yīng)用場(chǎng)景有不同的樣式、廠商前綴、適配等各種讓人欲生欲死的問(wèn)題存在。當(dāng)自認(rèn)為可以游刃有余的時(shí)候，可以深入學(xué)習(xí)以下：

sass

css魔法[一本腦洞大開(kāi)的css書(shū)籍]

在平時(shí)書(shū)寫(xiě)css的時(shí)候需要注意些一些屬性的依賴(lài)、相關(guān)甚至相斥的關(guān)系，以下是一些暫時(shí)常見(jiàn)的一些坑；

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

float在絕對(duì)定位和display為none時(shí)不生效。

float:right的時(shí)候，第一個(gè)繪制的元素在最右邊，

子元素的float屬性都是非none時(shí)，父元素不會(huì)被撐開(kāi)，浮動(dòng)元素脫離了正常的流式布局，需要在父元素內(nèi)清除浮動(dòng)，可以使用::after來(lái)添加偽元素，為偽元素設(shè)置clear:both即可。

z-index也是css種較為關(guān)鍵的屬性，一般而言，只要有彈窗的地方，z-index就會(huì)出現(xiàn)，在目前的單頁(yè)應(yīng)用流行的時(shí)候，彈窗是必不可少的，也是影響層疊上下文的關(guān)鍵因子；

兩鐵律：

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

子元素的層疊順序不可能超過(guò)父級(jí)，如果父級(jí)層疊順序低，子元素再高也不會(huì)超過(guò)父級(jí)同級(jí)但是層疊順序高的的其他元素

層疊上下文

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

正常布局的時(shí)候，整個(gè)html就是一個(gè)層疊上下文，會(huì)根據(jù)元素繪制的先后順序來(lái)展示，重疊的時(shí)候需要根據(jù)繪制順序來(lái)進(jìn)行遮蓋，除了在頂層節(jié)點(diǎn)會(huì)形成層疊上下文時(shí)還有下面這些操作會(huì)形成層疊上下文：

根元素 (HTML),
z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位，
一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 屬性值小于 1 的元素（參考 the specification for opacity），
transform 屬性值不為 "none"的元素，
mix-blend-mode 屬性值不為 "normal"的元素，
filter值不為“none”的元素，
perspective值不為“none”的元素，
isolation 屬性被設(shè)置為 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 屬性，即便你沒(méi)有直接指定這些屬性的值
-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
既然形成了新的層疊上下文，那么這個(gè)上下文中的層疊順序如何確定？

每個(gè)層疊上下文的繪制順序

在每一個(gè)層疊上下文中，以下層次按照后來(lái)居上的規(guī)則繪制

元素的background和borders
擁有負(fù)堆疊層級(jí)（negative stack levels）的子層疊上下文（child stacking contexts）
在文檔流中的（in-flow），非行內(nèi)級(jí)的（non-inline-level），非定位（non-positioned）的后代元素
非定位的浮動(dòng)元素
在文檔流中的（in-flow），行內(nèi)級(jí)的（inline-level），非定位（non-positioned）的后代元素，包括行內(nèi)塊級(jí)元素（inline blocks）和行內(nèi)表格元素（inline tables）
堆疊層級(jí)為 0 的子堆疊上下文（child stacking contexts）和堆疊層級(jí)為 0 的定位的后代元素
堆疊層級(jí)為正的子堆疊上下文

重復(fù)一下這兩鐵律：

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

子元素的層疊順序不可能超過(guò)父級(jí)，如果父級(jí)層疊順序低，子元素再高也不會(huì)超過(guò)父級(jí)同級(jí)但是層疊順序高的的其他元素

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

經(jīng)常會(huì)在一個(gè)行內(nèi)標(biāo)題等地方，文本如果過(guò)多的話希望使用...來(lái)隱藏，那么text-overflow就是必須得來(lái)；

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

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

超出不隱藏、或者可以換行或者寬帶可以自動(dòng)延伸的話，均不會(huì)出現(xiàn)溢出，所以text-overflow會(huì)失效

在父級(jí)元素是display:flex的時(shí)候，子元素的很多布局就失效了，float、clear、vertical-align這三個(gè)屬性在子元素上不起作用，需要使用flex相關(guān)的布局來(lái)完成。

偽元素其實(shí)就是一個(gè)子元素，div::after是在div的最后面添加了一個(gè)元素，元素就是::after，所以 需要注意在自閉合標(biāo)簽后面不可以添加偽元素，因?yàn)樽蚤]合標(biāo)簽不能有子元素，比如img、br這樣的標(biāo)簽。

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

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

absolute：對(duì)象脫離常規(guī)流，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒(méi)有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。  
當(dāng)position的值為非static時(shí)，其層疊級(jí)別通過(guò)z-index屬性定義。 
絕對(duì)定位的元素，在top，right，bottom，left屬性未設(shè)置時(shí)，會(huì)緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。用這個(gè)特性你或許會(huì)干這樣的事

visibility元素是還在的，只是看不見(jiàn)，位置還是要占住

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

line-height很多時(shí)候是撐開(kāi)父級(jí)元素的關(guān)鍵，可以結(jié)合子元素的居中對(duì)齊vertical-align

配套使用：table table-cell

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱(chēng)BFC)和 Inline formatting context (簡(jiǎn)稱(chēng)IFC)。
一個(gè)塊格式化上下文（block formatting context） 是Web頁(yè)面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。

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

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
bfc觸發(fā)

根元素或其它包含它的元素
浮動(dòng)元素 (元素的 float 不是 none)
絕對(duì)定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。