摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。

360瀏覽器

UC瀏覽器

QQ瀏覽器

搜狗瀏覽器

HyperText Markup Language

使用標簽來描述頁面的內容和結構

指定頁面的使用標準和版本

決定使用哪種渲染模式

Quirks Mode (怪異模式)

Almost standard Mode (標準準模式)

Standard Mode (標準模式)

注意: 如果當我們不指定Doctype時，IE6、IE7會采用怪異模式渲染頁面，IE8以標準模式渲染頁面，firefox11也是以標準模式渲染頁面。

兼容已有內容

避免不必要的復雜性

解決現實問題

優雅降級

尊重事實標準

Doctype、meta

新增語義化標簽

去除純表示性的標簽

WebStorage、canvas、video、audio、拖拽、離線

標簽不區分大小寫、推薦小寫

空標簽可以不閉合

屬性不必引號。推薦雙引號

某些屬性值可以省略，如required、readonly

不指定高寬：原圖大小顯示

指定寬度：按比例縮放到指定寬度

指定高度：按比例縮放到指定高度

指定高寬：強制按照指定高寬顯示

jpg：照片

png：色彩較少時使用，png24可以半透明

gif：無法半透明，可以多幀做動畫

WebP

注意: WebP 的優勢體現在它具有更優的圖像數據壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都非常優秀、穩定和統一。更多...

提升代碼的可讀性、可維護性

搜索引擎的優化（利于SEO）

提升無障礙性

通配選擇器 *

標簽選擇器 p

id選擇器 #id

類選擇器 .class

[attr]只使用屬性名，但沒有確定任何屬性值;

[attr="value"]指定屬性名，并指定了該屬性的屬性值;

[attr~="value"]指定屬性名，并且具有屬性值，此屬性值是一個詞列表以空格隔開，其中詞列表中包含了一個value;

[attr^="value"]指定了屬性名，并且有屬性值，屬性值以value開頭;

[attr$="value"]指定了屬性名，并且有屬性值，而且屬性值以value結尾;

[attr*="value"]指定了屬性名，并且有屬性值，而且屬值中包含value;

[attr|="value"]指定了屬性名，并且屬性值是value或者以“value-”開頭的值;

基于 DOM 之外的信息去（比如根據用戶和網頁的交互狀態）選擇元素。

a:link    { ... }   /* 未訪問過的鏈接 */
a:visited { ... }   /* 已訪問過的鏈接 */
a:hover   { ... }   /* 鼠標移到鏈接上的樣式 */
a:active  { ... }   /* 鼠標在連接上按下時的樣式 */
a:focus   { ... }   /* 獲得焦點時的樣式 */

直接組合

E[foo="bar"]
E.warning
E#myid
#myid.warning
.warning[foo="bar"]

后代組合

/* 后代選擇器 */
  article p {...}
/* 親子選擇器 */
  article > p {...}

相鄰兄弟

input[type="check"] + label {...}

通用兄弟

.active ~ li {...} /* 選擇所有兄弟 */

同時為一組選擇器定義樣式

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

哪條聲明起作用？

找出匹配到的該屬性所有聲明

根據規則來源，優先級從低到高：

瀏覽器預設

用戶設置

網頁樣式

同一來源中，按照特異度排序，越特殊優先級越高

特異度一樣時，按照樣式書寫順序，后面的優先級高


有 !important 時的變化

找出匹配到的該屬性所有聲明

根據規則來源, 優先級從低到高：

瀏覽器預設

用戶設置

網頁樣式

含 !important 的網頁樣式

含 !important 的用戶設置樣式

同一來源中，按照特異度排序，越特殊優先級越高

特異度一樣時，按照樣式書寫順序，后面的優先級高

使用逗號分隔的字體族名稱

初始值由瀏覽器設置決定，可繼承

字體匹配算法

瀏覽器先獲取一個系統字體列表

對于元素中每一個字符，使用 font-family 屬性及其它屬性進行匹配，如果能匹配就暫定該字體

如果步驟2沒有匹配上，選擇下一個可選的 font-family 執行步驟2

如果匹配到一個字體，但是字體中沒有該字符，繼續對下一個可選的 font-family 執行步驟2

如果沒有匹配到字體，使用瀏覽器默認字體。

font-family 使用

英文字體放在中文字體前面

最后總是添加通用字體族

定義文字的大小，可使用px、百分比、em等做單位

取值

絕對值 xx-small | x-small | small | medium | large | x-large | xx-large

相對值 larger | smaller

長度

百分數，相對于父元素計算值

初始值為 medium（由瀏覽器設置決定，一般16px），可繼承

長度單位em

一般是相對于元素 font-size 的計算值的

用在 font-size 屬性上時，是相對于父元素的 font-size 計算值

定義文字以斜體還是正常方式顯示

取值：normal | italic | oblique

初始值為 normal，可繼承

定義文字的粗細程度

取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900

初始值為 normal，可繼承

元素所屬的 line box 所占高度

初始值為normal（具體值由瀏覽器決定），可繼承

取值：<長度> | <數字> | <百分比>

段落文字一般取值1.4～1.8

line-height:26px; 表示行高為26個像素
line-heigth:120%;表示行高為當前字體大小的120%
line-height:2.6em; 表示行高為當前字體大小的2.6倍

帶單位的行高都有繼承性，其子元素繼承的是計算值，如父元素的字體大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子元素改變字體尺寸而改變行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素雖然字體是12，行高還是父元素的行高)
line-height:2.6;表示行高為當前字體大小的2.6倍
不帶單位的行高是直接繼承，而不是計算值，如父元素字體尺寸為14px，行高line-height:2;他的行高為28px;子元素尺寸為12px，不需要再定義行高，他默認的行高為24px。（例如：子元素12px，他的行高是24,不會繼承父元素的28）

定義文本在容器內的對齊方式

取值：left | right | center | justify

初始值由 HTML 的 dir 屬性決定，可繼承

指定字符之間的間距

取值：normal |

初始值為 normal，可繼承

指定單詞之間的間距

取值：normal |

初始值為 normal，可繼承

指定文本縮進

取值：normal | |

初始值為 0，可繼承

定義了文本的一些裝飾效果，比如下劃線、刪除線等

初始值為none，可繼承

其它值：underline | line-through | overline

指定空白符如何處理

取值：normal | nowrap | pre

指定是否允許在單詞中間換行

取值： normal | break-all | keep-all

width的值為百分比時，參考的是父元素盒子的width;
height的值為百分比時，參考的是父元素盒子的height;
padding的值為百分比時，參考的是父元素的width;
margin的值為百分比時，參考的是父元素的width;

會被格式化成塊狀的元素

例如 p、div、section 等

將 display 設置為 block、list-item、table 使元素變為塊級

不會為其內容生成塊級框

讓其內容分布在多行中

display 設置為 inline、inline-block、inline-table 使元素變為行級

margin：行級盒的 margin-top 和 margin-bottom 不會產生效果
padding：行級盒的 padding-top 和 padding-top 不影響行布局

塊級盒子中可以包含多個子塊級盒子

可以包含多個行級盒子

不在行級元素里面的文字，會生成匿名行級盒。比如:

SomeText

塊級盒子中不能同時包含塊級和行級盒子。遇到這種情況時，會生成匿名塊級盒來包含行級盒。比如:

標題
2016-12-12

行級盒子內可以包含行級盒子

行級盒子包含一個塊級盒子時，會被塊級盒子拆成兩個行級盒子，這兩個盒子又分別被匿名塊級盒包含

常規流(Normal Flow)

浮動(Float)

絕對定位(Absolute Positioning)

除根元素、浮動元素和絕對定位元素外，其它元素都在常規流之內(in-flow)

而根元素、 浮動和絕對定位的元素會脫離常規流(out of flow)

常規流中的盒子，屬于塊級格式化上下文或行級格式化上下文

塊級格式化上下文 (Block Formatting Context)

盒子在容器（包含塊）內從上到下一個接一個地放置

兩個兄弟盒之間的豎直距離由 margin 屬性決定

同一個 BFC 內垂直 margin 會合并

盒子的左外邊緣挨著容器（包含塊）的左邊

塊級格式化上下文(BFC) 的特性:

BFC 內的浮動不會影響到BFC外部的元素

BFC 的高度會包含其內的浮動元素

BFC 不會和浮動元素重疊

BFC 可以通過 overflow:hidden 等方法創建


BFC 的創建:

浮動框

絕對定位框

非塊級的塊容器(inline-block)

overflow 屬性非 visible 的塊框


BFC的作用:

清除浮動

防止 margin 折疊

雙欄布局

行級格式化上下文 (Inline Formatting Context)

盒子一個接一個水平放置

盒之間的水平 margin，border和padding 都有效

同一行的盒子所在的矩形區域叫行盒(Line box)

當一個行盒放不下上下文內所有盒子時，會被分到多個垂直堆疊的行盒里

行盒內的水平分布由"text-align"屬性決定

如果一個行級塊無法分割(單詞、inline-block)，該元素會被作為一個整體決定分布在哪一個行盒

浮動元素從常規流中脫離，被漂浮在容器(包含塊)左邊或右邊

浮動盒會一直漂到其外邊緣挨到容器邊緣或另外的浮動盒

浮動元素不會影響其后面的流內塊級盒

但是浮動元素后面的行級盒子會變短以避開浮動元素

static，非定位，默認值

relative，相對定位（相對自己）

absolute，絕對定位，相對非 static 祖先元素定位

fixed，相對于視口絕對定位

relative

在常規流里面布局

相對于自己本應該在的位置進行偏移

使用 top、left、bottom、right 設置偏移長度

流內其它元素當它沒有偏移一樣布局

absolute

脫離正常流

相對于最近的非 static 祖先的 padding box 定位

不會對流內元素布局造成影響

可以有 margin，但不會折疊

fixed

相對于 Viewport 定位

不會隨頁面滾動發生位置變化

z-index 堆疊層次

為定位元素指定其在 z 軸的上下等級
用一個整數表示，數值越大，越靠近用戶
初始值為 auto，可以為負數、0、正數

注意: z-index大的不一定在上面，要考慮到層疊上下文
關于層疊上下文

堆疊上下文的生成

Root 元素

z-index 值不為 auto 的定位元素

設置了某些 CSS3 屬性的元素，比如 opacity、transform、animation 等

繪制順序

在每一個堆疊上下文中，從下到上：

形成該上下文的元素的 border 和 background

z-index 為負值的子堆疊上下文

常規流內的塊級元素非浮動子元素

非定位的浮動元素

常規流內非定位行級元素

z-index 為 0 的子元素或子堆疊上下文

z-index 為正數的子堆疊上下文