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

1、CSS語(yǔ)法

2、@規(guī)則

3、注釋

4、層疊

5、優(yōu)先級(jí)

6、繼承

7、值

8、塊格式化上下文

9、盒模型

10、層疊上下文

11、可替換元素

12、外邊距合并

13、包含塊

14、視覺(jué)格式化模型

15、布局模式

1、CSS語(yǔ)法

屬性：property

值：value

CSS聲明：property:value;

CSS聲明塊：{ property:value; }

CSS規(guī)則（CSS規(guī)則集）：element{ property:value; }

2、@規(guī)則

@規(guī)則：一個(gè)CSS語(yǔ)句

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

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

　　嵌套@規(guī)則：

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

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

　　　　@keyframes：描述CSS動(dòng)畫的中間步驟

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

@import url("global.css"); /* @import規(guī)則必須先于所有其他類型的規(guī)則，@charset規(guī)則除外 */
@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、注釋

/* 單行注釋 */
/*
    多行注釋
    注釋無(wú)法嵌套，也就是說(shuō)，一旦遇到第一個(gè)*/記號(hào)，就一定會(huì)結(jié)束注釋
 */

4、層疊

層疊算法決定如何找出要應(yīng)用到每個(gè)文檔元素的每個(gè)屬性上的值，層疊算法是先于優(yōu)先級(jí)算法的

1　　用戶代理

2　　用戶代理　　!important

3　　用戶

4　　頁(yè)面作者

5　　CSS動(dòng)畫

6　　頁(yè)面作者　　!important

7　　用戶　　　　!important

5、優(yōu)先級(jí)

通配選擇器（*）、關(guān)系選擇符（+、>、~、 ）、否定偽類:not()對(duì)優(yōu)先級(jí)沒(méi)有影響，但是在:not()內(nèi)部聲明的選擇器會(huì)影響優(yōu)先級(jí)

1　　元素選擇器、偽元素

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

3　　ID選擇器

4　　內(nèi)聯(lián)樣式

5　　!important

6、繼承

當(dāng)元素的一個(gè)繼承屬性沒(méi)有指定值時(shí)，則取父元素的同屬性的計(jì)算值，只有文檔根元素取該屬性的概述中給定的初始值

當(dāng)元素的一個(gè)非繼承屬性沒(méi)有指定值時(shí)，則取屬性的初始值

7、值

初始值：默認(rèn)值

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

計(jì)算值：通過(guò)指定值計(jì)算出來(lái)

　　　　計(jì)算值所需要的計(jì)算通常包括將相對(duì)值轉(zhuǎn)換成絕對(duì)值（em單位或百分比）

　　　　對(duì)于有些屬性，這些元素的百分比與需要布局確定后才能知道的值有關(guān)，它們的百分比值會(huì)轉(zhuǎn)換成百分比的計(jì)算值

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

使用值（應(yīng)用值）：計(jì)算值，或計(jì)算布局（尺寸比如auto或百分?jǐn)?shù)換算為像素值）

實(shí)際值：應(yīng)用值的近似值，例如，一個(gè)用戶代理可能只能渲染一個(gè)整數(shù)像素值的邊框（實(shí)際值）

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

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

8、塊格式化上下文

布局過(guò)程中生成塊級(jí)盒子的區(qū)域，浮動(dòng)元素與其他元素的交互限定區(qū)域

浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素，浮動(dòng)不會(huì)影響其它BFC中元素的布局，外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間

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

2　　浮動(dòng)元素

3　　絕對(duì)定位元素

4　　行內(nèi)塊元素

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

6　　表格標(biāo)題（元素的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　　網(wǎng)格元素（display為grid或inline-grid元素的直接子元素）

9、盒模型

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

對(duì)于非替換的行內(nèi)元素來(lái)說(shuō)，盡管內(nèi)容周圍存在內(nèi)邊距與邊框，但其占用空間（行高）由line-height屬性決定

1　　內(nèi)容區(qū)域content area

2　　內(nèi)邊距區(qū)域padding area

3　　邊框區(qū)域border area

4　　外邊距區(qū)域margin area

10、層疊上下文

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

1　　根元素

2　　z-index值不為auto的絕對(duì)/相對(duì)定位

3　　一個(gè)z-index值不為auto的flex項(xiàng)目，即：父元素display:flex|inline-flex

4　　opacity屬性值小于1的元素

5　　transform屬性值不為none的元素

6　　position:fixed

11、可替換元素

可替換元素的展現(xiàn)不是由CSS來(lái)控制的，這些元素是一類外觀渲染獨(dú)立于CSS的外部對(duì)象

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

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

3　　通過(guò)CSS content屬性來(lái)插入的對(duì)象被稱作匿名可替換元素

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

12、外邊距合并

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

浮動(dòng)元素和絕對(duì)定位元素的外邊距不會(huì)折疊（因?yàn)檫@里觸發(fā)了BFC，overflow值不為visible的塊元素除外，其只會(huì)與子元素發(fā)生折疊）

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

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

1　　相鄰元素之間

2　　父元素與其第一個(gè)或最后一個(gè)子元素之間：如果在父元素與其第一個(gè)子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容，也沒(méi)有創(chuàng)建塊格式化上下文、或者清除浮動(dòng)將兩者的margin-top分開，或者在父元素與其最后一個(gè)子元素之間不存在邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height、max-height將兩者的margin-bottom分開，那么這兩對(duì)外邊距之間會(huì)產(chǎn)生折疊，此時(shí)子元素的外邊距會(huì)溢出到父元素的外面

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

13、包含塊

元素的尺寸和位置受其包含塊的影響，大多數(shù)情況下，包含塊就是這個(gè)元素最近的祖先塊元素的內(nèi)容區(qū)

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

計(jì)算width、left、right、padding、margin這些屬性由包含塊的width屬性的值來(lái)計(jì)算它的百分值

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

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

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

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

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

14、視覺(jué)格式化模型

CSS視覺(jué)格式化模型是用來(lái)處理和在視覺(jué)媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則，根據(jù)CSS盒子模型將文檔中的元素轉(zhuǎn)換為一個(gè)個(gè)盒子

1　　塊級(jí)元素：display為block、list-item、table

2　　塊級(jí)盒子：由塊級(jí)元素生成，一個(gè)塊級(jí)元素至少會(huì)生成一個(gè)塊級(jí)盒子，但也有可能生成多個(gè)（列表項(xiàng)元素）

3　　塊容器盒子：有些塊容器盒子也不是塊級(jí)盒子（非替換行內(nèi)塊和非替換表格單元格）

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

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

6　　行內(nèi)級(jí)元素：display為inline、inline-block、inline-table

7　　行內(nèi)級(jí)盒子：由行內(nèi)級(jí)元素生成，分為行內(nèi)盒子和原子行內(nèi)級(jí)盒子

8　　行內(nèi)盒子：display:inline的非替換盒子

9　　原子行內(nèi)級(jí)盒子：display:inline的可替換盒子或display為inline-block、inline-table生成的盒子

15、布局模式

CSS布局模式，有時(shí)簡(jiǎn)稱為布局，是一種基于盒子與其兄弟和祖輩盒子的交互方式來(lái)確定盒子的位置和大小的算法

1　　塊布局：用來(lái)布置文件

2　　行內(nèi)布局：用來(lái)布置文本

3　　表格布局：用來(lái)布置表格

4　　定位布局：用來(lái)對(duì)那些與其他元素?zé)o交互的定位元素進(jìn)行布置

5　　彈性盒子布局：用來(lái)布置那些可以順利調(diào)整大小的復(fù)雜頁(yè)面

6　　網(wǎng)格布局：用來(lái)布置那些與一個(gè)固定網(wǎng)格相關(guān)的元素