CSS基礎知識點整理

忙忙碌碌的，沒空整理。最近遇到些CSS相關問題，以前只是印象中要這麼用，不知道之因此然，今天就大概的整理下（會比較零散）。

盒子模型

W3C標準/IE盒子模型

標準盒子模型：寬度=內容寬度（content）+ border + padding + margin
IE盒子模型：寬度=內容寬度（content + border + padding）+ margin

box-sizing

用來控制元素的盒子模型的解析模式。默認爲content-box
content-box: W3C標準盒子模型，設置元素的width/height屬性是指content部分的寬/高。
border-box: IE傳統盒子模型，設置元素的width/height屬性是指(content + border + paddubg)部分的寬/高

塊級/行內元素及其區別

經常使用塊級元素

div/table/h1-h6/p/form/ol等，以及html5新增的section/canvas/audio/video等等。
塊級元素：

1. 會另起一行
2. 能夠設置width、margin、border、padding、width屬性
3. 默認寬度是容器的100%

行內元素

a/input/textarea/button/label/select等等
行內元素：

1. 和其餘元素在同一行
2. 寬度/高度是內容的寬度/高度
3. 能夠設置margin-left和margin-right屬性，沒法設置margin-top和margin-bottom屬性
4. border和padding能夠設置，可是border-top和padding-top到頁面頂部後就再也不增長

BFC（塊級格式化上下文: block formatting context）

BFC規定了內部的Block Box如何佈局.。可參考理解CSS的BFC
特徵:

1. 內部的Box會在垂直方向上一個接一個放置
2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個元素的margin box 的左邊，與包含塊border box的左邊相接觸
4. BFC的區域不會與float box重疊
5. BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素
6. 計算BFC的高度時，浮動元素也會參與計算

觸發BFC條件：

1. float的值不爲none
2. position的值不爲static或者relative
3. display的值爲inline-block、table-cell、table-caption、inline-flex或者flex其中之一
4. overflow的值不爲visiabl

::before和:before中雙冒號和單冒號區別

1. 單冒號:用於CSS3中的僞類，雙冒號::用於CSS3中的僞元素
2. ::brfore就是一個子元素的存在，定義在元素主體內容以前的一個僞元素，並不存在於DOM中。

:before 和 :after 這兩個僞元素，是在CSS2.1裏新出現的。起初，僞元素的前綴使用的是單冒號語法，但隨着Web的進化，在CSS3的規範裏，僞元素的語法被修改爲使用雙冒號，成爲::before ::after

常見兼容性問題

• 漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

div {
        background-color: #ffffff; /* 全部識別 */
        background-color: #fbfbfb; /* IE六、七、8識別 */
        +background-color: #fcfcfc; /* IE7識別 */
        _background-color: #fdfdfd; /* IE6識別 */
    }

• Chrome支持小於12px 的文字

p { font-size: 10px; -webkit-transform: scale(0.8); } //0.8是縮放比例

• position: flxed在android下無效

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

未完待續~~