摘要：，視窗高度，等于視窗高度的。并不會(huì)對(duì)他周?chē)脑禺a(chǎn)生任何影響。修改屬性只會(huì)造成本元素的重繪。雖然它和普通的類相似，可以為已有的元素添加樣式，但是它只有處于樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

inline/inline-block/block -->> 牛奶/果凍/堅(jiān)果

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

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

block: p, div, ...(元素只要應(yīng)用了float, position就會(huì)變成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屬性的元素對(duì)margin不敏感，也就是margin作用在上面不work的。

列表個(gè)數(shù)不固定，但是無(wú)論列表幾個(gè)，都平分容器空間

父級(jí)設(shè)置display:table，同時(shí)寬度為容器寬度，或是直接width:100%, 此時(shí)display:table-cell子元素就會(huì)自動(dòng)等分。

.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 （兩端對(duì)齊，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的替代品，在分配空間之前，它會(huì)先跟父容器預(yù)約這么多空間，然后剩余的才歸置到剩余空間，父容器再把剩余空間分配給設(shè)置了flex-grow的容器，若同時(shí)設(shè)置了flex-basis和width，width會(huì)被覆蓋，即優(yōu)先級(jí)flex-basis > width。但是如若flex-basis，width其中有auto, 則另外的非auto屬性優(yōu)先級(jí)會(huì)更高。

 
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，否則走擴(kuò)張flex-grow；

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

如果子容器的的flex-basis設(shè)置為0(width也可以，不過(guò)flex-basis更符合語(yǔ)義)，那么計(jì)算剩余空間的時(shí)候?qū)⒉粫?huì)為子容器預(yù)留空間。

如果子容器的的flex-basis設(shè)置為auto(width也可以，不過(guò)flex-basis更符合語(yǔ)義)，那么計(jì)算剩余空間的時(shí)候?qū)?huì)根據(jù)子容器內(nèi)容的多少來(lái)預(yù)留空間。

如果父級(jí)的空間足夠：flex-grow有效，flex-shrink無(wú)效。 如果父級(jí)的空間不夠：flex-shrink 有效，flex-grow無(wú)效。

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

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

另外需注意chrome強(qiáng)制最小字體為12號(hào)，即使設(shè)置成 10px 最終都會(huì)顯示成 12px，當(dāng)把html的font-size設(shè)置成10px,子節(jié)點(diǎn)rem的計(jì)算還是以12px為基準(zhǔn)，所以網(wǎng)上很多文章提到的將html的font-size設(shè)為10方便計(jì)算不是那么可取)。
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。 vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。 vmin：vw和vh中較小的那個(gè)。 vmax：vw和vh中較大的那個(gè)。
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寸

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

border-box

padding-box

content-box

普通元素的百分比margin都是相對(duì)于父級(jí)容器的寬度來(lái)計(jì)算的

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

正正取大值

正負(fù)值相加

負(fù)負(fù)最負(fù)值

inline水平元素(非替換元素，button標(biāo)簽；正常書(shū)寫(xiě))垂直margin無(wú)效

margin重疊了

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

絕對(duì)定位的margin值其實(shí)是一直有效的，只是不像普通元素那樣，能讓兄弟元素移動(dòng)（因?yàn)榻^對(duì)元素是脫離文檔流的）

相對(duì)float元素設(shè)置margin，它不是相對(duì)于該浮動(dòng)元素，而是外部容器

inline元素導(dǎo)致的margin失效

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

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

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

vertical-align: -10% 這里的百分比是相對(duì)于該元素繼承的行高來(lái)計(jì)算的

bottom/text-bottm : 與line box底端對(duì)齊/與父元素內(nèi)容區(qū)域的底端對(duì)齊

-> vertical-align: super 提高盒子的基線到父級(jí)合適的上標(biāo)基線

-> vertical-align: sub 降低盒子的基線到父級(jí)合適的下標(biāo)基線

vertical-align:middle 不起作用，可能是因?yàn)樾懈卟粔?，將行高設(shè)為容器高度即可

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

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

Example: make icon align with text:

Centered!

指定元素及其子元素的【z順序】，而【z順序】可以決定當(dāng)元素發(fā)生覆蓋的時(shí)候，哪個(gè)元素在上面。通常較大的z-index值的元素會(huì)覆蓋較低的那個(gè)元素，如果發(fā)生z-index的嵌套，則遵循祖先優(yōu)先的原則。

z-index: auto（默認(rèn)值）

z-index: 數(shù)字（可以為負(fù)值，也支持animation,遵循后來(lái)居上的，誰(shuí)大誰(shuí)牛逼的原則）

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

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

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

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

層疊順序：

層疊上下文background/border

負(fù)z-index

block塊狀水平盒子

float浮動(dòng)盒子

inline/inline-block水平盒子

z-index:auto,定位元素的默認(rèn)值，從層疊順序上來(lái)講，等價(jià)于z-index: 0

正z-index

z-index嵌套并且z-index都為Number時(shí)，遵循祖先優(yōu)先原則，但是對(duì)于z-index: auto，祖先遵循原則不work，原因是（z-index: auto）當(dāng)前層疊上下文的生成盒子層疊水平是0，盒子（除非是根元素）不會(huì)創(chuàng)建一個(gè)新的層疊上下文。

z-index不為auto的定位元素會(huì)創(chuàng)建層疊上下文，z-index: auto是不會(huì)創(chuàng)建層疊上下文的

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

z-index不為auto的flex項(xiàng)（父元素為display: flex/inline-flex, 子元素要設(shè)置z-index, 不讓其為默認(rèn)值auto）

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

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

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

position: relative/absolute/fixed

display: flex/inline-flex容器的子flex項(xiàng)

對(duì)于非浮層元素（彈框類的），避免設(shè)置z-index

z-index無(wú)需超過(guò)2

負(fù)z-index與可訪問(wèn)性隱藏（人肉眼不可見(jiàn)，但輔助設(shè)備可見(jiàn)）

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

無(wú)侵入，不影響他人

top/left VS bottom/right對(duì)立時(shí), relative是斗爭(zhēng)，top>bottom, left>right（absolute則是拉伸）

top/left/right/bottom限制

限制層級(jí)z-index

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

relative層級(jí)很高，可覆蓋后面的dom

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

獨(dú)立的absolute會(huì)擺脫overflow的限制，不會(huì)受滾動(dòng)的影響

脫離文檔流

無(wú)依賴的absolute會(huì)更強(qiáng)大，一些小的icon就可只用absolute來(lái)實(shí)現(xiàn)，用margin來(lái)微調(diào)

動(dòng)畫(huà)盡量作用在absolute上

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

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

normal: 跟著用戶的瀏覽器走，且與元素字體關(guān)聯(lián)

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

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

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

inherit: input框等元素默認(rèn)行高是normal， 使用inherit可以讓input框可控性更強(qiáng)

overflow-x、overflow-y相同時(shí)，就等價(jià)于overflow

兩者不同時(shí)，若有一個(gè)設(shè)置為hidden, 則另外一個(gè)為auto,而不是visible

非display: inline水平

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

對(duì)于td等，需要設(shè)置為table， table-layout: fixed狀態(tài)才行

無(wú)論是什么瀏覽器，默認(rèn)滾動(dòng)條均來(lái)自而不是

滾動(dòng)條會(huì)占用容器的寬度，會(huì)遇到水平居中跳動(dòng)問(wèn)題，solution：

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

此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度, 通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度

行內(nèi)元素的padding-top、padding-bottom、margin-top、margin-bottom屬性設(shè)置是無(wú)效的

行內(nèi)元素的padding-left、padding-right、margin-left、margin-bottom屬性設(shè)置是有效的

行內(nèi)元素的padding-top、padding-bottom從顯示的效果上是增加的，但其實(shí)設(shè)置的是無(wú)效的。并不會(huì)對(duì)他周?chē)脑禺a(chǎn)生任何影響。

聯(lián)系：它們都能讓元素不可見(jiàn)
區(qū)別：

display:none;會(huì)讓元素完全從渲染樹(shù)中消失，渲染的時(shí)候不占據(jù)任何空間；visibility: hidden;不會(huì)讓元素從渲染樹(shù)消失，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見(jiàn)

display: none;是非繼承屬性，子孫節(jié)點(diǎn)消失由于元素從渲染樹(shù)消失造成，通過(guò)修改子孫節(jié)點(diǎn)屬性無(wú)法顯示；visibility: hidden;是繼承屬性，子孫節(jié)點(diǎn)消失由于繼承了hidden，通過(guò)設(shè)置visibility: visible;可以讓子孫節(jié)點(diǎn)顯式

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

讀屏器不會(huì)讀取display: none;元素內(nèi)容；會(huì)讀取visibility: hidden;元素內(nèi)容

white-space: nowrap （文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。）
瀏覽器默認(rèn)的是，如果一個(gè)單詞很長(zhǎng)，導(dǎo)致一行中剩余的空間已經(jīng)放不下時(shí)，則瀏覽器會(huì)把這個(gè)單詞挪到下一行去 以下兩者的共同點(diǎn)是都能把長(zhǎng)單詞強(qiáng)行斷句
word-break: break-all; (不會(huì)把單詞放在一個(gè)新行里，當(dāng)這一行放不下的時(shí)候直接強(qiáng)制斷句) word-wrap: break-word;（首先就會(huì)起一個(gè)新行來(lái)放置長(zhǎng)單詞，新的行還是放不下這個(gè)單詞則會(huì)對(duì)長(zhǎng)單詞進(jìn)行強(qiáng)制斷句）

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

偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。比如說(shuō)，當(dāng)用戶懸停在指定的元素時(shí)，我們可以通過(guò):hover來(lái)描述這個(gè)元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。比如說(shuō)，我們可以通過(guò):before來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹(shù)中。

偽類的操作對(duì)象是文檔樹(shù)中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒(méi)有創(chuàng)建一個(gè)文檔樹(shù)之外的元素。

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

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屬性是當(dāng)圖片加載不出來(lái)時(shí)，顯示的文字

title屬性是用來(lái)顯示圖片的文字內(nèi)容的

src屬性是content: url(“")

list-style-type

list-style-position

list-style/image

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

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

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

該元素脫離文檔流，相當(dāng)于不存在
設(shè)置top/left/right/bottom默認(rèn)是相對(duì)于document的，但是如果該元素的父元素是relative，就是相對(duì)于該父元素

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

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

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