溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS的核心知識(shí)點(diǎn)總結(jié)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS的核心知識(shí)點(diǎn)總結(jié)”吧！
CSS 的核心功能是將 CSS 屬性設(shè)定為特定的值。一個(gè)屬性與值的鍵值對(duì)被稱為聲明(declaration)。
color: red;
而如果將一個(gè)或者多個(gè)聲明用 {} 包裹起來(lái)后，那就組成了一個(gè)聲明塊（declaration block）。
{ color: red; text-align: center; }
span { color: red; text-align: center; }“規(guī)則集中最后一條聲明可以省略分號(hào)，但是并不建議這么做，因?yàn)槿菀壮鲥e(cuò)。
CSS 中的注釋：
/* 單行注釋 */ /* 多行 注釋 */
在 CSS 文件中，除了注釋、CSS 規(guī)則集以及 @規(guī)則 外，定義的一些別的東西都將被瀏覽器忽略。
CSS 規(guī)則是樣式表的主體，通常樣式表會(huì)包括大量的規(guī)則列表。但有時(shí)候也需要在樣式表中包括其他的一些信息，比如字符集，導(dǎo)入其它的外部樣式表，字體等，這些需要專門(mén)的語(yǔ)句表示。
而 @規(guī)則 就是這樣的語(yǔ)句。CSS 里包含了以下 @規(guī)則：
@namespace 告訴 CSS 引擎必須考慮XML命名空間。
@media, 如果滿足媒體查詢的條件則條件規(guī)則組里的規(guī)則生效。
@page, 描述打印文檔時(shí)布局的變化.
@font-face, 描述將下載的外部的字體。
@keyframes, 描述 CSS 動(dòng)畫(huà)的關(guān)鍵幀。
@document, 如果文檔樣式表滿足給定條件則條件規(guī)則組里的規(guī)則生效。 (推延至 CSS Level 4 規(guī)范)
除了以上這幾個(gè)之外，下面還將對(duì)幾個(gè)比較生澀的 @規(guī)則 進(jìn)行介紹。
@charset[1] 用于定義樣式表使用的字符集。它必須是樣式表中的第一個(gè)元素。如果有多個(gè) @charset 被聲明，只有第一個(gè)會(huì)被使用，而且不能在HTML元素或HTML頁(yè)面的 <style> 元素內(nèi)使用。
注意：值必須是雙引號(hào)包裹，且和
@charset "UTF-8";
平時(shí)寫(xiě)樣式文件都沒(méi)寫(xiě) @charset 規(guī)則，那這個(gè) CSS 文件到底是用的什么字符編碼的呢?
某個(gè)樣式表文件到底用的是什么字符編碼，瀏覽器有一套識(shí)別順序(優(yōu)先級(jí)由高到低)：
文件開(kāi)頭的 Byte order mark[2] 字符值，不過(guò)一般編輯器并不能看到文件頭里的 BOM 值;
HTTP 響應(yīng)頭里的 content-type 字段包含的 charset 所指定的值，比如：
Content-Type: text/css; charset=utf-8
CSS 文件頭里定義的 @charset 規(guī)則里指定的字符編碼;
標(biāo)簽里的 charset 屬性，該條已在 HTML5 中廢除;
默認(rèn)是 UTF-8。
@import[3] 用于告訴 CSS 引擎引入一個(gè)外部樣式表。
link 和 @import 都能導(dǎo)入一個(gè)樣式文件，它們有什么區(qū)別嘛?
link 是 HTML 標(biāo)簽，除了能導(dǎo)入 CSS 外，還能導(dǎo)入別的資源，比如圖片、腳本和字體等;而 @import 是 CSS 的語(yǔ)法，只能用來(lái)導(dǎo)入 CSS;
link 導(dǎo)入的樣式會(huì)在頁(yè)面加載時(shí)同時(shí)加載，@import 導(dǎo)入的樣式需等頁(yè)面加載完成后再加載;
link 沒(méi)有兼容性問(wèn)題，@import 不兼容 ie5 以下;
link 可以通過(guò) JS 操作 DOM 動(dòng)態(tài)引入樣式表改變樣式，而@import不可以。
@supports[4] 用于查詢特定的 CSS 是否生效，可以結(jié)合 not、and 和 or 操作符進(jìn)行后續(xù)的操作。
/* 如果支持自定義屬性，則把 body 顏色設(shè)置為變量 varName 指定的顏色 */ @supports (--foo: green) { body { color: var(--varName); } }層疊樣式表，這里的層疊怎么理解呢?其實(shí)它是 CSS 中的核心特性之一，用于合并來(lái)自多個(gè)源的屬性值的算法。比如說(shuō)針對(duì)某個(gè) HTML 標(biāo)簽，有許多的 CSS 聲明都能作用到的時(shí)候，那最后誰(shuí)應(yīng)該起作用呢?層疊性說(shuō)的大概就是這個(gè)。
針對(duì)不同源的樣式，將按照如下的順序進(jìn)行層疊，越往下優(yōu)先級(jí)越高：
用戶代理樣式表中的聲明(例如，瀏覽器的默認(rèn)樣式，在沒(méi)有設(shè)置其他樣式時(shí)使用)。
用戶樣式表中的常規(guī)聲明(由用戶設(shè)置的自定義樣式。由于 Chrome 在很早的時(shí)候就放棄了用戶樣式表的功能，所以這里將不再考慮它的排序。)。
作者樣式表中的常規(guī)聲明(這些是我們 Web 開(kāi)發(fā)人員設(shè)置的樣式)。
作者樣式表中的 !important 聲明。
用戶樣式表中的 !important 聲明S。
理解層疊性的時(shí)候需要結(jié)合 CSS 選擇器的優(yōu)先級(jí)以及繼承性來(lái)理解。比如針對(duì)同一個(gè)選擇器，定義在后面的聲明會(huì)覆蓋前面的;作者定義的樣式會(huì)比默認(rèn)繼承的樣式優(yōu)先級(jí)更高。
CSS 選擇器無(wú)疑是其核心之一，對(duì)于基礎(chǔ)選擇器以及一些常用偽類必須掌握。下面列出了常用的選擇器。 想要獲取更多選擇器的用法可以看 MDN CSS Selectors[5]。
標(biāo)簽選擇器：h2
類選擇器：.checked
ID 選擇器：#picker
通配選擇器：*
[attr]：指定屬性的元素;
[attr=val]：屬性等于指定值的元素;
[attr*=val]：屬性包含指定值的元素;
[attr^=val] ：屬性以指定值開(kāi)頭的元素;
[attr$=val]：屬性以指定值結(jié)尾的元素;
[attr~=val]：屬性包含指定值(完整單詞)的元素(不推薦使用);
[attr|=val]：屬性以指定值(完整單詞)開(kāi)頭的元素(不推薦使用);
相鄰兄弟選擇器：A + B
普通兄弟選擇器：A ~ B
子選擇器：A > B
后代選擇器：A B
條件偽類
:lang()：基于元素語(yǔ)言來(lái)匹配頁(yè)面元素;
:dir()：匹配特定文字書(shū)寫(xiě)方向的元素;
:has()：匹配包含指定元素的元素;
:is()：匹配指定選擇器列表里的元素;
:not()：用來(lái)匹配不符合一組選擇器的元素;
行為偽類
:active：鼠標(biāo)激活的元素;
:hover： 鼠標(biāo)懸浮的元素;
::selection：鼠標(biāo)選中的元素;
狀態(tài)偽類
:target：當(dāng)前錨點(diǎn)的元素;
:link：未訪問(wèn)的鏈接元素;
:visited：已訪問(wèn)的鏈接元素;
:focus：輸入聚焦的表單元素;
:required：輸入必填的表單元素;
:valid：輸入合法的表單元素;
:invalid：輸入非法的表單元素;
:in-range：輸入范圍以內(nèi)的表單元素;
:out-of-range：輸入范圍以外的表單元素;
:checked：選項(xiàng)選中的表單元素;
:optional：選項(xiàng)可選的表單元素;
:enabled：事件啟用的表單元素;
:disabled：事件禁用的表單元素;
:read-only：只讀的表單元素;
:read-write：可讀可寫(xiě)的表單元素;
:blank：輸入為空的表單元素;
:current()：瀏覽中的元素;
:past()：已瀏覽的元素;
:future()：未瀏覽的元素;
結(jié)構(gòu)偽類
:root：文檔的根元素;
:empty：無(wú)子元素的元素;
:first-letter：元素的首字母;
:first-line：元素的首行;
:nth-child(n)：元素中指定順序索引的元素;
:nth-last-child(n)：元素中指定逆序索引的元素;;
:first-child：元素中為首的元素;
:last-child ：元素中為尾的元素;
:only-child：父元素僅有該元素的元素;
:nth-of-type(n)：標(biāo)簽中指定順序索引的標(biāo)簽;
:nth-last-of-type(n)：標(biāo)簽中指定逆序索引的標(biāo)簽;
:first-of-type ：標(biāo)簽中為首的標(biāo)簽;
:last-of-type：標(biāo)簽中為尾標(biāo)簽;
:only-of-type：父元素僅有該標(biāo)簽的標(biāo)簽;
偽元素
::before：在元素前插入內(nèi)容;
::after：在元素后插入內(nèi)容;
優(yōu)先級(jí)就是分配給指定的 CSS 聲明的一個(gè)權(quán)重，它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。為了記憶，可以把權(quán)重分成如下幾個(gè)等級(jí)，數(shù)值越大的權(quán)重越高：
10000：!important;
01000：內(nèi)聯(lián)樣式;
00100：ID 選擇器;
00010：類選擇器、偽類選擇器、屬性選擇器;
00001：元素選擇器、偽元素選擇器;
00000：通配選擇器、后代選擇器、兄弟選擇器;
可以看到內(nèi)聯(lián)樣式(通過(guò)元素中 style 屬性定義的樣式)的優(yōu)先級(jí)大于任何選擇器;而給屬性值加上 !important 又可以把優(yōu)先級(jí)提至最高，就是因?yàn)樗膬?yōu)先級(jí)最高，所以需要謹(jǐn)慎使用它，以下有些使用注意事項(xiàng)：
一定要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級(jí)來(lái)解決問(wèn)題而不是 !important;
只有在需要覆蓋全站或外部 CSS 的特定頁(yè)面中使用 !important;
永遠(yuǎn)不要在你的插件中使用 !important;
永遠(yuǎn)不要在全站范圍的 CSS 代碼中使用 !important;
在 CSS 中有一個(gè)很重要的特性就是子元素會(huì)繼承父元素對(duì)應(yīng)屬性計(jì)算后的值。比如頁(yè)面根元素 html 的文本顏色默認(rèn)是黑色的，頁(yè)面中的所有其他元素都將繼承這個(gè)顏色，當(dāng)申明了如下樣式后，H1 文本將變成橙色。
body { color: orange; } h2 { color: inherit; }設(shè)想一下，如果 CSS 中不存在繼承性，那么我們就需要為不同文本的標(biāo)簽都設(shè)置一下 color，這樣一來(lái)的后果就是 CSS 的文件大小就會(huì)無(wú)限增大。
CSS 屬性很多，但并不是所有的屬性默認(rèn)都是能繼承父元素對(duì)應(yīng)屬性的，那哪些屬性存在默認(rèn)繼承的行為呢?一定是那些不會(huì)影響到頁(yè)面布局的屬性，可以分為如下幾類：
字體相關(guān)：font-family、font-style、font-size、font-weight 等;
文本相關(guān)：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等;
列表相關(guān)：list-style、list-style-image、list-style-type、list-style-position 等;
其他屬性：visibility、cursor 等;
對(duì)于其他默認(rèn)不繼承的屬性也可以通過(guò)以下幾個(gè)屬性值來(lái)控制繼承行為：
inherit：繼承父元素對(duì)應(yīng)屬性的計(jì)算值;
initial：應(yīng)用該屬性的默認(rèn)值，比如 color 的默認(rèn)值是 #000;
unset：如果屬性是默認(rèn)可以繼承的，則取 inherit 的效果，否則同 initial;
revert：效果等同于 unset，兼容性差。
在 CSS 的世界中，會(huì)把內(nèi)容按照從左到右、從上到下的順序進(jìn)行排列顯示。正常情況下會(huì)把頁(yè)面分割成一行一行的顯示，而每行又可能由多列組成，所以從視覺(jué)上看起來(lái)就是從上到下從左到右，而這就是 CSS 中的流式布局，又叫文檔流。文檔流就像水一樣，能夠自適應(yīng)所在的容器，一般它有如下幾個(gè)特性：
塊級(jí)元素默認(rèn)會(huì)占滿整行，所以多個(gè)塊級(jí)盒子之間是從上到下排列的;
內(nèi)聯(lián)元素默認(rèn)會(huì)在一行里一列一列的排布，當(dāng)一行放不下的時(shí)候，會(huì)自動(dòng)切換到下一行繼續(xù)按照列排布;
脫流文檔流指節(jié)點(diǎn)脫流正常文檔流后，在正常文檔流中的其他節(jié)點(diǎn)將忽略該節(jié)點(diǎn)并填補(bǔ)其原先空間。文檔一旦脫流，計(jì)算其父節(jié)點(diǎn)高度時(shí)不會(huì)將其高度納入，脫流節(jié)點(diǎn)不占據(jù)空間。有兩種方式可以讓元素脫離文檔流：浮動(dòng)和定位。
使用浮動(dòng)(float)會(huì)將元素脫離文檔流，移動(dòng)到容器左/右側(cè)邊界或者是另一個(gè)浮動(dòng)元素旁邊，該浮動(dòng)元素之前占用的空間將被別的元素填補(bǔ)，另外浮動(dòng)之后所占用的區(qū)域不會(huì)和別的元素之間發(fā)生重疊;
使用絕對(duì)定位(position: absolute;)或者固定定位(position: fixed;)也會(huì)使得元素脫離文檔流，且空出來(lái)的位置將自動(dòng)被后續(xù)節(jié)點(diǎn)填補(bǔ)。
在 CSS 中任何元素都可以看成是一個(gè)盒子，而一個(gè)盒子是由 4 部分組成的：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。
盒模型有 2 種：標(biāo)準(zhǔn)盒模型和 IE 盒模型，本別是由 W3C 和 IExplore 制定的標(biāo)準(zhǔn)。
如果給某個(gè)元素設(shè)置如下樣式：
.box { width: 200px; height: 200px; padding: 10px; border: 1px solid #eee; margin: 10px; }標(biāo)準(zhǔn)盒模型認(rèn)為：盒子的實(shí)際尺寸 = 內(nèi)容（設(shè)置的寬/高） + 內(nèi)邊距 + 邊框
所以 .box 元素內(nèi)容的寬度就為 200px，而實(shí)際的寬度則是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。
IE 盒模型認(rèn)為：盒子的實(shí)際尺寸 = 設(shè)置的寬/高 = 內(nèi)容 + 內(nèi)邊距 + 邊框
.box 元素所占用的實(shí)際寬度為 200px，而內(nèi)容的真實(shí)寬度則是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。
現(xiàn)在高版本的瀏覽器基本上默認(rèn)都是使用標(biāo)準(zhǔn)盒模型，而像 IE6 這種老古董才是默認(rèn)使用 IE 盒模型的。
在 CSS3 中新增了一個(gè)屬性 box-sizing，允許開(kāi)發(fā)者來(lái)指定盒子使用什么標(biāo)準(zhǔn)，它有 2 個(gè)值：
content-box：標(biāo)準(zhǔn)盒模型;
border-box：IE 盒模型;
視覺(jué)格式化模型(Visual formatting model)是用來(lái)處理和在視覺(jué)媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。CSS 中一切皆盒子，而視覺(jué)格式化模型簡(jiǎn)單來(lái)理解就是規(guī)定這些盒子應(yīng)該怎么樣放置到頁(yè)面中去，這個(gè)模型在計(jì)算的時(shí)候會(huì)依賴到很多的因素，比如：盒子尺寸、盒子類型、定位方案(是浮動(dòng)還是定位)、兄弟元素或者子元素以及一些別的因素。
Visual formatting model
從上圖中可以看到視覺(jué)格式化模型涉及到的內(nèi)容很多，有興趣深入研究的可以結(jié)合上圖看這個(gè) W3C 的文檔 Visual formatting model[6]。所以這里就簡(jiǎn)單介紹下盒子類型。
盒子類型由 display 決定，同時(shí)給一個(gè)元素設(shè)置 display 后，將會(huì)決定這個(gè)盒子的 2 個(gè)顯示類型(display type)：
outer display type(對(duì)外顯示)：決定了該元素本身是如何布局的，即參與何種格式化上下文;
inner display type(對(duì)內(nèi)顯示)：其實(shí)就相當(dāng)于把該元素當(dāng)成了容器，規(guī)定了其內(nèi)部子元素是如何布局的，參與何種格式化上下文;
對(duì)外顯示方面，盒子類型可以分成 2 類：block-level box(塊級(jí)盒子) 和 inline-level box(行內(nèi)級(jí)盒子)。
依據(jù)上圖可以列出都有哪些塊級(jí)和行內(nèi)級(jí)盒子：
塊級(jí)盒子：display 為 block、list-item、table、flex、grid、flow-root 等;
行內(nèi)級(jí)盒子：display 為 inline、inline-block、inline-table 等;
所有塊級(jí)盒子都會(huì)參與 BFC，呈現(xiàn)垂直排列;而所有行內(nèi)級(jí)盒子都參會(huì) IFC，呈現(xiàn)水平排列。
除此之外，block、inline 和 inline-block 還有什么更具體的區(qū)別呢?
占滿一行，默認(rèn)繼承父元素的寬度;多個(gè)塊元素將從上到下進(jìn)行排列;
設(shè)置 width/height 將會(huì)生效;
設(shè)置 padding 和 margin 將會(huì)生效;
不會(huì)占滿一行，寬度隨著內(nèi)容而變化;多個(gè) inline 元素將按照從左到右的順序在一行里排列顯示，如果一行顯示不下，則自動(dòng)換行;
設(shè)置 width/height 將不會(huì)生效;
設(shè)置豎直方向上的 padding 和 margin 將不會(huì)生效;
是行內(nèi)塊元素，不單獨(dú)占滿一行，可以看成是能夠在一行里進(jìn)行左右排列的塊元素;
設(shè)置 width/height 將會(huì)生效;
設(shè)置 padding 和 margin 將會(huì)生效;
對(duì)內(nèi)方面，其實(shí)就是把元素當(dāng)成了容器，里面包裹著文本或者其他子元素。container box 的類型依據(jù) display 的值不同，分為 4 種：
block container：建立 BFC 或者 IFC;
flex container：建立 FFC;
grid container：建立 GFC;
ruby container：接觸不多，不做介紹。
值得一提的是如果把 img 這種替換元素(replaced element)申明為 block 是不會(huì)產(chǎn)生 container box 的，因?yàn)樘鎿Q元素比如 img 設(shè)計(jì)的初衷就僅僅是通過(guò) src 把內(nèi)容替換成圖片，完全沒(méi)考慮過(guò)會(huì)把它當(dāng)成容器。
參考：
CSS 原理 - 你所不知道的 display[7]
格式化上下文[8]
格式化上下文(Formatting Context)是 CSS2.1 規(guī)范中的一個(gè)概念，大概說(shuō)的是頁(yè)面中的一塊渲染區(qū)域，規(guī)定了渲染區(qū)域內(nèi)部的子元素是如何排版以及相互作用的。
不同類型的盒子有不同格式化上下文，大概有這 4 類：
BFC (Block Formatting Context) 塊級(jí)格式化上下文;
IFC (Inline Formatting Context) 行內(nèi)格式化上下文;
FFC (Flex Formatting Context) 彈性格式化上下文;
GFC (Grid Formatting Context) 格柵格式化上下文;
其中 BFC 和 IFC 在 CSS 中扮演著非常重要的角色，因?yàn)樗鼈冎苯佑绊懥司W(wǎng)頁(yè)布局，所以需要深入理解其原理。
塊格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，只有塊級(jí)盒子參與，它規(guī)定了內(nèi)部的塊級(jí)盒子如何布局，并且與這個(gè)區(qū)域外部毫不相干。
圖來(lái)源于 yachen168
內(nèi)部的盒子會(huì)在垂直方向，一個(gè)接一個(gè)地放置;
盒子垂直方向的距離由 margin 決定，屬于同一個(gè) BFC 的兩個(gè)相鄰盒子的 margin 會(huì)發(fā)生重疊;
每個(gè)元素的 margin 的左邊，與包含塊 border 的左邊相接觸(對(duì)于從左往右的格式化，否則相反)，即使存在浮動(dòng)也是如此;
BFC 的區(qū)域不會(huì)與 float 盒子重疊;
BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
根元素：html
非溢出的可見(jiàn)元素：overflow 不為 visible
設(shè)置浮動(dòng)：float 屬性不為 none
設(shè)置定位：position 為 absolute 或 fixed
定義成塊級(jí)的非塊級(jí)元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid
1、 自適應(yīng)兩欄布局
應(yīng)用原理：BFC 的區(qū)域不會(huì)和浮動(dòng)區(qū)域重疊，所以就可以把側(cè)邊欄固定寬度且左浮動(dòng)，而對(duì)右側(cè)內(nèi)容觸發(fā) BFC，使得它的寬度自適應(yīng)該行剩余寬度。
<div class="layout">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
.aside { float: left; width: 100px; } .main { <!-- 觸發(fā) BFC --> overflow: auto; }2、清除內(nèi)部浮動(dòng)
浮動(dòng)造成的問(wèn)題就是父元素高度坍塌，所以清除浮動(dòng)需要解決的問(wèn)題就是讓父元素的高度恢復(fù)正常。而用 BFC 清除浮動(dòng)的原理就是：計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。只要觸發(fā)父元素的 BFC 即可。
.parent { overflow: hidden; }3、 防止垂直 margin 合并
BFC 渲染原理之一：同一個(gè) BFC 下的垂直 margin 會(huì)發(fā)生合并。所以如果讓 2 個(gè)元素不在同一個(gè) BFC 中即可阻止垂直 margin 合并。那如何讓 2 個(gè)相鄰的兄弟元素不在同一個(gè) BFC 中呢?可以給其中一個(gè)元素外面包裹一層，然后觸發(fā)其包裹層的 BFC，這樣一來(lái) 2 個(gè)元素就不會(huì)在同一個(gè) BFC 中了。
<div class="layout"> <div class="a">a</div> <div class="contain-b"> <div class="b">b</div> </div> </div>
.demo3 .a, .demo3 .b { border: 1px solid #999; margin: 10px; } .contain-b { overflow: hidden; }針對(duì)以上 3 個(gè) 示例 ，可以結(jié)合這個(gè) BFC 應(yīng)用示例 配合觀看更佳。
參考：CSS 原理 - Formatting Context[9]
IFC 的形成條件非常簡(jiǎn)單，塊級(jí)元素中僅包含內(nèi)聯(lián)級(jí)別元素，需要注意的是當(dāng)IFC中有塊級(jí)元素插入時(shí)，會(huì)產(chǎn)生兩個(gè)匿名塊將父元素分割開(kāi)來(lái)，產(chǎn)生兩個(gè) IFC。
子元素在水平方向上一個(gè)接一個(gè)排列，在垂直方向上將以容器頂部開(kāi)始向下排列;
節(jié)點(diǎn)無(wú)法聲明寬高，其中 margin 和 padding 在水平方向有效在垂直方向無(wú)效;
節(jié)點(diǎn)在垂直方向上以不同形式對(duì)齊;
能把在一行上的框都完全包含進(jìn)去的一個(gè)矩形區(qū)域，被稱為該行的線盒(line box)。線盒的寬度是由包含塊(containing box)和與其中的浮動(dòng)來(lái)決定;
IFC 中的 line box 一般左右邊貼緊其包含塊，但 float 元素會(huì)優(yōu)先排列。
IFC 中的 line box 高度由 line-height 計(jì)算規(guī)則來(lái)確定，同個(gè) IFC 下的多個(gè) line box 高度可能會(huì)不同;
當(dāng)內(nèi)聯(lián)級(jí)盒子的總寬度少于包含它們的 line box 時(shí)，其水平渲染規(guī)則由 text-align 屬性值來(lái)決定;
當(dāng)一個(gè)內(nèi)聯(lián)盒子超過(guò)父元素的寬度時(shí)，它會(huì)被分割成多盒子，這些盒子分布在多個(gè) line box 中。如果子元素未設(shè)置強(qiáng)制換行的情況下，inline box 將不可被分割，將會(huì)溢出父元素。
針對(duì)如上的 IFC 渲染規(guī)則，你是不是可以分析下下面這段代碼的 IFC 環(huán)境是怎么樣的呢?
<p>It can get <strong>very complicated</storng> once you start looking into it.</p>
對(duì)應(yīng)上面這樣一串 HTML 分析如下：
p 標(biāo)簽是一個(gè) block container，對(duì)內(nèi)將產(chǎn)生一個(gè) IFC;
由于一行沒(méi)辦法顯示完全，所以產(chǎn)生了 2 個(gè)線盒(line box);線盒的寬度就繼承了 p 的寬度;高度是由里面的內(nèi)聯(lián)盒子的 line-height 決定;
It can get：匿名的內(nèi)聯(lián)盒子;
very complicated：strong 標(biāo)簽產(chǎn)生的內(nèi)聯(lián)盒子;
once you start：匿名的內(nèi)聯(lián)盒子;
looking into it.：匿名的內(nèi)聯(lián)盒子。
參考：Inline formatting contexts[10]
水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為 inline-block 則會(huì)在外層產(chǎn)生 IFC，通過(guò) text-align 則可以使其水平居中。
垂直居中：創(chuàng)建一個(gè) IFC，用其中一個(gè)元素?fù)伍_(kāi)父元素的高度，然后設(shè)置其 vertical-align: middle，其他行內(nèi)元素則可以在此父元素下垂直居中。
偷個(gè)懶，demo 和圖我就不做了。
在電腦顯示屏幕上的顯示的頁(yè)面其實(shí)是一個(gè)三維的空間，水平方向是 X 軸，豎直方向是 Y 軸，而屏幕到眼睛的方向可以看成是 Z 軸。眾 HTML 元素依據(jù)自己定義的屬性的優(yōu)先級(jí)在 Z 軸上按照一定的順序排開(kāi)，而這其實(shí)就是層疊上下文所要描述的東西。
-w566
我們對(duì)層疊上下文的第一印象可能要來(lái)源于 z-index，認(rèn)為它的值越大，距離屏幕觀察者就越近，那么層疊等級(jí)就越高，事實(shí)確實(shí)是這樣的，但層疊上下文的內(nèi)容遠(yuǎn)非僅僅如此：
z-index 能夠在層疊上下文中對(duì)元素的堆疊順序其作用是必須配合定位才可以;
除了 z-index 之外，一個(gè)元素在 Z 軸上的顯示順序還受層疊等級(jí)和層疊順序影響;
在看層疊等級(jí)和層疊順序之前，我們先來(lái)看下如何產(chǎn)生一個(gè)層疊上下文，特定的 HTML 元素或者 CSS 屬性產(chǎn)生層疊上下文，MDN 中給出了這么一個(gè)列表，符合以下任一條件的元素都會(huì)產(chǎn)生層疊上下文：
html 文檔根元素
聲明 position: absolute/relative 且 z-index 值不為 auto 的元素;
聲明 position: fixed/sticky 的元素;
flex 容器的子元素，且 z-index 值不為 auto;
grid 容器的子元素，且 z-index 值不為 auto;
opacity 屬性值小于 1 的元素;
mix-blend-mode 屬性值不為 normal 的元素;
以下任意屬性值不為 none 的元素：
鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)
transform
filter
perspective
clip-path
mask / mask-image / mask-border
isolation 屬性值為 isolate 的元素;
-webkit-overflow-scrolling 屬性值為 touch 的元素;
will-change 值設(shè)定了任一屬性而該屬性在 non-initial 值時(shí)會(huì)創(chuàng)建層疊上下文的元素;
contain 屬性值為 layout、paint 或包含它們其中之一的合成值(比如 contain: strict、contain: content)的元素。
層疊等級(jí)指節(jié)點(diǎn)在三維空間 Z 軸上的上下順序。它分兩種情況：
在同一個(gè)層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在 Z 軸上的上下順序;
在其他普通元素中，它描述定義的是這些普通元素在 Z 軸上的上下順序;
普通節(jié)點(diǎn)的層疊等級(jí)優(yōu)先由其所在的層疊上下文決定，層疊等級(jí)的比較只有在當(dāng)前層疊上下文中才有意義，脫離當(dāng)前層疊上下文的比較就變得無(wú)意義了。
在同一個(gè)層疊上下文中如果有多個(gè)元素，那么他們之間的層疊順序是怎么樣的呢?
以下這個(gè)列表越往下層疊優(yōu)先級(jí)越高，視覺(jué)上的效果就是越容易被用戶看到(不會(huì)被其他元素覆蓋)：
層疊上下文的 border 和 background
z-index < 0 的子節(jié)點(diǎn)
標(biāo)準(zhǔn)流內(nèi)塊級(jí)非定位的子節(jié)點(diǎn)
浮動(dòng)非定位的子節(jié)點(diǎn)
標(biāo)準(zhǔn)流內(nèi)行內(nèi)非定位的子節(jié)點(diǎn)
z-index: auto/0 的子節(jié)點(diǎn)
z-index > 0的子節(jié)點(diǎn)
在同一個(gè)層疊上下文中，比較兩個(gè)元素就是按照上圖的介紹的層疊順序進(jìn)行比較。
如果不在同一個(gè)層疊上下文中的時(shí)候，那就需要比較兩個(gè)元素分別所處的層疊上下文的等級(jí)。
如果兩個(gè)元素都在同一個(gè)層疊上下文，且層疊順序相同，則在 HTML 中定義越后面的層疊等級(jí)越高。
參考：徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index[11]
CSS 的聲明是由屬性和值組成的，而值的類型有許多種：
數(shù)值：長(zhǎng)度值 ，用于指定例如元素 width、border-width、font-size 等屬性的值;
百分比：可以用于指定尺寸或長(zhǎng)度，例如取決于父容器的 width、height 或默認(rèn)的 font-size;
顏色：用于指定 background-color、color 等;
坐標(biāo)位置：以屏幕的左上角為坐標(biāo)原點(diǎn)定位元素的位置，比如常見(jiàn)的 background-position、top、right、bottom 和 left 等屬性;
函數(shù)：用于指定資源路徑或背景圖片的漸變，比如 url()、linear-gradient() 等;
而還有些值是需要帶單位的，比如 width: 100px，這里的 px 就是表示長(zhǎng)度的單位，長(zhǎng)度單位除了 px 外，比較常用的還有 em、rem、vw/vh 等。那他們有什么區(qū)別呢?又應(yīng)該在什么時(shí)候使用它們呢?
屏幕分辨率是指在屏幕的橫縱方向上的像素點(diǎn)數(shù)量，比如分辨率 1920×1080 意味著水平方向含有 1920 個(gè)像素?cái)?shù)，垂直方向含有 1080 個(gè)像素?cái)?shù)。
而 px 表示的是 CSS 中的像素，在 CSS 中它是絕對(duì)的長(zhǎng)度單位，也是最基礎(chǔ)的單位，其他長(zhǎng)度單位會(huì)自動(dòng)被瀏覽器換算成 px。但是對(duì)于設(shè)備而言，它其實(shí)又是相對(duì)的長(zhǎng)度單位，比如寬高都為 2px，在正常的屏幕下，其實(shí)就是 4 個(gè)像素點(diǎn)，而在設(shè)備像素比(devicePixelRatio) 為 2 的 Retina 屏幕下，它就有 16 個(gè)像素點(diǎn)。所以屏幕尺寸一致的情況下，屏幕分辨率越高，顯示效果就越細(xì)膩。
講到這里，還有一些相關(guān)的概念需要理清下：
設(shè)備屏幕的物理像素，表示的是屏幕的橫縱有多少像素點(diǎn);和屏幕分辨率是差不多的意思。
設(shè)備像素比表示 1 個(gè) CSS 像素等于幾個(gè)物理像素。
計(jì)算公式：DPR = 物理像素?cái)?shù) / 邏輯像素?cái)?shù);
在瀏覽器中可以通過(guò) window.devicePixelRatio 來(lái)獲取當(dāng)前屏幕的 DPR。
像素密度也叫顯示密度或者屏幕密度，縮寫(xiě)為 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。從技術(shù)角度說(shuō)，PPI 只存在于計(jì)算機(jī)顯示領(lǐng)域，而 DPI 只出現(xiàn)于打印或印刷領(lǐng)域。
計(jì)算公式：像素密度 = 屏幕對(duì)角線的像素尺寸 / 物理尺寸
比如，對(duì)于分辨率為 750 * 1334 的 iPhone 6 來(lái)說(shuō)，它的像素密度為：
Math.sqrt(750 * 750 + 1334 * 1334) / 4.7 = 326ppi
DIP 是特別針對(duì) Android設(shè)備而衍生出來(lái)的，原因是安卓屏幕的尺寸繁多，因此為了顯示能盡量和設(shè)備無(wú)關(guān)，而提出的這個(gè)概念。它是基于屏幕密度而計(jì)算的，認(rèn)為當(dāng)屏幕密度是 160 的時(shí)候，px = DIP。
計(jì)算公式：dip = px * 160 / dpi
em 是 CSS 中的相對(duì)長(zhǎng)度單位中的一個(gè)。居然是相對(duì)的，那它到底是相對(duì)的誰(shuí)呢?它有 2 層意思：
在 font-size 中使用是相對(duì)于父元素的 font-size 大小，比如父元素 font-size: 16px，當(dāng)給子元素指定 font-size: 2em 的時(shí)候，經(jīng)過(guò)計(jì)算后它的字體大小會(huì)是 32px;
在其他屬性中使用是相對(duì)于自身的字體大小，如 width/height/padding/margin 等;
我們都知道每個(gè)瀏覽器都會(huì)給 HTML 根元素 html 設(shè)置一個(gè)默認(rèn)的 font-size，而這個(gè)值通常是 16px。這也就是為什么 1em = 16px 的原因所在了。
em 在計(jì)算的時(shí)候是會(huì)層層計(jì)算的，比如：
<div> <p></p> </div>
div { font-size: 2em; } p { font-size: 2em; }對(duì)于如上一個(gè)結(jié)構(gòu)的 HTML，由于根元素 html 的字體大小是 16px，所以 p 標(biāo)簽最終計(jì)算出來(lái)后的字體大小會(huì)是 16 * 2 * 2 = 64px
rem(root em) 和 em 一樣，也是一個(gè)相對(duì)長(zhǎng)度單位，不過(guò) rem 相對(duì)的是 HTML 的根元素 html。
rem 由于是基于 html 的 font-size 來(lái)計(jì)算，所以通常用于自適應(yīng)網(wǎng)站或者 H5 中。
比如在做 H5 的時(shí)候，前端通常會(huì)讓 UI 給 750px 寬的設(shè)計(jì)圖，而在開(kāi)發(fā)的時(shí)候可以基于 iPhone X 的尺寸 375px * 812px 來(lái)寫(xiě)頁(yè)面，這樣一來(lái)的話，就可以用下面的 JS 依據(jù)當(dāng)前頁(yè)面的視口寬度自動(dòng)計(jì)算出根元素 html 的基準(zhǔn) font-size 是多少。
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', psdWidth = 750, // 設(shè)計(jì)圖寬度 recalc = function () { var clientWidth = docEl.clientWidth; if ( !clientWidth ) return; if ( clientWidth >= 640 ) { docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px'; } else { docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px'; } }; if ( !doc.addEventListener ) return; // 綁定事件的時(shí)候最好配合防抖函數(shù) win.addEventListener( resizeEvt, debounce(recalc, 1000), false ); doc.addEventListener( 'DOMContentLoaded', recalc, false ); function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(context, args) }, wait); } } })(document, window);比如當(dāng)視口是 375px 的時(shí)候，經(jīng)過(guò)計(jì)算 html 的 font-size 會(huì)是 100px，這樣有什么好處呢?好處就是方便寫(xiě)樣式，比如從設(shè)計(jì)圖量出來(lái)的 header 高度是 50px 的，那我們寫(xiě)樣式的時(shí)候就可以直接寫(xiě)：
header { height: 0.5rem; }
每個(gè)從設(shè)計(jì)圖量出來(lái)的尺寸只要除于 100 即可得到當(dāng)前元素的 rem 值，都不用經(jīng)過(guò)計(jì)算，非常方便。偷偷告訴你，如果你把上面那串計(jì)算 html 標(biāo)簽 font-size 的 JS 代碼中的 200 替換成 2，那在計(jì)算 rem 的時(shí)候就不需要除于 100 了，從設(shè)計(jì)圖量出多大 px，就直接寫(xiě)多少個(gè) rem。
vw 和 vh 分別是相對(duì)于屏幕視口寬度和高度而言的長(zhǎng)度單位：
1vw = 視口寬度均分成 100 份中 1 份的長(zhǎng)度;
1vh = 視口高度均分成 100 份中 1 份的長(zhǎng)度;
在 JS 中 100vw = window.innerWidth，100vh = window.innerHeight。
vw/vh 的出現(xiàn)使得多了一種寫(xiě)自適應(yīng)布局的方案，開(kāi)發(fā)者不再局限于 rem 了。
相對(duì)視口的單位，除了 vw/vh 外，還有 vmin 和 vmax：
vmin：取 vw 和 vh 中值較小的;
vmax：取 vw 和 vh 中值較大的;
CSS 中用于表示顏色的值種類繁多，足夠構(gòu)成一個(gè)體系，所以這里就專門(mén)拿出一個(gè)小節(jié)來(lái)講解它。
根據(jù) CSS 顏色草案[12] 中提到的顏色值類型，大概可以把它們分為這幾類：
顏色關(guān)鍵字
transparent 關(guān)鍵字
currentColor 關(guān)鍵字
RGB 顏色
HSL 顏色
顏色關(guān)鍵字(color keywords)是不區(qū)分大小寫(xiě)的標(biāo)識(shí)符，它表示一個(gè)具體的顏色，比如 white(白)，黑(black)等;
可接受的關(guān)鍵字列表在CSS的演變過(guò)程中發(fā)生了改變：
CSS 標(biāo)準(zhǔn) 1 只接受 16 個(gè)基本顏色，稱為 VGA 顏色，因?yàn)樗鼈儊?lái)源于 VGA 顯卡所顯示的顏色集合而被稱為 VGA colors (視頻圖形陣列色彩)。
CSS 標(biāo)準(zhǔn) 2 增加了 orange 關(guān)鍵字。
從一開(kāi)始，瀏覽器接受其它的顏色，由于一些早期瀏覽器是 X11 應(yīng)用程序，這些顏色大多數(shù)是 X11 命名的顏色列表，雖然有一點(diǎn)不同。SVG 1.0 是首個(gè)正式定義這些關(guān)鍵字的標(biāo)準(zhǔn);CSS 色彩標(biāo)準(zhǔn) 3 也正式定義了這些關(guān)鍵字。它們經(jīng)常被稱作擴(kuò)展的顏色關(guān)鍵字， X11 顏色或 SVG 顏色 。
CSS 顏色標(biāo)準(zhǔn) 4 添加可 rebeccapurple 關(guān)鍵字來(lái)紀(jì)念 web 先鋒 Eric Meyer。
如下這張圖是 16 個(gè)基礎(chǔ)色，又叫 VGA 顏色。截止到目前為止 CSS 顏色關(guān)鍵字總共有 146 個(gè)，這里可以查看 完整的色彩關(guān)鍵字列表[13]。
VGA 顏色
需要注意的是如果聲明的時(shí)候的顏色關(guān)鍵字是錯(cuò)誤的，瀏覽器會(huì)忽略它。
transparent 關(guān)鍵字表示一個(gè)完全透明的顏色，即該顏色看上去將是背景色。從技術(shù)上說(shuō)，它是帶有 alpha 通道為最小值的黑色，是 rgba(0,0,0,0) 的簡(jiǎn)寫(xiě)。
透明關(guān)鍵字有什么應(yīng)用場(chǎng)景呢?
下面這個(gè)圖是用 4 條邊框填充的正方形，看懂了它你大概就知道該如何用 CSS 寫(xiě)三角形了。
div { border-top-color: #ffc107; border-right-color: #00bcd4; border-bottom-color: #e26b6b; border-left-color: #cc7cda; border-width: 50px; border-style: solid; }用 transparent 實(shí)現(xiàn)三角形的原理：
首先寬高必須是 0px，通過(guò)邊框的粗細(xì)來(lái)填充內(nèi)容;
那條邊需要就要加上顏色，而不需要的邊則用 transparent;
想要什么樣姿勢(shì)的三角形，完全由上下左右 4 條邊的中有顏色的邊和透明的邊的位置決定;
等腰三角形：設(shè)置一條邊有顏色，然后緊挨著的 2 邊是透明，且寬度是有顏色邊的一半;直角三角形：設(shè)置一條邊有顏色，然后緊挨著的任何一邊透明即可。
看下示例：
常常在移動(dòng)端的時(shí)候點(diǎn)擊的按鈕的區(qū)域特別小，但是由于現(xiàn)實(shí)效果又不太好把它做大，所以常用的一個(gè)手段就是通過(guò)透明的邊框來(lái)增大按鈕的點(diǎn)擊區(qū)域：
.btn { border: 5px solid transparent; }currentColor 會(huì)取當(dāng)前元素繼承父級(jí)元素的文本顏色值或聲明的文本顏色值，即 computed 后的 color 值。
比如，對(duì)于如下 CSS，該元素的邊框顏色會(huì)是 red：
.btn { color: red; border: 1px solid currentColor; }RGB[A] 顏色是由 R(red)-G(green)-B(blue)-A(alpha) 組成的色彩空間。
在 CSS 中，它有兩種表示形式：
十六進(jìn)制符號(hào);
函數(shù)符;
RGB 中的每種顏色的值范圍是 00~ff，值越大表示顏色越深。所以一個(gè)顏色正常是 6 個(gè)十六進(jìn)制字符加上 # 組成，比如紅色就是 #ff0000。
如果 RGB 顏色需要加上不透明度，那就需要加上 alpha 通道的值，它的范圍也是 00~ff，比如一個(gè)帶不透明度為 67% 的紅色可以這樣寫(xiě) #ff0000aa。
使用十六進(jìn)制符號(hào)表示顏色的時(shí)候，都是用 2 個(gè)十六進(jìn)制表示一個(gè)顏色，如果這 2 個(gè)字符相同，還可以縮減成只寫(xiě) 1 個(gè)，比如，紅色 #f00;帶 67% 不透明度的紅色 #f00a。
當(dāng) RGB 用函數(shù)表示的時(shí)候，每個(gè)值的范圍是 0~255 或者 0%~100%，所以紅色是 rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)。
如果需要使用函數(shù)來(lái)表示帶不透明度的顏色值，值的范圍是 0~1 及其之間的小數(shù)或者 0%~100%，比如帶 67% 不透明度的紅色是 rgba(255, 0, 0, 0.67) 或者 rgba(100%, 0%, 0%, 67%)
“需要注意的是 RGB 這 3 個(gè)顏色值需要保持一致的寫(xiě)法，要嘛用數(shù)字要嘛用百分比，而不透明度的值的可以不用和 RGB 保持一致寫(xiě)法。比如 rgb(100%, 0, 0) 這個(gè)寫(xiě)法是無(wú)效的;而 rgb(100%, 0%, 0%, 0.67) 是有效的。
在第 4 代 CSS 顏色標(biāo)準(zhǔn)中，新增了一種新的函數(shù)寫(xiě)法，即可以把 RGB 中值的分隔逗號(hào)改成空格，而把 RGB 和 alpha 中的逗號(hào)改成 /，比如帶 67% 不透明度的紅色可以這樣寫(xiě) rgba(255 0 0 / 0.67)。另外還把 rgba 的寫(xiě)法合并到 rgb 函數(shù)中了，即 rgb 可以直接寫(xiě)帶不透明度的顏色。
HSL[A] 顏色是由色相(hue)-飽和度(saturation)-亮度(lightness)-不透明度組成的顏色體系。
色相(H)是色彩的基本屬性，值范圍是 0~360 或者 0deg~360deg， 0 (或 360) 為紅色, 120 為綠色, 240 為藍(lán)色;
飽和度(S)是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0~100% 的數(shù)值;0% 為灰色， 100% 全色;
亮度(L)，取 0~100%，0% 為暗，100% 為白;
不透明度(A)，取 0~100%，或者0~1及之間的小數(shù);
寫(xiě)法上可以參考 RGB 的寫(xiě)法，只是參數(shù)的值不一樣。
給一個(gè)按鈕設(shè)置不透明度為 67% 的紅色的 color 的寫(xiě)法，以下全部寫(xiě)法效果一致：
button { color: #ff0000aa; color: #f00a; color: rgba(255, 0, 0, 0.67); color: rgb(100% 0% 0% / 67%); color: hsla(0, 100%, 50%, 67%); color: hsl(0deg 100% 50% / 67%); }小提示：在 Chrome DevTools 中可以按住 shift + 鼠標(biāo)左鍵可以切換顏色的表示方式。
媒體查詢是指針對(duì)不同的設(shè)備、特定的設(shè)備特征或者參數(shù)進(jìn)行定制化的修改網(wǎng)站的樣式。
你可以通過(guò)給 加上 media 屬性來(lái)指定該樣式文件只能對(duì)什么設(shè)備生效，不指定的話默認(rèn)是 all，即對(duì)所有設(shè)備都生效：
<link rel="stylesheet" src="styles.css" media="screen" /> <link rel="stylesheet" src="styles.css" media="print" />
都支持哪些設(shè)備類型?
all：適用于所有設(shè)備;
print：適用于在打印預(yù)覽模式下在屏幕上查看的分頁(yè)材料和文檔;
screen：主要用于屏幕;
speech：主要用于語(yǔ)音合成器。
“需要注意的是：通過(guò) media 指定的 資源盡管不匹配它的設(shè)備類型，但是瀏覽器依然會(huì)加載它。
除了通過(guò) 讓指定設(shè)備生效外，還可以通過(guò) @media 讓 CSS 規(guī)則在特定的條件下才能生效。響應(yīng)式頁(yè)面就是使用了 @media 才讓一個(gè)頁(yè)面能夠同時(shí)適配 PC、Pad 和手機(jī)端。
@media (min-width: 1000px) {}媒體查詢支持邏輯操作符：
and：查詢條件都滿足的時(shí)候才生效;
not：查詢條件取反;
only：整個(gè)查詢匹配的時(shí)候才生效，常用語(yǔ)兼容舊瀏覽器，使用時(shí)候必須指定媒體類型;
逗號(hào)或者 or：查詢條件滿足一項(xiàng)即可匹配;
媒體查詢還支持眾多的媒體特性[14]，使得它可以寫(xiě)出很復(fù)雜的查詢條件：
/* 用戶設(shè)備的最小高度為680px或?yàn)榭v向模式的屏幕設(shè)備 */ @media (min-height: 680px), screen and (orientation: portrait) {}之前我們通常是在預(yù)處理器里才可以使用變量，而現(xiàn)在 CSS 里也支持了變量的用法。通過(guò)自定義屬性就可以在想要使用的地方引用它。
自定義屬性也和普通屬性一樣具有級(jí)聯(lián)性，申明在 :root 下的時(shí)候，在全文檔范圍內(nèi)可用，而如果是在某個(gè)元素下申明自定義屬性，則只能在它及它的子元素下才可以使用。
自定義屬性必須通過(guò) --x 的格式申明，比如：--theme-color: red; 使用自定義屬性的時(shí)候，需要用 var 函數(shù)。比如：
<!-- 定義自定義屬性 --> :root { --theme-color: red; } <!-- 使用變量 --> h2 { color: var(--theme-color); }
上圖這個(gè)是使用 CSS 自定義屬性配合 JS 實(shí)現(xiàn)的動(dòng)態(tài)調(diào)整元素的 box-shadow，具體可以看這個(gè) codepen demo。
Retina 顯示屏比普通的屏幕有著更高的分辨率，所以在移動(dòng)端的 1px 邊框就會(huì)看起來(lái)比較粗，為了美觀通常需要把這個(gè)線條細(xì)化處理。這里有篇文章列舉了 7 中方案可以參考一下：7種方法解決移動(dòng)端Retina屏幕1px邊框問(wèn)題[15]
而這里附上最后一種通過(guò)偽類和 transform 實(shí)現(xiàn)的相對(duì)完美的解決方案：
只設(shè)置單條底部邊框：
.scale-1px-bottom { position: relative; border:none; } .scale-1px-bottom::after { content: ''; position: absolute; left: 0; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }同時(shí)設(shè)置 4 條邊框：
.scale-1px { position: relative; margin-bottom: 20px; border:none; } .scale-1px::after { content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }什么是浮動(dòng)：浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素。
為什么要清楚浮動(dòng)，它造成了什么問(wèn)題?
因?yàn)楦?dòng)元素會(huì)脫離正常的文檔流，并不會(huì)占據(jù)文檔流的位置，所以如果一個(gè)父元素下面都是浮動(dòng)元素，那么這個(gè)父元素就無(wú)法被浮動(dòng)元素所撐開(kāi)，這樣一來(lái)父元素就丟失了高度，這就是所謂的浮動(dòng)造成的父元素高度坍塌問(wèn)題。
父元素高度一旦坍塌將對(duì)后面的元素布局造成影響，為了解決這個(gè)問(wèn)題，所以需要清除浮動(dòng)，讓父元素恢復(fù)高度，那該如何做呢?
這里介紹兩種方法：通過(guò) BFC 來(lái)清除、通過(guò) clear 來(lái)清除。
前面介紹 BFC 的時(shí)候提到過(guò)，計(jì)算 BFC 高度的時(shí)候浮動(dòng)子元素的高度也將計(jì)算在內(nèi)，利用這條規(guī)則就可以清楚浮動(dòng)。
假設(shè)一個(gè)父元素 parent 內(nèi)部只有 2 個(gè)子元素 child，且它們都是左浮動(dòng)的，這個(gè)時(shí)候 parent 如果沒(méi)有設(shè)置高度的話，因?yàn)楦?dòng)造成了高度坍塌，所以 parent 的高度會(huì)是 0，此時(shí)只要給 parent 創(chuàng)造一個(gè) BFC，那它的高度就能恢復(fù)了。
而產(chǎn)生 BFC 的方式很多，我們可以給父元素設(shè)置overflow: auto 來(lái)簡(jiǎn)單的實(shí)現(xiàn) BFC 清除浮動(dòng)，但是為了兼容 IE 最好用 overflow: hidden。
.parent { overflow: hidden; }通過(guò) overflow: hidden 來(lái)清除浮動(dòng)并不完美，當(dāng)元素有陰影或存在下拉菜單的時(shí)候會(huì)被截?cái)?，所以該方法使用比較局限。
我先把結(jié)論貼出來(lái)：
.clearfix { zoom: 1; } .clearfix::after { content: ""; display: block; clear: both; }這種寫(xiě)法的核心原理就是通過(guò) ::after 偽元素為在父元素的最后一個(gè)子元素后面生成一個(gè)內(nèi)容為空的塊級(jí)元素，然后通過(guò) clear 將這個(gè)偽元素移動(dòng)到所有它之前的浮動(dòng)元素的后面，畫(huà)個(gè)圖來(lái)理解一下。
可以結(jié)合這個(gè) codepen demo 一起理解上圖的 clear 清楚浮動(dòng)原理。
上面這個(gè) demo 或者圖里為了展示需要所以給偽元素的內(nèi)容設(shè)置為了 ::after，實(shí)際使用的時(shí)候需要設(shè)置為空字符串，讓它的高度為 0，從而父元素的高度都是由實(shí)際的子元素?fù)伍_(kāi)。
該方式基本上是現(xiàn)在人人都在用的清除浮動(dòng)的方案，非常通用。
參考：CSS中的浮動(dòng)和清除浮動(dòng)，梳理一下[16]
針對(duì)同一個(gè)類型的 HTML 標(biāo)簽，不同的瀏覽器往往有不同的表現(xiàn)，所以在網(wǎng)站制作的時(shí)候，開(kāi)發(fā)者通常都是需要將這些瀏覽器的默認(rèn)樣式清除，讓網(wǎng)頁(yè)在不同的瀏覽器上能夠保持一致。
針對(duì)清除瀏覽器默認(rèn)樣式這件事，在很早之前 CSS 大師 Eric A. Meyer 就干過(guò)。它就是寫(xiě)一堆通用的樣式用來(lái)重置瀏覽器默認(rèn)樣式，這些樣式通常會(huì)放到一個(gè)命名為 reset.css 文件中。比如大師的 reset.css[17] 是這么寫(xiě)的：
html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }他的這份 reset.css 據(jù)說(shuō)是被使用最廣泛的重設(shè)樣式的方案了。
除了 reset.css 外，后來(lái)又出現(xiàn)了 Normalize.css[18] 。關(guān)于 Normalize.css, 其作者 necolas 專門(mén)寫(xiě)了一篇文章介紹了它，并談到了它和 reset.css 的區(qū)別。這個(gè)是他寫(xiě)那篇文章的翻譯版：讓我們談一談 Normalize.css[19]。
文章介紹到：Normalize.css 只是一個(gè)很小的CSS文件，但它在默認(rèn)的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的 CSS reset，Normalize.css 是一種現(xiàn)代的、為 HTML5 準(zhǔn)備的優(yōu)質(zhì)替代方案，現(xiàn)在已經(jīng)有很多知名的框架和網(wǎng)站在使用它了。
Normalize.css 的具體樣式可以看這里 Normalize.css
區(qū)別于 reset.css，Normalize.css 有如下特點(diǎn)：
reset.css 幾乎為所有標(biāo)簽都設(shè)置了默認(rèn)樣式，而 Normalize.css 則是有選擇性的保護(hù)了部分有價(jià)值的默認(rèn)值;
修復(fù)了很多瀏覽器的 bug，而這是 reset.css 沒(méi)做到的;
不會(huì)讓你的調(diào)試工具變的雜亂，相反 reset.css 由于設(shè)置了很多默認(rèn)值，所以在瀏覽器調(diào)試工具中往往會(huì)看到一大堆的繼承樣式，顯得很雜亂;
Normalize.css 是模塊化的，所以可以選擇性的去掉永遠(yuǎn)不會(huì)用到的部分，比如表單的一般化;
Normalize.css 有詳細(xì)的說(shuō)明文檔;
查看以上這些方案的示例： codepen demo
啥叫整塊文本?比如，下面這種技術(shù)標(biāo)簽就是屬于整塊文本：
另外他還對(duì) iOS/Safari 做了兼容處理，感興趣的可以去閱讀下：CSS 整塊文本溢出省略特性探究[20]。
讓元素在父元素中呈現(xiàn)出水平垂直居中的形態(tài)，無(wú)非就 2 種情況：
單行的文本、inline 或者 inline-block 元素;
固定寬高的塊級(jí)盒子;
不固定寬高的塊級(jí)盒子;
以下列到的所有水平垂直居中方案這里寫(xiě)了個(gè) codepen demo，配合示例閱讀效果更佳。
單行的文本、inline 或 inline-block 元素
此類元素需要水平居中，則父級(jí)元素必須是塊級(jí)元素(block level)，且父級(jí)元素上需要這樣設(shè)置樣式：
.parent { text-align: center; }方法一：通過(guò)設(shè)置上下內(nèi)間距一致達(dá)到垂直居中的效果：
.single-line { padding-top: 10px; padding-bottom: 10px; }方法二：通過(guò)設(shè)置 height 和 line-height 一致達(dá)到垂直居中：
.single-line { height: 100px; line-height: 100px; }固定寬高的塊級(jí)盒子
針對(duì)以下這些方案寫(xiě)了幾個(gè)示例： codepen demo
針對(duì)以下這些方案寫(xiě)了幾個(gè)示例： codepen demo
列了 4 種方法，都是基于如下的 HTML 和 CSS 的，結(jié)合示例閱讀效果更佳：codepen demo
<div class="layout"> <header></header> <main> <div class="inner"></div> </main> <footer></footer> </div>
html, body, .layout { height: 100%; } body { margin: 0; } header, footer { height: 50px; } main { overflow-y: auto; }
感謝各位的閱讀，以上就是“CSS的核心知識(shí)點(diǎn)總結(jié)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS的核心知識(shí)點(diǎn)總結(jié)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼