許多入門學(xué)前端的同學(xué)，或是準(zhǔn)備面試的同學(xué)都會去死記硬背一些前端知識點(diǎn)莫绣，筆者也是這么經(jīng)歷過來的沈跨，但卻不推薦這種囫圇吞棗、不求甚解的學(xué)習(xí)方式兔综，因?yàn)檫@樣會走很多彎路饿凛，屬于“應(yīng)試”學(xué)習(xí)狞玛，我們更應(yīng)該的是從基礎(chǔ)到復(fù)雜，從表象到原理的角度卻思考學(xué)習(xí)涧窒，才能熟練掌握技能心肪。

整理了一些在CSS（層疊樣式表）中的知識點(diǎn)，或許你曾看過一些什么“萬字總結(jié)”纠吴、“面試必看”硬鞍，但還是希望更多同學(xué)能夠沉下心來學(xué)習(xí)，不僅僅滿足于停留在“API工程師”的層面戴已。

一固该、width（寬）& height（高）
瀏覽器中，明確了width和height就可以繪制出一塊矩形區(qū)域糖儡，也決定（量化）了當(dāng)前HTML標(biāo)簽渲染后在屏幕上占據(jù)的有效矩形面積伐坏。

1.1 width與height的值

height屬性規(guī)則與width相同组橄。
另外max-height、min-height優(yōu)先級大于height罚随，同理max-width和min-width優(yōu)先級大于width。

1.2 height:100%無效

我們有時會在CSS里寫height: 100%羽资，發(fā)現(xiàn)并無效果淘菩，如下：

<div class="block"></div>

* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-color: green;
/*   height: 100%; */
  border: 5px solid greenyellow;
}
.block {
  width: 100%;
  height: 100%;
  background-color: red;
}

block類 div的高度并未按照我們預(yù)想那樣撐滿全屏高度

高度100%并未鋪滿屏幕

代碼&效果：https://codepen.io/DYBOY/embed/RwoJKRP

block類的父級（包含塊）是body，body在未設(shè)置值的時屠升，height值為auto潮改，body的實(shí)際計算高度為內(nèi)容撐開的高度，即為0（可以將上述代碼的border樣式取消注釋腹暖，可看到body的高度）

那么子元素block類的高度即等同于0

body {
    background-color: azure;
    height: auto;
}
.block {
    width: 100%;
    height: 0 * 100%; // 0
    background-color: red;
}

所以此時block類所在的div盒子的高度無效汇在，height為0，即在瀏覽器上無渲染高度
瀏覽器的渲染規(guī)則可理解記憶為：深度優(yōu)先遍歷計算

子元素的相對單位的計算值都是基于父/祖先元素對應(yīng)的屬性值脏答，auto是基于內(nèi)容區(qū)域撐開計算所得糕殉。

瀏覽器渲染HTML文檔流亩鬼，背景色默認(rèn)為白色，如果文檔中的html阿蝶、body標(biāo)簽設(shè)置了背景色雳锋，這兩個標(biāo)簽的背景色實(shí)際設(shè)置的是瀏覽器視口的背景色。

二羡洁、padding（內(nèi)邊距）& border（邊框）& magin（外邊距）

盒模型可以看作四個“同心矩形”組合而成玷过，如下圖

對于這三個屬性的表現(xiàn)其實(shí)并無特別可說明，見上圖可知意筑煮。

元素分為行級元素和塊級元素辛蚊，行級元素的margin和padding的上下值無效。

2.1 百分比單位計算

自己之前一直有個誤區(qū)真仲，認(rèn)為padding袋马、margin的百分比單位的計算基數(shù)是當(dāng)前元素矩形區(qū)域?qū)捀邅硭悖歉鶕?jù)包含塊的規(guī)則袒餐，他們的計算基數(shù)應(yīng)該是包含塊的width值飞蛹。

之前團(tuán)隊(duì)里大佬洪巖問：“如何實(shí)現(xiàn)一個高度是自適應(yīng)寬度3倍的圖片？”

實(shí)現(xiàn)方法1: 利用Chrome瀏覽器最新支持的aspect-ratio屬性灸眼，其問題就是C端瀏覽器兼容性不好

.box {
    aspect-ratio: 1/3; // width/height 寬高比
}

aspect-ratio效果

實(shí)現(xiàn)方法2: 巧用包含塊規(guī)則（padding和width屬性百分比值的計算基數(shù)是包含塊的寬度）+背景圖實(shí)現(xiàn)

利用包含塊規(guī)則實(shí)現(xiàn)

代碼和演示：https://codepen.io/DYBOY/pen/JjbZgeE

2.2 border-radius百分比和像素

border-radius屬性用于描述邊框圓角半徑卧檐，根據(jù)資料如果是百分比單位，則根據(jù)所在盒子模型的矩形寬和高（包含border和padding）作為計算基數(shù)焰宣，border-radius的值描述的是邊框角度所在橢圓的半長軸和半短長軸長度霉囚。

border-*-radius屬性的兩個長度或百分比值定義了四分之一橢圓的半徑，該半徑定義了外邊界邊角的形狀（參見下圖）匕积。第一個值為水平半徑盈罐，第二個為垂直半徑。如果省略第二個值闪唆，則從第一個復(fù)制盅粪。如果任一長度為零，則角為正方形悄蕾，而不是圓角票顾。

水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度帆调。

來看下面這個示例：

<div class="box">1</div>
<div class="box style1">2</div>
<div class="box style2">3</div>
<div class="box style3">4</div>

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fff;
}
.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px auto;
    background-color: #00abef;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #fff;
}
.style1 {
    padding: 20px;
}
.style2 {
    padding: 20px;
    border-radius: 50%;
}
.style3 {
    padding: 20px;
    border-width: 10px;
    box-sizing: border-box;
}

效果

代碼&演示：https://codepen.io/DYBOY/pen/BaQPaaj

發(fā)現(xiàn)第二個形狀是一個橢圓奠骄，其原因是百分比的計算是把所在元素矩形區(qū)域的寬和高作為計算基數(shù)，而所在矩形的框高的計算值需要加上padding和border的寬度番刊，所以變成了一個橢圓含鳞。那么，是不是把盒模型設(shè)置為IE盒模型就可以避免這個問題了芹务？答案是的蝉绷，如上代碼的第四個圓形鸭廷。

• 參考詳細(xì)資料：https://www.w3.org/TR/2010/WD-css3-background-20100612/#the-border-radius

利用邊框的橢圓，可以制造平滑的不規(guī)則形狀潜必，例如模仿一個水滴：

運(yùn)動的水珠

知識點(diǎn)：如果沒有設(shè)置border-color靴姿，默認(rèn)邊框顏色為所在元素的文本顏色。

2.3 BFC與margin折疊

BFC是盒模型中在屏幕上渲染展示的矩形區(qū)域磁滚，決定了浮動佛吓、盒模型渲染交互的區(qū)域。

margin區(qū)域折疊是一個BFC（塊級格式化上下文）的問題垂攘，兩個div屬于同一個BFC维雇。父子元素margin-top塌陷，兄弟元素margin重合取較大值晒他。

若想要避免吱型，則需要讓兩個相鄰設(shè)置了margin的元素都變成一個BFC。

創(chuàng)建BFC的常見CSS屬性值陨仅？

1. 浮動元素津滞，float：left/right/auto
2. 定位，position：absolute/fixed
3. 展示灼伤，display：inline-block/table相關(guān)/flow-root/flex/grid
4. flex/grid 的直接子元素為BFC
5. table 相關(guān)的比如 table触徐、table-cell、table-caption等
6. flow-root最好狐赡，無副作用
7. 溢出撞鹉，顯示指明overflow：hidden/auto
8. overflow的css計算值不為visiable，也就是指明溢出盒模型交互區(qū)域的處理方式
9. html根元素是一個BFC

關(guān)于BFC更詳細(xì)的解讀可以參閱：《可能是最好的BFC解析了...》

2.3.1 實(shí)例&解決方案

2.3.1.1 父子高度塌

父級margin颖侄，子級的margin-top無效

高度塌陷

代碼&演示：https://codepen.io/DYBOY/pen/poNxjOP

解決方案：

原因是父子組件的margin-top取最大值鸟雏，上面例子中父子組件的包含塊都是body，屬于同一個BFC（html標(biāo)簽）內(nèi)的子元素览祖，因此需要將父/子元素變成BFC（根據(jù)如上的創(chuàng)建BFC的CSS值設(shè)置）孝鹊，那么子元素的margin就會依賴父元素的左上角作為基準(zhǔn)點(diǎn)margin偏移。

2.3.1.2 兄弟元素margin取較大值

<style>
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

上下相鄰元素的外邊距為20px重合了

解決方案：

想要每兩個盒子的上下邊距為20px*2展蒂，則就需要如下處理：

<style>
.box-parent {
    overflow: hidden;
    /* display: flow-root; */
}
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>

推薦解決方案：

由于改變了DOM結(jié)構(gòu)又活，所以不是最好的解決方法，更好的方法就是利用塌陷規(guī)則玄货，增加margin-bottom/margin-top的值，直接計算得到兩塊元素之間的margin悼泌，并設(shè)置對應(yīng)值松捉。

三、Containing Block（包含塊）

包含塊內(nèi)容可參閱文章《字節(jié)前端都知道的CSS包含塊規(guī)則》

四馆里、box-sizing（盒模型）

盒子模型包含四部分：外邊距（margin area）隘世、邊框（border area）可柿、內(nèi)邊距（padding area）、內(nèi)容區(qū)（content area）丙者，其分布組合如下圖所示复斥。

盒子模型

盒模型有兩種，IE盒模型（border-box）和標(biāo)準(zhǔn)盒模型（content-box）械媒，其常用語法如下

// 默認(rèn)為標(biāo)準(zhǔn)盒模型
box-sizing：border-box ｜ content-box

不同的盒模型影響HTML標(biāo)簽在瀏覽器上實(shí)際渲染的屏幕像素面積目锭，該屬性規(guī)定了border和padding屬性值是否占用width和height規(guī)定的內(nèi)容區(qū)。

例如寬度width屬性的值計算規(guī)則如下：

• content-box：width = content width
• border-box：width = content width + padding width + margin width

一言以蔽之纷捞，content-box的寬高是規(guī)定內(nèi)容區(qū)寬高痢虹，border-box的寬高規(guī)定了content+border+padding三者和的寬高

CSS盒模型

五、position（定位）

關(guān)于定位主儡，必要明確的就是定位的基準(zhǔn)點(diǎn)是哪兒奖唯？

六、font-size（字號）& line-height（行高）

line-height帶有單位時渗磅，計算行高的結(jié)果為line-height高度嚷硫，line-height規(guī)定的是行高最小的的高度

line-height是相對單位時，line-height具有繼承性始鱼，其子元素如果沒有設(shè)置line-height仔掸，那么子元素的行高為父元素計算所得的行高值。

line-height值為純數(shù)字時医清，當(dāng)前行高會根據(jù)當(dāng)前文本的 font-size*line-height 計算所得起暮。

七、CSS選擇器

7.1 通用選擇器

.a.b：（無空格）當(dāng)a和b在同一標(biāo)簽類名中同時出現(xiàn)才選擇
.a .b：（有空格）選擇a的所有后代b
.a>.b：（>）選擇a的子代b
.a, .b：（,）a與b樣式相同
.a+.b：（+）選擇a緊鄰的兄弟b
.a~.b：（~）有共同父元素会烙，選擇a后的所有b负懦，ab不必緊鄰

7.2 屬性選擇器：

• [attr]：表示帶有以attr命名的屬性的元素筒捺。
• [attr=value]：表示帶有以attr命名的屬性，且屬性值為value的元素纸厉。
• [attr~=value]：表示帶有以attr命名的屬性的元素系吭，并且該屬性是一個以空格作為分隔符的值列表，其中至少有一個值為value颗品。
• [attr|=value]：表示帶有以attr命名的屬性的元素肯尺，屬性值為“value”或是以“value-”為前綴（"-"為連字符，Unicode 編碼為 U+002D）開頭抛猫。典型的應(yīng)用場景是用來匹配語言簡寫代碼（如 zh-CN蟆盹，zh-TW 可以用 zh 作為 value）。
• [attr^=value]：表示帶有以attr命名的屬性闺金，且屬性值是以value開頭的元素逾滥。
• [attr$=value]：表示帶有以attr命名的屬性，且屬性值是以value結(jié)尾的元素败匹。
• [attr*=value]：表示帶有以attr命名的屬性寨昙，且屬性值至少包含一個 value 值的元素。

7.3 偽類選擇器

:root ：文檔根元素<html>

八掀亩、文本處理

font-stretch: normal;
font-kerning: normal;
text-rendering: optimizeLegibility;

文本是最基礎(chǔ)最重要的功能之一舔哪，深入了解文本的渲染布局非常有必要

九、flex布局

.box {
    display: flex;  /* 還可以設(shè)置行內(nèi)元素的 inline-flex */
    flex-direction: row; /* 主軸水平２酃鳌：row：列（左至右）捉蚤；row-reverse：列（右至左）   主軸豎直！cloumn：行（上至下）炼七；column-reverse：行（下至上） */
    flex-wrap: nowrap; /* 一行放不下的時候：nowrap不換行缆巧，wrap換行，wrap-reverse換行第一行在下方  */
    /* flex-flow: row nowrap;  是上面兩者的簡寫形式 */
    justify-content: flex-start;  /* 定義項(xiàng)目在主軸上的對齊方式  flex-start左側(cè)豌拙，flex-end右側(cè)陕悬，center居中，space-between兩端對齊項(xiàng)目間隔相等按傅，space-around項(xiàng)目左右兩側(cè)間距相同 */
    align-items: flex-start; /* 定義項(xiàng)目在縱軸上的對齊方式  flex-start上捉超，flex-end下，center居中唯绍，baseline項(xiàng)目中第一行文字對齊拼岳，stretch默認(rèn)值高度未設(shè)置時候?qū)螡M容器高度 */
}
.item {
    order: 0;   /* 定義項(xiàng)目的排列順序，數(shù)值越小越靠前况芒，默認(rèn)0 */
    flex-grow: 0;   /* 定義剩于空間的放大比例惜纸，默認(rèn)0不放大，如果多個item均為1，則將等分剩于的空間堪簿，不同值按照比例分配剩于空間 */
    flex-shrink: 1; /* 定義項(xiàng)目縮小比例，默認(rèn)為1皮壁，空間不足椭更，均等比例縮小，為0則不縮小 */
    flex-basis: auto; /* 定義項(xiàng)目在分配剩于主軸空間之前的主軸占據(jù)的長度蛾魄，瀏覽器會根據(jù)這個屬性去計算是否有剩于的空間 */
    /* flex: auto; 是flex-grow虑瀑、flex-shrink和flex-basis的簡寫默認(rèn)值：0 1 auto */
    align-self: flex-start; /* 設(shè)置單個項(xiàng)目與其他項(xiàng)目不一樣的對齊方式，可覆蓋父容器設(shè)置的align-items滴须，默認(rèn)auto繼承父元素的align-items值  auto | flex-start | flex-end | center | baseline | stretch */
}

上述是筆者對flex使用經(jīng)驗(yàn)的一些精簡總結(jié)舌狗，另外推薦大家閱讀《Flexbox布局中不為人知的細(xì)節(jié) - Alibaba F2E》，從原理層解讀扔水，研讀完非常受用痛侍。

十、自定義CSS屬性

example：

html {
    --theme-color: red;
    --theme-font-size: 16px;
}

.example {
    color: var(--theme-color);
    font-size: var(--theme-font-size);
}

因?yàn)槭切碌膶傩砸?guī)則魔市，在低版本設(shè)備上可能遇上不兼容情況主届，因此可以使用查詢特性的@supports()

@supports(color: var(--theme-color)) {
    // 支持上面的的處理方式則下面的css將生效
    .class-box {
        color: var(--theme-color);
    }
}

// 對于selector的支持不好
@supports not (color: var(--theme-color)) {
    // 不支持上面的的處理方式則下面的css將生效
    .class-box {
        color: red;
    }
}

兼容性：https://caniuse.com/?search=%40supports
@support文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports

參考資料&推薦閱讀

• Everything About Auto in CSS
• HTML vs Body: How to Set Width and Height for Full Page Size
• position - MDN

更多CSS相關(guān)知識點(diǎn)，可關(guān)注CSS專欄