摘要：語法規則注釋層疊優先級繼承值塊格式化上下文盒模型層疊上下文可替換元素外邊距合并包含塊視覺格式化模型布局模式語法屬性值聲明聲明塊規則規則集規則規則一個語句定義樣式表使用的字符集告訴引擎引入一個外部樣式表嵌套規則如果滿足媒介查詢的條件則條件規則

1、CSS語法

2、@規則

3、注釋

4、層疊

5、優先級

6、繼承

7、值

8、塊格式化上下文

9、盒模型

10、層疊上下文

11、可替換元素

12、外邊距合并

13、包含塊

14、視覺格式化模型

15、布局模式

1、CSS語法

屬性：property

值：value

CSS聲明：property:value;

CSS聲明塊：{ property:value; }

CSS規則（CSS規則集）：element{ property:value; }

2、@規則

@規則：一個CSS語句

　　@charset：定義樣式表使用的字符集

　　@import：告訴CSS引擎引入一個外部樣式表

　　嵌套@規則：

　　　　@media：如果滿足媒介查詢的條件則條件規則組里的規則生效

　　　　@font-face：描述將下載的外部的字體

　　　　@keyframes：描述CSS動畫的中間步驟

@charset "utf-8"; /* @charset只能是樣式表中的第一個元素，且前面不能有任何字符，如果有多個@charset被聲明，只有第一個有效 */

@import url("global.css"); /* @import規則必須先于所有其他類型的規則，@charset規則除外 */
@import url(global.css);
@import "global.css";
/* IE6+ */ @import url(global.css);
/* IE8+ */ @import url(global.css) screen;
/* IE9+ */ @import url(global.css) screen and (max-width:1024px);

/* IE9+ */ @media screen and (max-width:1024px){  }
/* IE9+ */ 

@font-face {
    font-family: iconfont;
    src: url(iconfont.eot); /* IE9 */
    src: url(iconfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
    url(iconfont.woff) format(woff), /* Chrome、Firefox */
    url(iconfont.ttf) format(truetype), /* Chrome、Firefox、Opera、Safari、Android、IOS 4.2+ */
    url(iconfont.svg#iconfont) format(svg); /* IOS 4.1- */
}

@keyframes animate { /* IE10+ */
    from {
        width: 0;
        margin-left: 0;
    }
    to {
        width: 100%;
        margin-left: 100%;
    }
}

3、注釋

/* 單行注釋 */
/*
    多行注釋
    注釋無法嵌套，也就是說，一旦遇到第一個*/記號，就一定會結束注釋
 */

4、層疊

層疊算法決定如何找出要應用到每個文檔元素的每個屬性上的值，層疊算法是先于優先級算法的

1　　用戶代理

2　　用戶代理　　!important

3　　用戶

4　　頁面作者

5　　CSS動畫

6　　頁面作者　　!important

7　　用戶　　　　!important

5、優先級

通配選擇器（*）、關系選擇符（+、>、~、 ）、否定偽類:not()對優先級沒有影響，但是在:not()內部聲明的選擇器會影響優先級

1　　元素選擇器、偽元素

2　　類選擇器、屬性選擇器、偽類

3　　ID選擇器

4　　內聯樣式

5　　!important

6、繼承

當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值，只有文檔根元素取該屬性的概述中給定的初始值

當元素的一個非繼承屬性沒有指定值時，則取屬性的初始值

7、值

初始值：默認值

指定值：賦值、繼承值、初始值

計算值：通過指定值計算出來

　　　　計算值所需要的計算通常包括將相對值轉換成絕對值（em單位或百分比）

　　　　對于有些屬性，這些元素的百分比與需要布局確定后才能知道的值有關，它們的百分比值會轉換成百分比的計算值

　　　?。╰op、width、min-width、margin、padding、background-position、text-indent等）

使用值（應用值）：計算值，或計算布局（尺寸比如auto或百分數換算為像素值）

實際值：應用值的近似值，例如，一個用戶代理可能只能渲染一個整數像素值的邊框（實際值）

解析值：對于大多數屬性，它是計算值，但對于一些舊屬性（包括寬度和高度），它是使用值

/*
            width:auto; width:1920px; border-width:1.01px; font-size:2em;
    初始值：auto        auto          medium               medium
    指定值：auto        1920px        1.01px               2em
    計算值：auto        1920px        1.01px               32px
    使用值：1920px      1920px        1.01px               32px
    實際值：1920px      1920px        1px                  32px
    解析值：1920px      1920px        1.01px               32px
*/

8、塊格式化上下文

布局過程中生成塊級盒子的區域，浮動元素與其他元素的交互限定區域

浮動定位和清除浮動時只會應用于同一個BFC內的元素，浮動不會影響其它BFC中元素的布局，外邊距折疊也只會發生在屬于同一BFC的塊級元素之間

1　　根元素或包含根元素的元素

2　　浮動元素

3　　絕對定位元素

4　　行內塊元素

5　　表格單元格（元素的display為table-cell）

6　　表格標題（元素的display為table-caption）

7　　匿名表格單元格元素（元素的display為table、table-row、table-row-group、table-header-group、table-footer-group、inline-table）

8　　overflow值不為visible的塊元素

9　　彈性元素（display為flex或inline-flex元素的直接子元素）

10　　網格元素（display為grid或inline-grid元素的直接子元素）

9、盒模型

當對一個文檔進行布局時，瀏覽器渲染引擎會根據CSS-Box模型（CSS Basic Box model）將所有元素表示為一個矩形盒子（box），CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸等）

對于非替換的行內元素來說，盡管內容周圍存在內邊距與邊框，但其占用空間（行高）由line-height屬性決定

1　　內容區域content area

2　　內邊距區域padding area

3　　邊框區域border area

4　　外邊距區域margin area

10、層疊上下文

層疊上下文是HTML元素的三維概念

1　　根元素

2　　z-index值不為auto的絕對/相對定位

3　　一個z-index值不為auto的flex項目，即：父元素display:flex|inline-flex

4　　opacity屬性值小于1的元素

5　　transform屬性值不為none的元素

6　　position:fixed

11、可替換元素

可替換元素的展現不是由CSS來控制的，這些元素是一類外觀渲染獨立于CSS的外部對象

1　　典型的可替換元素有img、object、video和表單元素，如textarea、input

2　　某些元素只在一些特殊情況下表現為可替換元素，例如audio和canvas

3　　通過CSS content屬性來插入的對象被稱作匿名可替換元素

4　　一部分可替換元素，本身具有尺寸和基線（baseline），會被像vertical-align之類的一些CSS屬性用到

12、外邊距合并

塊級元素的上外邊距和下外邊距有時會合并（或折疊）為一個外邊距，其大小取其中的最大者，這種行為稱為外邊距折疊（外邊距合并）

浮動元素和絕對定位元素的外邊距不會折疊（因為這里觸發了BFC，overflow值不為visible的塊元素除外，其只會與子元素發生折疊）

如果參與折疊的外邊距中包含負值，折疊后的外邊距的值為最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和

如果所有參與折疊的外邊距都為負，折疊后的外邊距的值為最小的負邊距的值

1　　相鄰元素之間

2　　父元素與其第一個或最后一個子元素之間：如果在父元素與其第一個子元素之間不存在邊框、內邊距、行內內容，也沒有創建塊格式化上下文、或者清除浮動將兩者的margin-top分開，或者在父元素與其最后一個子元素之間不存在邊框、內邊距、行內內容、height、min-height、max-height將兩者的margin-bottom分開，那么這兩對外邊距之間會產生折疊，此時子元素的外邊距會溢出到父元素的外面

3　　空的塊級元素：如果一個塊級元素中不包含任何內容，并且在其margin-top與margin-bottom之間沒有邊框、內邊距、行內內容、height、min-height將兩者分開，則該元素的上下外邊距會折疊

13、包含塊

元素的尺寸和位置受其包含塊的影響，大多數情況下，包含塊就是這個元素最近的祖先塊元素的內容區

計算height、top、bottom中的百分值，是通過包含塊的height的值，如果包含塊的height值根據它的內容變化，且包含塊的position屬性的值為relative或static，那么，這些值的計算值為0

計算width、left、right、padding、margin這些屬性由包含塊的width屬性的值來計算它的百分值

1　　如果position屬性為static或relative，包含塊就是由它的最近的祖先塊元素或格式化上下文的內容區的邊緣組成的

2　　如果position屬性為absolute，包含塊就是由它的最近的position的值不是static的祖先元素的內邊距區的邊緣組成

3　　如果position屬性為fixed，包含塊就是由viewport組成的

4　　如果position屬性為absolute或fixed，包含塊也可能是由滿足以下條件的最近祖先元素的內邊距區的邊緣組成的：transform屬性值不為none的元素

5　　根元素所在的包含塊是一個被稱為初始包含塊的矩形

14、視覺格式化模型

CSS視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規則，根據CSS盒子模型將文檔中的元素轉換為一個個盒子

1　　塊級元素：display為block、list-item、table

2　　塊級盒子：由塊級元素生成，一個塊級元素至少會生成一個塊級盒子，但也有可能生成多個（列表項元素）

3　　塊容器盒子：有些塊容器盒子也不是塊級盒子（非替換行內塊和非替換表格單元格）

4　　塊盒子：如果一個塊級盒子同時也是一個塊容器盒子，則稱其為塊盒子（表格和可替換元素之外的塊級盒子）

5　　匿名塊盒子：CSS選擇器不能作用于匿名盒子，所以它不能被樣式表賦予樣式，也就是說，此時所有可繼承的CSS屬性值都為inherit，而所有不可繼承的CSS屬性值都為initial

6　　行內級元素：display為inline、inline-block、inline-table

7　　行內級盒子：由行內級元素生成，分為行內盒子和原子行內級盒子

8　　行內盒子：display:inline的非替換盒子

9　　原子行內級盒子：display:inline的可替換盒子或display為inline-block、inline-table生成的盒子

15、布局模式

CSS布局模式，有時簡稱為布局，是一種基于盒子與其兄弟和祖輩盒子的交互方式來確定盒子的位置和大小的算法

1　　塊布局：用來布置文件

2　　行內布局：用來布置文本

3　　表格布局：用來布置表格

4　　定位布局：用來對那些與其他元素無交互的定位元素進行布置

5　　彈性盒子布局：用來布置那些可以順利調整大小的復雜頁面

6　　網格布局：用來布置那些與一個固定網格相關的元素