CSS概念【記錄】

 

一、CSS語法

二、@規則

三、註釋

四、層疊

五、優先級

六、繼承

七、值

八、塊格式化上下文

九、盒模型

十、層疊上下文

十一、可替換元素

十二、外邊距合併

1三、包含塊

1四、視覺格式化模型

1五、佈局模式

 

一、CSS語法

屬性：property

值：value

CSS聲明：property:value;

CSS聲明塊：{ property:value; }

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

 

二、@規則

@規則：一個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+ */ <link rel="stylesheet" href="global.css" media="screen and (max-width:1024px)">

@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%;
    }
}

 

三、註釋

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

 

四、層疊

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

1　　用戶代理

2　　用戶代理　　!important

3　　用戶

4　　頁面做者

5　　CSS動畫

6　　頁面做者　　!important

7　　用戶　　　　!important

 

五、優先級

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

1　　元素選擇器、僞元素

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

3　　ID選擇器

4　　內聯樣式

5　　!important

 

六、繼承

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

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

 

七、值

初始值：默認值

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

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

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

　　　　對於有些屬性，這些元素的百分比與須要佈局肯定後才能知道的值有關，它們的百分比值會轉換成百分比的計算值

　　　　（top、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
*/

 

八、塊格式化上下文

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

浮動定位和清除浮動時只會應用於同一個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元素的直接子元素）

 

九、盒模型

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

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

1　　內容區域content area

2　　內邊距區域padding area

3　　邊框區域border area

4　　外邊距區域margin area

 

十、層疊上下文

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

1　　根元素

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

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

4　　opacity屬性值小於1的元素

5　　transform屬性值不爲none的元素

6　　position:fixed

 

十一、可替換元素

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

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

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

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

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

 

十二、外邊距合併

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

浮動元素和絕對定位元素的外邊距不會摺疊（由於這裏觸發了BFC，overflow值不爲visible的塊元素除外，其只會與子元素髮生摺疊）

若是參與摺疊的外邊距中包含負值，摺疊後的外邊距的值爲最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和

若是全部參與摺疊的外邊距都爲負，摺疊後的外邊距的值爲最小的負邊距的值

1　　相鄰元素之間

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

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

 

1三、包含塊

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

計算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　　根元素所在的包含塊是一個被稱爲初始包含塊的矩形

 

1四、視覺格式化模型

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生成的盒子

 

1五、佈局模式

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

1　　塊佈局：用來佈置文件

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

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

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

5　　彈性盒子佈局：用來佈置那些能夠順利調整大小的複雜頁面

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