1.層疊

css規(guī)則的順序很重要；當(dāng)應(yīng)用兩條同級(jí)別的規(guī)則到一個(gè)元素的時(shí)候，寫在后面的就是實(shí)際使用的規(guī)則

2.CSS 為控制繼承提供了四個(gè)特殊的通用屬性值

每個(gè)css屬性都接收這些值
（1）inherit：使子元素屬性和父元素相同，"開啟繼承"
（2）initial：設(shè)置屬性值和瀏覽器默認(rèn)樣式相同
如果瀏覽器默認(rèn)樣式中未設(shè)置且該屬性是自然繼承的，那么會(huì)設(shè)置為 inherit
（3）unset：將屬性重置為自然值，也就是如果屬性是自然繼承那么就是 inherit，否則和 initial一樣
（4）revert：一個(gè)新的屬性，只有很少的瀏覽器支持
CSS 的 shorthand 屬性 all 可以用于同時(shí)將這些繼承值中的一個(gè)應(yīng)用于（幾乎）所有屬性
它的值可以是其中任意一個(gè)(inherit, initial, unset, or revert)
這是一種撤銷對(duì)樣式所做更改的簡(jiǎn)便方法，以便回到之前已知的起點(diǎn)

3.層疊三個(gè)因素

重要性排序如下，前面的更重要：
1)重要程度
2)優(yōu)先級(jí)
3)資源順序：如果有超過一條規(guī)則，而且都是相同的權(quán)重，那么最后面的規(guī)則會(huì)應(yīng)用
可以理解為后面的規(guī)則覆蓋前面的規(guī)則，直到最后一個(gè)開始設(shè)置樣式
優(yōu)先級(jí)：更高的優(yōu)先級(jí) — 它范圍更小，因此瀏覽器就把它選擇為元素的樣式（垂直疊加優(yōu)先級(jí)，水平的通過順序的覆蓋后再進(jìn)行有限級(jí)比較）
一種常見的做法是給基本元素定義通用樣式，然后給不同的元素創(chuàng)建對(duì)應(yīng)的類
一個(gè)選擇器的優(yōu)先級(jí)可以說是由四個(gè)部分相加 (分量)，可以認(rèn)為是個(gè)十百千 — 四位數(shù)的四個(gè)位數(shù)：

• 1 千位： 如果聲明在style的屬性（內(nèi)聯(lián)樣式）則該位得一分
  這樣的聲明沒有選擇器，所以它得分總是1000
• 2 百位： 選擇器中包含ID選擇器則該位得一分
• 3 十位： 選擇器中包含類選擇器(class)、屬性選擇器(img[src])或者偽類(::)則該位得一分
  4 個(gè)位：選擇器中包含元素(標(biāo)簽)、偽元素(:)選擇器則該位得一分
  注: 通用選擇器 ()，組合符 (+, >, ~, ' ')，和否定偽類 (:not) 不會(huì)影響優(yōu)先級(jí)
• 警告: 在進(jìn)行計(jì)算時(shí)不允許進(jìn)行進(jìn)位，例如，20 個(gè)類選擇器僅僅意味著 20 個(gè)十位，而不能視為兩個(gè)百位，也就是說，無(wú)論多少個(gè)類選擇器的權(quán)重疊加，都不會(huì)超過一個(gè) ID 選擇器**
  有一個(gè)特殊的 CSS 可以用來覆蓋所有上面所有優(yōu)先級(jí)計(jì)算，不過需要很小心的使用 — !important
  用于修改特定屬性的值， 能夠覆蓋普通規(guī)則的層疊
  覆蓋 !important 唯一的辦法就是另一個(gè) !important 具有 相同優(yōu)先級(jí) 而且順序靠后，或者更高優(yōu)先級(jí)
  不得不使用它：不能編輯核心的CSS模塊，不能用任何其他方式覆蓋，又真的想要覆蓋一個(gè)樣式時(shí)

相互沖突的聲明將按以下順序適用，后一種聲明將覆蓋前一種聲明：
用戶代理樣式表中的聲明(例如，瀏覽器的默認(rèn)樣式，在沒有設(shè)置其他樣式時(shí)使用)
用戶樣式表中的常規(guī)聲明(由用戶設(shè)置的自定義樣式)
作者樣式表中的常規(guī)聲明(這些是我們web開發(fā)人員設(shè)置的樣式)
作者樣式表中的!important聲明
用戶樣式表中的!important 聲明

4.選擇器

多個(gè)使用相同樣式的CSS選擇器，那么這些單獨(dú)的選擇器可以被混編為一個(gè)“選擇器列表”
使用選擇器列表時(shí)，如果任何一個(gè)選擇器無(wú)效 (存在語(yǔ)法錯(cuò)誤)，那么整條規(guī)則都會(huì)被忽略
類別：類型/標(biāo)簽、類、ID、標(biāo)簽屬性、偽類、偽元素、運(yùn)算符（通配符，后代選擇器，子代選擇器，相鄰兄弟選擇器，通配兄弟選擇器）

5.盒模型

（1）塊級(jí)盒子

• 盒子會(huì)在內(nèi)聯(lián)的方向上擴(kuò)展并占據(jù)父容器在該方向上的所有可用空間，在絕大數(shù)情況下意味著盒子會(huì)和父容器一樣寬
• 每個(gè)盒子都會(huì)換行
• width和 height屬性可以發(fā)揮作用
• 內(nèi)邊距（padding）, 外邊距（margin） 和 邊框（border） 會(huì)將其他元素從當(dāng)前盒子周圍“推開”
  eg：標(biāo)題(<h1>等)和段落(<p>)

（2）內(nèi)聯(lián)盒子

• 盒子不會(huì)產(chǎn)生換行
• width和 height屬性將不起作用
• 垂直方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用但是不會(huì)把其他處于 inline 狀態(tài)的盒子推開
• 水平方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用且會(huì)把其他處于 inline 狀態(tài)的盒子推開
  eg：<a> 元素、 <span>、 <em> 以及 <strong>

CSS中組成一個(gè)塊級(jí)盒子需要:

• Content box: 這個(gè)區(qū)域是用來顯示內(nèi)容，大小可以通過設(shè)置 width和 height
• Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域； 大小通過 padding相關(guān)屬性設(shè)置
• Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距
  大小通過 border 相關(guān)屬性設(shè)置
• Margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域
  大小通過 margin 相關(guān)屬性設(shè)置

（1）標(biāo)準(zhǔn)盒模型

在標(biāo)準(zhǔn)模型中，如果給盒設(shè)置 width 和 height，實(shí)際設(shè)置的是 content box
padding 和 border 再加上設(shè)置的寬高一起決定整個(gè)盒子的大小
注意： margin 不計(jì)入實(shí)際大小 —— 當(dāng)然，它會(huì)影響盒子在頁(yè)面所占空間，但是影響的是盒子外部空間
盒子的范圍到邊框?yàn)橹?—— 不會(huì)延伸到margin

（2）替代（IE）盒模型

盒子的大小還要加上邊框和內(nèi)邊距

默認(rèn)瀏覽器會(huì)使用標(biāo)準(zhǔn)模型
如果需要使用替代模型，可通過為其設(shè)置 box-sizing:border-box 來實(shí)現(xiàn)
一個(gè)有趣的歷史記錄 ——Internet Explorer默認(rèn)使用替代盒模型，沒有可用的機(jī)制來切換
（譯者注：IE8+ 支持使用box-sizing 進(jìn)行切換 ）

1）margin外邊距
外邊距是盒子周圍一圈看不到的空間
它會(huì)把其他元素從盒子旁邊推開
外邊距屬性值可以為正也可以為負(fù)
設(shè)置負(fù)值會(huì)導(dǎo)致和其他內(nèi)容重疊
無(wú)論使用標(biāo)準(zhǔn)模型還是替代模型，外邊距總是在計(jì)算可見部分后額外添加
外邊距折疊：有兩個(gè)外邊距相接的元素，這些外邊距將合并為一個(gè)外邊距，即最大的單個(gè)外邊距的大小

2）border 邊框
標(biāo)準(zhǔn)的盒模型，邊框的大小將添加到框的寬度和高度
替代盒模型，那么邊框的大小會(huì)使內(nèi)容框更小，因?yàn)樗鼤?huì)占用一些可用的寬度和高度

3）padding 內(nèi)邊距
內(nèi)邊距位于邊框和內(nèi)容區(qū)域之間
與外邊距不同，不能有負(fù)數(shù)量的內(nèi)邊距，所以值必須是0或正的值
應(yīng)用于元素的任何背景都將顯示在內(nèi)邊距后面，內(nèi)邊距通常用于將內(nèi)容推離邊框
使用<span>，并對(duì)其應(yīng)用了寬度、高度、邊距、邊框和內(nèi)邊距
寬度和高度被忽略了
外邊距、內(nèi)邊距和邊框是生效的，但它們不會(huì)改變其他內(nèi)容與內(nèi)聯(lián)盒子的關(guān)系，因此內(nèi)邊距和邊框會(huì)與段落中的其他單詞重疊
一個(gè)元素使用 display: inline-block，實(shí)現(xiàn)我們需要的塊級(jí)的部分效果：
設(shè)置width 和height 屬性會(huì)生效
padding, margin, 以及border 會(huì)推開其他元素
但是，它不會(huì)跳轉(zhuǎn)到新行，如果顯式添加width 和height 屬性，它只會(huì)變得比其內(nèi)容更大

6.背景和邊框

（1）背景

背景圖片應(yīng)該只是純粹的裝飾；任何重要的內(nèi)容都應(yīng)該是HTML頁(yè)面的一部分，而不是包含在背景中
background-color
background-image
no-repeat — 不重復(fù)
repeat-x —水平重復(fù)
repeat-y —垂直重復(fù)
repeat — 在兩個(gè)方向重復(fù)

當(dāng)漸變用于背景時(shí)，也可以使用像圖像一樣的 background-image 屬性設(shè)置
background-size

auto —圖片顯示本身大小，與盒子大小無(wú)關(guān)
cover —瀏覽器將使圖像足夠大，使它完全覆蓋了盒子區(qū)，同時(shí)仍然保持其高寬比
在這種情況下，有些圖像可能會(huì)跳出盒子外
contain — 瀏覽器將使圖像的大小適合盒子內(nèi)
在這種情況下，如果圖像的長(zhǎng)寬比與盒子的長(zhǎng)寬比不同，則可能在圖像的任何一邊或頂部和底部出現(xiàn)間隙

background-position
默認(rèn)的背景位置值是(0,0)
background-position是background-position-x和background-position-y的簡(jiǎn)寫，它們?cè)试S分別設(shè)置不同的坐標(biāo)軸的值
也可以有多個(gè)背景圖像——在單個(gè)屬性值中指定多個(gè)background-image值，用逗號(hào)分隔每個(gè)值

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

background-attachment
scroll: 使元素的背景在頁(yè)面滾動(dòng)時(shí)滾動(dòng)
如果滾動(dòng)了元素內(nèi)容，則背景不會(huì)移動(dòng)
實(shí)際上，背景被固定在頁(yè)面的相同位置，所以它會(huì)隨著頁(yè)面的滾動(dòng)而滾動(dòng)
fixed: 使元素的背景固定在視圖端口上，這樣當(dāng)頁(yè)面或元素內(nèi)容滾動(dòng)時(shí)，它就不會(huì)滾動(dòng)
它將始終保持在屏幕上相同的位置
local: 這個(gè)值是后來添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因?yàn)闈L動(dòng)值相當(dāng)混亂，在很多情況下并不能真正實(shí)現(xiàn)想要的功能
局部值將背景固定在設(shè)置的元素上，因此當(dāng)滾動(dòng)元素時(shí)，背景也隨之滾動(dòng)

（2）邊框

border(border-top/right/bottom/left-width/style/color)
border-radius圓角(border-top-right-radius)

7.書寫模式

writing-mode的三個(gè)值分別是：

• horizontal-tb: 塊流向從上至下
  對(duì)應(yīng)的文本方向是橫向的
• vertical-rl: 塊流向從右向左
  對(duì)應(yīng)的文本方向是縱向的
• vertical-lr: 塊流向從左向右
  對(duì)應(yīng)的文本方向是縱向的
  橫向書寫模式下，映射到 width 的屬性被稱作內(nèi)聯(lián)尺寸inline-size——內(nèi)聯(lián)維度的尺寸
  而映射height的屬性被稱為塊級(jí)尺寸 block-size，這是塊級(jí)維度的尺寸
  margin-top 屬性的映射是 margin-block-start——總是指向塊級(jí)維度開始處的邊距
  padding-left 屬性映射到 padding-inline-start，這是應(yīng)用到內(nèi)聯(lián)開始方向（這是該書寫模式文本開始的地方）上的內(nèi)邊距
  border-bottom 屬性映射到的是 border-block-end，也就是塊級(jí)維度結(jié)尾處的邊框

一些屬性的取值是一些物理值（如top、right、bottom和left）
這些值同樣擁有邏輯值映射（block-start、inline-end、block-end和inline-start）
float的邏輯值暫時(shí)只有Firefox和Firefox for Android支持，上面的例子可能無(wú)法生效

8.溢出的內(nèi)容

CSS會(huì)盡力不讓溢出的內(nèi)容不可見，因?yàn)檫@會(huì)造成數(shù)據(jù)損失

（1）overflow

默認(rèn)值：visible，內(nèi)容溢出的時(shí)候，可以看到它們
hidden隱藏掉溢出
scroll瀏覽器總會(huì)顯示滾動(dòng)條，即使沒有足夠多引起溢出的內(nèi)容，避免滾動(dòng)條在內(nèi)容變化的時(shí)候出現(xiàn)和消失
auto滾動(dòng)條在有比盒子所能裝下更多的內(nèi)容的時(shí)候才顯示

！?。。?）塊級(jí)排版上下文（Block Formatting Context，BFC）

諸如scroll或者auto的時(shí)候，就建立了一個(gè)塊級(jí)排版上下文

9.css的值與單位

絕對(duì)長(zhǎng)度單位：cm，mm，Q（四分之一毫米），in，pc，pt，px，大多數(shù)在用于打印時(shí)比用于屏幕輸出時(shí)更有用
相對(duì)長(zhǎng)度單位：em，ex（字符x的高度），ch，rem，lh，vw，vh，vmin，vmax

概括地說，在排版屬性中 em 單位的意思是“父元素的字體大小”
帶有ems類的<ul>內(nèi)的<li>元素從它們的父元素中獲取大小因此，每一個(gè)連續(xù)的嵌套級(jí)別都會(huì)逐漸變大，因?yàn)槊總€(gè)嵌套的字體大小都被設(shè)置為1.3em—是其父嵌套字體大小的1.3倍
概括地說，rem單位的意思是“根元素的字體大小”
“根em”的rem標(biāo)準(zhǔn)
<ul>內(nèi)的<li>元素和一個(gè)rems類從根元素(<html>)中獲取它們的大小
這意味著每一個(gè)連續(xù)的嵌套層都不會(huì)不斷變大
將元素的字體大小設(shè)置為百分比，那么它將是元素父元素字體大小的百分比
如果使用百分比作為寬度值，那么它將是父值寬度的百分比
HSL

色調(diào)： 顏色的底色
這個(gè)值在0和360之間，表示色輪周圍的角度
飽和度： 顏色有多飽和？ 它的值為0 - 100%，其中0為無(wú)顏色(它將顯示為灰色陰影)，100%為全色飽和度
亮度：顏色有多亮？ 它從0 - 100%中獲取一個(gè)值，其中0表示沒有光(它將完全顯示為黑色)，100%表示完全亮(它將完全顯示為白色)

函數(shù)：rgb()、hsl()、url()、calc()

10.調(diào)整大小

就是元素的固有尺寸 — 由其所包含的內(nèi)容決定
給元素指定尺寸（然后其內(nèi)容需要適合該尺寸）時(shí)，我們將其稱為外部尺寸
一個(gè)空的<div>是沒有尺寸的，沒有高度，或者說高度為0，因?yàn)閮?nèi)部沒有內(nèi)容
對(duì)于一個(gè)處于另外一個(gè)容器當(dāng)中的盒子，如果給予了子盒子一個(gè)百分?jǐn)?shù)作為寬度，那么它指的是父容器寬度的百分?jǐn)?shù)
如果我們的<div>沒有被指定百分?jǐn)?shù)的值，那么它會(huì)占據(jù)100%的可用空間，因?yàn)樗菈K級(jí)別的元素
給了它一個(gè)百分?jǐn)?shù)作為寬度，那么這就是它原來情況下可以占據(jù)空間的百分?jǐn)?shù)
max-width的常見用法為，在沒有足夠空間以原有寬度展示圖像時(shí)，讓圖像縮小，同時(shí)確保它們不會(huì)比這一寬度大
圖像可以變得比原始尺寸更小，但是不會(huì)大于原始尺寸的100%

11.圖像、媒體、表單元素

圖像和視頻被描述為替換元素，意味著CSS不能影響這些元素的內(nèi)部布局-僅影響它們?cè)陧?yè)面上于其他元素中的位置
用object-fit時(shí)，替換元素可以以多種方式被調(diào)整到合乎盒子的大小
object-fit取值：

• contain被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比
  整個(gè)對(duì)象在填充盒子的同時(shí)保留其長(zhǎng)寬比，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“黑邊”
• cover被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框
  如果對(duì)象的寬高比與內(nèi)容框不相匹配，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框
• fill被替換的內(nèi)容正好填充元素的內(nèi)容框
  整個(gè)對(duì)象將完全填充此框
  如果對(duì)象的寬高比與內(nèi)容框不相匹配，那么該對(duì)象將被拉伸以適應(yīng)內(nèi)容框
• none被替換的內(nèi)容將保持其原有的尺寸
• scale-down內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰(shuí)得到的對(duì)象尺寸會(huì)更小一些
  布局中的替換元素：為了強(qiáng)制圖像拉伸，以充滿其所在的網(wǎng)格單元，必須仿照下面做點(diǎn)事情：

img {
  width: 100%;
  height: 100%;
}

在一些瀏覽器中，表單元素默認(rèn)不會(huì)繼承字體樣式，因此如果想要確保表單填入?yún)^(qū)域使用body中或者一個(gè)父元素中定義的字體，需要向CSS中加入這條規(guī)則
為了保證統(tǒng)一，將所有元素的內(nèi)外邊距均設(shè)為0是個(gè)好主意，然后在單獨(dú)進(jìn)行樣式化控制的時(shí)候?qū)⑦@些加回來

button,
input,
select,
textarea {
box-sizing: border-box;//內(nèi)外邊距均設(shè)為0
  font-family : inherit;
  font-size : 100%;
} 

除了上面提到的規(guī)則以外，也應(yīng)該在<textarea>上設(shè)置overflow: auto 以避免IE在不需要滾動(dòng)條的時(shí)候顯示滾動(dòng)條

textarea {
  overflow: auto;
}

統(tǒng)一的重置：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
} 

12.表格

• 表格標(biāo)記盡可能簡(jiǎn)單，并且保持靈活性，例如使用百分比，這樣設(shè)計(jì)就更有響應(yīng)性
• 使用table-layout:fixed 創(chuàng)建更可控的表布局，可以通過在標(biāo)題width中設(shè)置width來輕松設(shè)置列的寬度
• 使用border-collapse:collapse 使表元素邊框合并，生成一個(gè)更整潔、更易于控制的外觀
• 使用thead, tbody和tfoot將表格分割成邏輯塊，并提供額外的應(yīng)用CSS的地方，因此如果需要的話，可以更容易地將樣式層疊在一起
• 使用斑馬線來讓其他行更容易閱讀
• 使用text-align直線對(duì)齊<th>和td>文本，使內(nèi)容更整潔、更易于跟隨