摘要：設(shè)計(jì)思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實(shí)問(wèn)題優(yōu)雅降級(jí)尊重事實(shí)標(biāo)準(zhǔn)變化新增語(yǔ)義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語(yǔ)法標(biāo)簽不區(qū)分大小寫(xiě)推薦小寫(xiě)空標(biāo)簽可以不閉合屬性不必引號(hào)。遇到這種情況時(shí)，會(huì)生成匿名塊級(jí)盒來(lái)包含行級(jí)盒。

360瀏覽器

UC瀏覽器

QQ瀏覽器

搜狗瀏覽器

HyperText Markup Language

使用標(biāo)簽來(lái)描述頁(yè)面的內(nèi)容和結(jié)構(gòu)

指定頁(yè)面的使用標(biāo)準(zhǔn)和版本

決定使用哪種渲染模式

Quirks Mode (怪異模式)

Almost standard Mode (標(biāo)準(zhǔn)準(zhǔn)模式)

Standard Mode (標(biāo)準(zhǔn)模式)

注意: 如果當(dāng)我們不指定Doctype時(shí)，IE6、IE7會(huì)采用怪異模式渲染頁(yè)面，IE8以標(biāo)準(zhǔn)模式渲染頁(yè)面，firefox11也是以標(biāo)準(zhǔn)模式渲染頁(yè)面。

兼容已有內(nèi)容

避免不必要的復(fù)雜性

解決現(xiàn)實(shí)問(wèn)題

優(yōu)雅降級(jí)

尊重事實(shí)標(biāo)準(zhǔn)

Doctype、meta

新增語(yǔ)義化標(biāo)簽

去除純表示性的標(biāo)簽

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

標(biāo)簽不區(qū)分大小寫(xiě)、推薦小寫(xiě)

空標(biāo)簽可以不閉合

屬性不必引號(hào)。推薦雙引號(hào)

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

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

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

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

指定高寬：強(qiáng)制按照指定高寬顯示

jpg：照片

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

gif：無(wú)法半透明，可以多幀做動(dòng)畫(huà)

WebP

注意: WebP 的優(yōu)勢(shì)體現(xiàn)在它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來(lái)更小的圖片體積，而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量；同時(shí)具備了無(wú)損和有損的壓縮模式、Alpha 透明以及動(dòng)畫(huà)的特性，在 JPEG 和 PNG 上的轉(zhuǎn)化效果都非常優(yōu)秀、穩(wěn)定和統(tǒng)一。更多...

提升代碼的可讀性、可維護(hù)性

搜索引擎的優(yōu)化（利于SEO）

提升無(wú)障礙性

通配選擇器 *

標(biāo)簽選擇器 p

id選擇器 #id

類選擇器 .class

[attr]只使用屬性名，但沒(méi)有確定任何屬性值;

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

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

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

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

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

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

基于 DOM 之外的信息去（比如根據(jù)用戶和網(wǎng)頁(yè)的交互狀態(tài)）選擇元素。

a:link    { ... }   /* 未訪問(wèn)過(guò)的鏈接 */
a:visited { ... }   /* 已訪問(wèn)過(guò)的鏈接 */
a:hover   { ... }   /* 鼠標(biāo)移到鏈接上的樣式 */
a:active  { ... }   /* 鼠標(biāo)在連接上按下時(shí)的樣式 */
a:focus   { ... }   /* 獲得焦點(diǎn)時(shí)的樣式 */

直接組合

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

后代組合

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

相鄰兄弟

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

通用兄弟

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

同時(shí)為一組選擇器定義樣式

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

哪條聲明起作用？

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

根據(jù)規(guī)則來(lái)源，優(yōu)先級(jí)從低到高：

瀏覽器預(yù)設(shè)

用戶設(shè)置

網(wǎng)頁(yè)樣式

同一來(lái)源中，按照特異度排序，越特殊優(yōu)先級(jí)越高

特異度一樣時(shí)，按照樣式書(shū)寫(xiě)順序，后面的優(yōu)先級(jí)高


有 !important 時(shí)的變化

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

根據(jù)規(guī)則來(lái)源, 優(yōu)先級(jí)從低到高：

瀏覽器預(yù)設(shè)

用戶設(shè)置

網(wǎng)頁(yè)樣式

含 !important 的網(wǎng)頁(yè)樣式

含 !important 的用戶設(shè)置樣式

同一來(lái)源中，按照特異度排序，越特殊優(yōu)先級(jí)越高

特異度一樣時(shí)，按照樣式書(shū)寫(xiě)順序，后面的優(yōu)先級(jí)高

使用逗號(hào)分隔的字體族名稱

初始值由瀏覽器設(shè)置決定，可繼承

字體匹配算法

瀏覽器先獲取一個(gè)系統(tǒng)字體列表

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

如果步驟2沒(méi)有匹配上，選擇下一個(gè)可選的 font-family 執(zhí)行步驟2

如果匹配到一個(gè)字體，但是字體中沒(méi)有該字符，繼續(xù)對(duì)下一個(gè)可選的 font-family 執(zhí)行步驟2

如果沒(méi)有匹配到字體，使用瀏覽器默認(rèn)字體。

font-family 使用

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

最后總是添加通用字體族

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

取值

絕對(duì)值 xx-small | x-small | small | medium | large | x-large | xx-large

相對(duì)值 larger | smaller

長(zhǎng)度

百分?jǐn)?shù)，相對(duì)于父元素計(jì)算值

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

長(zhǎng)度單位em

一般是相對(duì)于元素 font-size 的計(jì)算值的

用在 font-size 屬性上時(shí)，是相對(duì)于父元素的 font-size 計(jì)算值

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

取值：normal | italic | oblique

初始值為 normal，可繼承

定義文字的粗細(xì)程度

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

初始值為 normal，可繼承

元素所屬的 line box 所占高度

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

取值：<長(zhǎng)度> | <數(shù)字> | <百分比>

段落文字一般取值1.4～1.8

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

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

定義文本在容器內(nèi)的對(duì)齊方式

取值：left | right | center | justify

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

指定字符之間的間距

取值：normal |

初始值為 normal，可繼承

指定單詞之間的間距

取值：normal |

初始值為 normal，可繼承

指定文本縮進(jìn)

取值：normal | |

初始值為 0，可繼承

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

初始值為none，可繼承

其它值：underline | line-through | overline

指定空白符如何處理

取值：normal | nowrap | pre

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

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

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

會(huì)被格式化成塊狀的元素

例如 p、div、section 等

將 display 設(shè)置為 block、list-item、table 使元素變?yōu)閴K級(jí)

不會(huì)為其內(nèi)容生成塊級(jí)框

讓其內(nèi)容分布在多行中

display 設(shè)置為 inline、inline-block、inline-table 使元素變?yōu)樾屑?jí)

margin：行級(jí)盒的 margin-top 和 margin-bottom 不會(huì)產(chǎn)生效果
padding：行級(jí)盒的 padding-top 和 padding-top 不影響行布局

塊級(jí)盒子中可以包含多個(gè)子塊級(jí)盒子

可以包含多個(gè)行級(jí)盒子

不在行級(jí)元素里面的文字，會(huì)生成匿名行級(jí)盒。比如:

SomeText

塊級(jí)盒子中不能同時(shí)包含塊級(jí)和行級(jí)盒子。遇到這種情況時(shí)，會(huì)生成匿名塊級(jí)盒來(lái)包含行級(jí)盒。比如:

標(biāo)題
2016-12-12

行級(jí)盒子內(nèi)可以包含行級(jí)盒子

行級(jí)盒子包含一個(gè)塊級(jí)盒子時(shí)，會(huì)被塊級(jí)盒子拆成兩個(gè)行級(jí)盒子，這兩個(gè)盒子又分別被匿名塊級(jí)盒包含

常規(guī)流(Normal Flow)

浮動(dòng)(Float)

絕對(duì)定位(Absolute Positioning)

除根元素、浮動(dòng)元素和絕對(duì)定位元素外，其它元素都在常規(guī)流之內(nèi)(in-flow)

而根元素、 浮動(dòng)和絕對(duì)定位的元素會(huì)脫離常規(guī)流(out of flow)

常規(guī)流中的盒子，屬于塊級(jí)格式化上下文或行級(jí)格式化上下文

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

盒子在容器（包含塊）內(nèi)從上到下一個(gè)接一個(gè)地放置

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

同一個(gè) BFC 內(nèi)垂直 margin 會(huì)合并

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

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

BFC 內(nèi)的浮動(dòng)不會(huì)影響到BFC外部的元素

BFC 的高度會(huì)包含其內(nèi)的浮動(dòng)元素

BFC 不會(huì)和浮動(dòng)元素重疊

BFC 可以通過(guò) overflow:hidden 等方法創(chuàng)建


BFC 的創(chuàng)建:

浮動(dòng)框

絕對(duì)定位框

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

overflow 屬性非 visible 的塊框


BFC的作用:

清除浮動(dòng)

防止 margin 折疊

雙欄布局

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

盒子一個(gè)接一個(gè)水平放置

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

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

當(dāng)一個(gè)行盒放不下上下文內(nèi)所有盒子時(shí)，會(huì)被分到多個(gè)垂直堆疊的行盒里

行盒內(nèi)的水平分布由"text-align"屬性決定

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

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

浮動(dòng)盒會(huì)一直漂到其外邊緣挨到容器邊緣或另外的浮動(dòng)盒

浮動(dòng)元素不會(huì)影響其后面的流內(nèi)塊級(jí)盒

但是浮動(dòng)元素后面的行級(jí)盒子會(huì)變短以避開(kāi)浮動(dòng)元素

static，非定位，默認(rèn)值

relative，相對(duì)定位（相對(duì)自己）

absolute，絕對(duì)定位，相對(duì)非 static 祖先元素定位

fixed，相對(duì)于視口絕對(duì)定位

relative

在常規(guī)流里面布局

相對(duì)于自己本應(yīng)該在的位置進(jìn)行偏移

使用 top、left、bottom、right 設(shè)置偏移長(zhǎng)度

流內(nèi)其它元素當(dāng)它沒(méi)有偏移一樣布局

absolute

脫離正常流

相對(duì)于最近的非 static 祖先的 padding box 定位

不會(huì)對(duì)流內(nèi)元素布局造成影響

可以有 margin，但不會(huì)折疊

fixed

相對(duì)于 Viewport 定位

不會(huì)隨頁(yè)面滾動(dòng)發(fā)生位置變化

z-index 堆疊層次

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

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

堆疊上下文的生成

Root 元素

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

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

繪制順序

在每一個(gè)堆疊上下文中，從下到上：

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

z-index 為負(fù)值的子堆疊上下文

常規(guī)流內(nèi)的塊級(jí)元素非浮動(dòng)子元素

非定位的浮動(dòng)元素

常規(guī)流內(nèi)非定位行級(jí)元素

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

z-index 為正數(shù)的子堆疊上下文