摘要：，視窗高度，等于視窗高度的。并不會對他周圍的元素產生任何影響。修改屬性只會造成本元素的重繪。雖然它和普通的類相似，可以為已有的元素添加樣式，但是它只有處于樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

inline/inline-block/block -->> 牛奶/果凍/堅果

inline: img, span, strong, em, i, em, a...

inline-block: input, button, ...（table-cell元素）

block: p, div, ...(元素只要應用了float, position就會變成block元素)

table

flex

table-row (tr)

table-cell (td)

table-row-group (tbody)

table-header-group (thead)

table-footer-group (tfooter)

table-caption (caption)

table-column (col)

table-column-group (colgroup)

table表格中的同一行列表元素都等高。 display:table-cell屬性的元素對margin不敏感，也就是margin作用在上面不work的。

列表個數不固定，但是無論列表幾個，都平分容器空間

父級設置display:table，同時寬度為容器寬度，或是直接width:100%, 此時display:table-cell子元素就會自動等分。

.container { display: flex | inline-flex; }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
.container { flex-flow: <"flex-direction"> | <"flex-wrap"> }

.item { justify-content: flex-start | flex-end | center | space-between （兩端對齊，item之間的間隔都相等）| space-around(最邊緣item與邊框的間隔相等，item之間的間隔比item與邊框的間隔大一倍); }

.item { align-items: flex-start | flex-end | center | baseline | stretch (default); }

.item { align-content: flex-start | flex-end | center | space-between | space-around | stretch (default); }

.item { order: ; }

flex(default: 0 1 auto)

auto(1 1 auto) none(0 0 auto).item { flex: none | [<"flex-grow"> <"flex-shrink"> <"flex-basis">]; }

flex-grow(default: 0)索取父容器剩余的空間

flex-basis(default: auto)是width的替代品，在分配空間之前，它會先跟父容器預約這么多空間，然后剩余的才歸置到剩余空間，父容器再把剩余空間分配給設置了flex-grow的容器，若同時設置了flex-basis和width，width會被覆蓋，即優先級flex-basis > width。但是如若flex-basis，width其中有auto, 則另外的非auto屬性優先級會更高。

 
width:300
 
width:160
 
width:120
 
.container { display: flex; width: 500px; height: 150px; background-color: #eee; } .B { height: 100px; } .B1{ background-color:rgba(255,255,0,.5); width: 300px; flex-grow:1; flex-shrink:2; } .B2{ background-color:rgba(255,0,255,.5); width: 160px; } .B3{ background-color:rgba(0,255,255,.5); width: 120px; }
x2 = 2 * x1500 = 300 * x2 + 160 * x1 + 120 * x1

summary:

剩余空間＝父容器空間－(子容器1.flex-basis/width) - (子容器2.flex-basis/width) - …

如果父容器空間不夠，就走壓縮flex-shrink，否則走擴張flex-grow；

如果你不希望某個容器在任何時候都不被壓縮，那設置flex-shrink:0；

如果子容器的的flex-basis設置為0(width也可以，不過flex-basis更符合語義)，那么計算剩余空間的時候將不會為子容器預留空間。

如果子容器的的flex-basis設置為auto(width也可以，不過flex-basis更符合語義)，那么計算剩余空間的時候將會根據子容器內容的多少來預留空間。

如果父級的空間足夠：flex-grow有效，flex-shrink無效。 如果父級的空間不夠：flex-shrink 有效，flex-grow無效。

.item { align-self: auto（default，表示繼承父元素的align-items屬性，若無父元素，equal stretch） | flex-start | flex-end | center | baseline | stretch; }

flexBox css tricks: https://css-tricks.com/snippe...

另外需注意chrome強制最小字體為12號，即使設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節點rem的計算還是以12px為基準，所以網上很多文章提到的將html的font-size設為10方便計算不是那么可取)。
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。 vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。 vmin：vw和vh中較小的那個。 vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
其它的單位還有： %:百分比 in:寸 cm:厘米 mm:毫米 pt:point，大約1/72寸 pc:pica，大約6pt，1/6寸

不支持任何的負值, margin, letter-spacing, word-spacing, vertical-align支持負值

border-box

padding-box

content-box

普通元素的百分比margin都是相對于父級容器的寬度來計算的

絕對定位圓度的百分比margin是相對于第一個定位祖先元素（relative|absolute|fixed）的寬度計算的

正正取大值

正負值相加

負負最負值

inline水平元素(非替換元素，button標簽；正常書寫)垂直margin無效

margin重疊了

display:table-cell/table-row等聲明的margin無效，但是替換元素們例外（firefox: table-cell類型是inline-block渲染；IE：table-call類型是table-cell渲染）

絕對定位的margin值其實是一直有效的，只是不像普通元素那樣，能讓兄弟元素移動（因為絕對元素是脫離文檔流的）

相對float元素設置margin，它不是相對于該浮動元素，而是外部容器

inline元素導致的margin失效

正常流，margin-start == margin-left, 其它情況可以===margin-right|margin-top

vertical-align只對inline/inline-block(table-cell也可以理解為inline-block)水平的元素起作用

vertical-align: -2px 元素相對于baseline向下偏移2像素

vertical-align: -10% 這里的百分比是相對于該元素繼承的行高來計算的

bottom/text-bottm : 與line box底端對齊/與父元素內容區域的底端對齊

-> vertical-align: super 提高盒子的基線到父級合適的上標基線

-> vertical-align: sub 降低盒子的基線到父級合適的下標基線

vertical-align:middle 不起作用，可能是因為行高不夠，將行高設為容器高度即可

table-cell自身設置vertical-align:middle, 才能起作用，給table-cell中的內部元素設middle是不起作用的

inline-block的基線是正常流中最后一個line box的基線

Example: make icon align with text:

Centered!

指定元素及其子元素的【z順序】，而【z順序】可以決定當元素發生覆蓋的時候，哪個元素在上面。通常較大的z-index值的元素會覆蓋較低的那個元素，如果發生z-index的嵌套，則遵循祖先優先的原則。

z-index: auto（默認值）

z-index: 數字（可以為負值，也支持animation,遵循后來居上的，誰大誰牛逼的原則）

z-index: inherit（不考慮CSS3，只有定位(非static)元素（position: relative/absolute/fixed/sticky）的z-index才起作用的）

層疊上下文即指z軸上下文，頁面根元素天生具有層疊上下文，稱為“根層疊上下文”，z-index: 的定位元素也具有層疊上下文。

層疊上下文中的每個元素都有一個層疊水平，決定了同一個層疊上下文中的元素在z舟上的顯示順序。

層疊水平并不是z-index, 普通元素就有層疊水平，但是只有定位元素才有z-index。

層疊順序：

層疊上下文background/border

負z-index

block塊狀水平盒子

float浮動盒子

inline/inline-block水平盒子

z-index:auto,定位元素的默認值，從層疊順序上來講，等價于z-index: 0

正z-index

z-index嵌套并且z-index都為Number時，遵循祖先優先原則，但是對于z-index: auto，祖先遵循原則不work，原因是（z-index: auto）當前層疊上下文的生成盒子層疊水平是0，盒子（除非是根元素）不會創建一個新的層疊上下文。

z-index不為auto的定位元素會創建層疊上下文，z-index: auto是不會創建層疊上下文的

z-index層疊順序的比較止步于父級層疊上下文

z-index不為auto的flex項（父元素為display: flex/inline-flex, 子元素要設置z-index, 不讓其為默認值auto）

opacity !=1 的元素參與層疊上下文

transform !=none 的元素參與層疊上下文

position: fixed 的元素參與層疊上下文

position: relative/absolute/fixed

display: flex/inline-flex容器的子flex項

對于非浮層元素（彈框類的），避免設置z-index

z-index無需超過2

負z-index與可訪問性隱藏（人肉眼不可見，但輔助設備可見）

相對自身定位（absolute則是去找外面的限制容器）

無侵入，不影響他人

top/left VS bottom/right對立時, relative是斗爭，top>bottom, left>right（absolute則是拉伸）

top/left/right/bottom限制

限制層級z-index

限制超越overflow(absolute能夠越出overflow限制)

relative層級很高，可覆蓋后面的dom

盡量減少使用relative, 去施加黑魔法

獨立的absolute會擺脫overflow的限制，不會受滾動的影響

脫離文檔流

無依賴的absolute會更強大，一些小的icon就可只用absolute來實現，用margin來微調

動畫盡量作用在absolute上

內聯元素的盒子高度是由line-height(可繼承的)決定的,撐開div高度的是line-height而不是文字的內容

line-height: normal | number | length | percent | inherit

normal: 跟著用戶的瀏覽器走，且與元素字體關聯

: number * (font-size)，所有可繼承元素根據font-size重計算各自的line-height

: (1.5em | 1.5rem | 20px | 20pt)

: (150%)相對于設置了該line-height屬性的元素的font-size.即150% * (font-size)

inherit: input框等元素默認行高是normal， 使用inherit可以讓input框可控性更強

overflow-x、overflow-y相同時，就等價于overflow

兩者不同時，若有一個設置為hidden, 則另外一個為auto,而不是visible

非display: inline水平

尺寸限制。width/height/max-width/max-height/absolute拉伸

對于td等，需要設置為table， table-layout: fixed狀態才行

無論是什么瀏覽器，默認滾動條均來自而不是

滾動條會占用容器的寬度，會遇到水平居中跳動問題，solution：

html { overflow-y: scroll; }
OR
.container { padding-left: calc(100vw - 100%);
錨點定位于overflow：

此元素的內邊距和邊框不再會增加它的寬度, 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度

行內元素的padding-top、padding-bottom、margin-top、margin-bottom屬性設置是無效的

行內元素的padding-left、padding-right、margin-left、margin-bottom屬性設置是有效的

行內元素的padding-top、padding-bottom從顯示的效果上是增加的，但其實設置的是無效的。并不會對他周圍的元素產生任何影響。

聯系：它們都能讓元素不可見
區別：

display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見

display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式

修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。

讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

white-space: nowrap （文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。）
瀏覽器默認的是，如果一個單詞很長，導致一行中剩余的空間已經放不下時，則瀏覽器會把這個單詞挪到下一行去 以下兩者的共同點是都能把長單詞強行斷句
word-break: break-all; (不會把單詞放在一個新行里，當這一行放不下的時候直接強制斷句) word-wrap: break-word;（首先就會起一個新行來放置長單詞，新的行還是放不下這個單詞則會對長單詞進行強制斷句）

對于偽元素 :before 和 :after 而言，屬性 content 為必選項
css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素.

偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素。

CSS3規范中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。

don"t want to set the order but just make your element focusable use tabindex="0" on all such elements

if you don"t want it to be focused then use tabindex="-1”

positive num: sets the order of "focusable" elements and it makes elements "focusable"

alt屬性是當圖片加載不出來時，顯示的文字

title屬性是用來顯示圖片的文字內容的

src屬性是content: url(“")

list-style-type

list-style-position

list-style/image

好文：https://css-tricks.com/almana...

該元素固定于該文檔六中. 設置left/right/top/bottom/z-index 對該元素不生效

該元素存在于文檔流中, 就像static.
left/right/top/bottom/z-index會生效的. 設置這些屬性將會移動該元素的位置

該元素脫離文檔流，相當于不存在
設置top/left/right/bottom默認是相對于document的，但是如果該元素的父元素是relative，就是相對于該父元素

該元素脫離文檔流，相當于不存在
fixed元素總是相對于document的，并不是特定的父元素，不被scrolling影響

就像relative，直到達到視口的特定閾值，就像fixed了

并不cascade, 繼承父元素的position屬性