摘要：而名作為標(biāo)簽的身份則是唯一的，在頁面中只能出現(xiàn)一次。會(huì)導(dǎo)致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清除浮動(dòng)。

書寫上的差別：class名用“.”號開頭來定義，id名用“#”號開頭來定義；

優(yōu)先級不同（權(quán)重不同）

調(diào)用上的區(qū)別：在同一個(gè)html網(wǎng)頁頁面中class是可以被多次調(diào)用的（在不同的地方）。而id名作為標(biāo)簽的身份則是唯一的，id在頁面中只能出現(xiàn)一次。在js腳本中經(jīng)常會(huì)用到id來修改一個(gè)標(biāo)簽的屬性

id作為元素的標(biāo)簽，用于區(qū)分不同結(jié)構(gòu)和內(nèi)容，而class作為一個(gè)樣式，它可以應(yīng)用到任何結(jié)構(gòu)和內(nèi)容上。

在布局思路上，一般堅(jiān)持這樣的原則：id是先確定頁面的結(jié)構(gòu)和內(nèi)容，然后再為它定義樣式：而class相反，它先定義好一類樣式，然后再頁面中根據(jù)需要把類樣式應(yīng)用到不同的元素和內(nèi)容上面。

在實(shí)際應(yīng)用時(shí)，class更多的被應(yīng)用到文字版塊以及頁面修飾等方面，而id更多地被用來實(shí)現(xiàn)宏偉布局和設(shè)計(jì)包含塊，或包含框的樣式。

一般原則： 類應(yīng)該應(yīng)用于概念上相似的元素，這些元素可以出現(xiàn)在同一頁面上的多個(gè)位置，而ID 應(yīng)該應(yīng)用于不同的唯一的元素

Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時(shí)進(jìn)行一些 bug 的修復(fù)，這點(diǎn)是 reset 所缺乏的。
Reset 相對「暴力」，不管你有沒有用，統(tǒng)統(tǒng)重置成一樣的效果，且影響的范圍很大，講求跨瀏覽器的一致性。
http://jerryzou.com/posts/abo...
Normalize.css是一種CSS reset的替代方案。它們的區(qū)別有：

Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值，Reset通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

Normalize.css 修復(fù)了瀏覽器的bug，它修復(fù)了常見的桌面端和移動(dòng)端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關(guān)于這一點(diǎn)，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。

Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂

Normalize.css 是模塊化的

Normalize.css 擁有詳細(xì)的文檔

選擇Normalize.css ，主要是reset.css為幾乎所有的元素施加默認(rèn)樣式，所以需要對所有公共的排版元素重新設(shè)置樣式，這是一件很麻煩的工作。

浮動(dòng)出現(xiàn)的最開始出現(xiàn)的意義是用來讓文字環(huán)繞圖片而已。
float可以自動(dòng)包裹元素。
float會(huì)導(dǎo)致父容器高度塌陷。float為什么會(huì)導(dǎo)致高度塌陷：元素含有浮動(dòng)屬性 –> 破壞inline box –> 破壞line box高度 –> 沒有高度 –> 塌陷。什么時(shí)候會(huì)塌陷：當(dāng)標(biāo)簽里面的元素只要樣子沒有實(shí)際高度時(shí)會(huì)塌陷。
浮動(dòng)會(huì)脫離文檔流。產(chǎn)生自己的塊級格式化上下文。

首先來看在CSS中疊加上下文形成的原因：

負(fù)邊距:margin為負(fù)值時(shí)元素會(huì)依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素（如無兄弟元素則為父元素的左內(nèi)側(cè)/上內(nèi)側(cè)）,margin-right和margin-bottom的參考線為元素本身的border右側(cè)/border下側(cè)。一般可以利用負(fù)邊距來就行布局，但沒有計(jì)算好的話就可能造成元素重疊。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。

position的relative/absolute/fixed定位:當(dāng)為元素設(shè)置position值為relative/absolute/fixed后，元素發(fā)生的偏移可能產(chǎn)生重疊，且z-index屬性被激活。z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面。

z-index屬性 ：z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
基本原理：z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面。
使用相對性：z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，決定其堆疊順序。同級元素的z-index值如果相同，則堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。所以如果當(dāng)你發(fā)現(xiàn)一個(gè)z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結(jié)點(diǎn)關(guān)系，多半是因?yàn)槠涓附Y(jié)點(diǎn)含有激活并設(shè)置了z-index值的position定位元素

BFC:塊級格式上下文。定義：
浮動(dòng)元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文。
在一個(gè)塊級格式化上下文里，盒子從包含塊的頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個(gè)相鄰的塊級盒子的垂直外邊距會(huì)發(fā)生疊加。
在塊級格式化上下文中，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動(dòng)也是如此，除非這個(gè)盒子創(chuàng)建一個(gè)新的塊級格式化上下文。

BFC詳解： http://www.cnblogs.com/lhb25/...

display:block

block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。

block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。

block元素可以設(shè)置margin和padding屬性。

display:inline

inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。

inline元素設(shè)置width,height屬性無效。

inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top,

padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。

display:inline-block
就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。

備注：屬性為inline-block元素之間的空格或者換行在瀏覽器上會(huì)是一個(gè)空白的間隙。且IE6和7是不支持這個(gè)屬性的，需要通過display:inline;zoom:1做hack處理。

添加新的元素、應(yīng)用 clear：both

 
1
 
2
 
3
 
 
 
.clear{clear:both; height: 0; line-height: 0; font-size: 0} 

優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題
缺點(diǎn)：要增加很多無效布局，但這是清除浮動(dòng)用的比較多的一種方法。

父級div定義overflow：auto或者h(yuǎn)idden

 //這里添加了一個(gè)class 
1
 
2
 
3
 
 
.over-flow{ 
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題 
} 

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow屬性來清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無法達(dá)到清除浮動(dòng)效果。
優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好
缺點(diǎn)：使用auto時(shí)內(nèi)部寬高超過父級div時(shí)，會(huì)出現(xiàn)滾動(dòng)條，使用hidden時(shí)會(huì)被隱藏

after 方法

 
1
 
2
 
3
 
 
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ 
.outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

其中clear:both;指清除所有浮動(dòng)；content: ‘.’; display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清除浮動(dòng)。
所以總的來說，推薦使用偽類的辦法。

CSS Sprites就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
優(yōu)點(diǎn)： 當(dāng)頁面加載時(shí)，不是加載每個(gè)多帶帶圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了不起的改進(jìn)，它大大減少了HTTP請求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。
缺點(diǎn)：做圖像拼合的時(shí)候很麻煩

解決方案：

主張向前兼容，不考慮向后兼容，

根據(jù)產(chǎn)品的用戶群中各大瀏覽器，來考慮需要兼容的瀏覽器

把瀏覽器分兩類，一類歷史遺留瀏覽器，一類是現(xiàn)代瀏覽器，然后根據(jù)這個(gè)分類開發(fā)兩個(gè)版本的網(wǎng)站，然后自己定義哪些瀏覽器是歷史遺留版本，歷史遺留版本瀏覽器，是用歷史遺留界面，通過通告欄告知用戶使用現(xiàn)代瀏覽器，功能更全面，提供好的用戶體驗(yàn)

直接在用戶的瀏覽器不能兼容的時(shí)候，提示用戶至少什么版本的IE和火狐谷歌瀏覽器才能支持（以上方案都失效）

項(xiàng)目開始前就得需要確認(rèn)兼容支持的最低按本是什么，設(shè)計(jì)一個(gè)對應(yīng)的兼容方案

display:none 文本圖片的隱藏：
缺陷：搜索引擎可能認(rèn)為被隱藏的文字屬于垃圾信息而被忽略
屏幕閱讀器（是為視覺上有障礙的人設(shè)計(jì)的讀取屏幕內(nèi)容的程序）會(huì)忽略被隱藏的文字，同時(shí)不利于搜索引擎。

visibility: hidden：隱藏內(nèi)容或圖片
缺陷：隱藏的內(nèi)容會(huì)占據(jù)他所應(yīng)該占據(jù)物理空間

Bootstrap中的流式布局；Bootstrap提供了兩種布局方式，固定式布局和流式布局（用em表示的叫做彈性布局，用百分比表示的叫做流體布局）方式，Bootstrap的布局實(shí)際上是在柵格外加個(gè)容器 (Container)
因此兩種布局方式的唯一區(qū)別是：
固定布局加的是固定寬度(width)的容器，
流式布局加的是自適應(yīng)(或叫可變)寬度的容器。

媒體查詢規(guī)則是開發(fā)者能夠在相同的樣式中，針對不同的媒介來使用不同的樣式規(guī)則。在CSS2的時(shí)候有media Type的規(guī)則，通過不同的媒介來切換不同的CSS樣式。通過媒體查詢的技術(shù)可以實(shí)現(xiàn)響應(yīng)式布局，適應(yīng)不同終端的開發(fā)。媒體查詢的具體知識請見 CSS3新屬性應(yīng)用文檔。

添加打印樣式，為屏幕顯示和打印分別準(zhǔn)備一個(gè)css文件，如下所示：

用于屏幕顯示的css：

用于打印的css：

import方式：

直接把屏幕顯示樣式和打印樣式寫在一個(gè)css文件中：

@media print {}{
   h1 {
     color: black;
   }
   h2 {}{
     color: gray;
   }
 }

@media print里面的內(nèi)容只對打印出來的內(nèi)容有效，之外的內(nèi)容就是屏幕顯示的樣式。

其他：

創(chuàng)建一個(gè)不指定媒體類型的樣式表通常很有用（或者利用media=”all”）。當(dāng)你準(zhǔn)備好定義一些特別用
于打印的規(guī)則時(shí)，可以只創(chuàng)建一個(gè)多帶帶的樣式表，使任何在打印時(shí)看起來不好的樣式都失效。使用這種方法的一個(gè)問題是必須確保打印機(jī)樣式實(shí)際上確實(shí)覆蓋了主樣式表。可以使用！important.

打印樣式表也應(yīng)有些注意事項(xiàng)：

打印樣式表中最好不要用背景圖片，因?yàn)榇蛴C(jī)不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。

最好不要使用像素作為單位，因?yàn)榇蛴邮奖硪蛴〕鰜淼臅?huì)是實(shí)物，所以建議使用pt和cm。

隱藏掉不必要的內(nèi)容。（@print div{display:none;}）

打印樣式表中最好少用浮動(dòng)屬性，因?yàn)樗鼈儠?huì)消失。

如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預(yù)覽就可以了。

備注： 參考： http://blog.csdn.net/pangni/a...

樣式是：從右向左的解析一個(gè)選擇器

ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

不要tag-qualify （永遠(yuǎn)不要這樣做 ul#main-navigation { } ID已經(jīng)是唯一的，不需要Tag來標(biāo)識，這樣做會(huì)讓選擇器變慢。）

后代選擇器最糟糕（換句話說，下面這個(gè)選擇器是很低效的： html body ul li a { }）

想清楚你為什么這樣寫

CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會(huì)浪費(fèi)很多的瀏覽器資源。）

我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性

缺點(diǎn)：簡單來說CSS預(yù)處理器語言較CSS玩法變得更高級了，但同時(shí)降低了自己對最終代碼的控制力。更致命的是提高了門檻，首先是上手門檻，其次是維護(hù)門檻，再來是團(tuán)隊(duì)整體水平和規(guī)范的門檻。這也造成了初學(xué)學(xué)習(xí)成本的昂貴。
優(yōu)點(diǎn)：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。通俗的說，CSS預(yù)處理器用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數(shù)等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

Webfonts (字體服務(wù)例如：Google Webfonts，Typekit 等等。)

瀏覽器先產(chǎn)生一個(gè)元素集合，這個(gè)集合往往由最后一個(gè)部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個(gè)部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。

偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。
偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。

區(qū)別：偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素

參考： http://www.alloyteam.com/2016...

盒子模型分為兩類：W3C標(biāo)準(zhǔn)盒子模型和IE盒子模型
這兩者的關(guān)鍵區(qū)別就在于：
寬高的計(jì)算：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個(gè)值不包含 填充（padding）和邊框（border）
IE盒子模型——屬性高（height）和屬性寬（width）這兩個(gè)值包含 填充（padding）和邊框（border）

各瀏覽器盒模型的組成結(jié)構(gòu)是一致的，區(qū)別只是在”怪異模式”下寬度和高度的計(jì)算方式，而“標(biāo)準(zhǔn)模式”下則沒有區(qū)別。

組成結(jié)構(gòu)以寬度為例：總寬度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C標(biāo)準(zhǔn)盒子模型）。頁面在“怪異模式”下，css中為元素的width和height設(shè)置的值在標(biāo)準(zhǔn)瀏覽器和ie系列(ie9除外)里的代表的含義是不同的（IE盒子模型）。

因而解決兼容型為題最簡潔和值得推薦的方式是：下述的第一條。

將頁面設(shè)為“標(biāo)準(zhǔn)模式”。 添加對應(yīng)的dtd標(biāo)識，如：

使用hack或者在外面套上一層wrapper。 前提是頁面處于“怪異模式”，“標(biāo)準(zhǔn)模式”不存在兼容性問題。

1、hack的方式

#box {  
    width:100px !important; // ie9,ff,chrome,opera這樣的標(biāo)準(zhǔn)瀏覽器
    width:160px; //所有的瀏覽器；它的本意是只對不認(rèn)識!important的設(shè)置?？墒莍e7、ie8也認(rèn)識
    +width:160px!important;//ie7
    width:160px/0!important;//ie8
    padding:0 10px;border:20px solid blue;margin:70px;  
}  

2、wrapper

    
#box {  
width:100px;  
margin:70px;  
float:left;  
}  
.wrapper {  
padding:0 10px;border:20px solid blue;  
}

總結(jié)：使用“標(biāo)準(zhǔn)模式”即可實(shí)現(xiàn)兼容，不兼容只發(fā)生在“怪異模式”下。而且正常的頁面基本上都選擇前者，如果選擇后者，麻煩不止于此，一些css技巧也將失靈，如將div居中：div {margin:0 auto;}

設(shè)置以后，相當(dāng)于以怪異模式解析，border和padding全會(huì)在你設(shè)置的寬度內(nèi)部，比如手機(jī)端設(shè)置兩行并且的布局，寬度各為50%,如果不用這個(gè)屬性，設(shè)置border后右邊的div會(huì)下來錯(cuò)位，設(shè)置這個(gè)屬性，寬度還是50%而不是50%+*px,兩行可以并列顯示

說到 IE 的 bug，在 IE6以前的版本中，IE對盒模型的解析出現(xiàn)一些問題，跟其它瀏覽器不同，將 border 與 padding 都包含在 width 之內(nèi)。而另外一些瀏覽器則與它相反，是不包括border和padding的。對于IE瀏覽器，當(dāng)我們設(shè)置 box-sizing: content-box; 時(shí)，瀏覽器對盒模型的解釋遵從我們之前認(rèn)識到的 W3C 標(biāo)準(zhǔn)，當(dāng)它定義width和height時(shí)，它的寬度不包括border和padding；對于非IE瀏覽器，當(dāng)我們設(shè)置box-sizing: border-box; 時(shí)，瀏覽器對盒模型的解釋與 IE6之前的版本相同，當(dāng)它定義width和height時(shí)，border和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以通過定義的“width”和 “height”減去相應(yīng)方向的“padding”和“border”的寬度得到。內(nèi)容的寬和高必須保證不能為負(fù)，必要時(shí)將自動(dòng)增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。

好處：　

使用 * { box-sizing: border-box; }能夠統(tǒng)一IE和非IE瀏覽器之間的差異。

　解決排版的問題，每個(gè)盒子之間排版時(shí)不用考慮padding和border的寬度計(jì)算

display 屬性規(guī)定元素應(yīng)該生成的框的類型。

都是display 屬性規(guī)定元素應(yīng)該生成的框的類型。但是block代表塊級元素，元素前后都有換行符；inline是默認(rèn)的樣式，表示該元素被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符號。也就是說，block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，會(huì)多帶帶換一行；inline元素則前后不會(huì)產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。而inline-block代表行內(nèi)塊元素（css2.0新增）。

display:block:

block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。

block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。

block元素可以設(shè)置margin和padding屬性。

display:inline:

inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。

inline元素設(shè)置width,height屬性無效。

inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果。

display:inline-block:
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性

各個(gè)屬性的值：

static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

relative：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常位置進(jìn)行定位?？赏ㄟ^z-index進(jìn)行層次分級。

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定?？赏ㄟ^z-index進(jìn)行層次分級。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級。

relative和absolute進(jìn)行對比分析：

relative。定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。

absolute。定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在。

fixed:定位為絕對定位，脫離正常文本流，相對于瀏覽器窗口進(jìn)行定位

relative和absolute與fixed進(jìn)行對比分析：

relative定位的層總是相對于其最近的父元素，無論其父元素是何種定位方式。

absolute定位的層總是相對于其最近的定義為absolute或relative的父層，而這個(gè)父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進(jìn)行定位，

fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。

塊級：div、p、ul、ol、body、from

行內(nèi)：?title ?lable ?span a

行內(nèi)塊： ?img ?input ?td

盒子模型的三維立體結(jié)構(gòu):?第一層：border ? 第二層：內(nèi)容+padding ? ?第三層：背景圖片 ? ? 第四層：背景顏色 ? ? ?第五層：外邊距

語義化的HTML就是寫出的HTML代碼，符合內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），能夠便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。

語義化有利于SEO，有利于搜索引擎爬蟲更好的理解我們的網(wǎng)頁，從而獲取更多的有效信息，提升網(wǎng)頁的權(quán)重。

在沒有CSS的時(shí)候能夠清晰的看出網(wǎng)頁的結(jié)構(gòu)，增強(qiáng)可讀性。

便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化的HTML可以讓開發(fā)者更容易的看明白，從而提高團(tuán)隊(duì)的效率和協(xié)調(diào)能力。

支持多終端設(shè)備的瀏覽器渲染。

id選擇器、類選擇器、元素選擇器、全局選擇器、組合選擇器、繼承選擇器、偽類選擇器

權(quán)重計(jì)算:
第一等級：代表內(nèi)聯(lián)樣式，如style=""，權(quán)值為 1000
第二等級：代表id選擇器，如#content，權(quán)值為100
第三等級：代表類，偽類和屬性選擇器，如.content，權(quán)值為10
第四等級：代表標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)值為1
Css 語句權(quán)重由選擇器的權(quán)值相加可得。
樣式優(yōu)先級:！important>行內(nèi)樣式>內(nèi)部樣式>外部樣式

!important聲明的樣式優(yōu)先級最高，如果沖突再進(jìn)行計(jì)算。

如果優(yōu)先級相同，則選擇最后出現(xiàn)的樣式。

繼承得到的樣式的優(yōu)先級最低。

CSS的引入方式共有三種：

行內(nèi)樣式（使用style屬性引入CSS樣式）

內(nèi)部樣式表（在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中）

外部樣式表（鏈接式、導(dǎo)入式）

鏈接：

導(dǎo)入：

鏈接和道路的區(qū)別：
：

屬于XHTML

優(yōu)先加載CSS文件到頁面

@import：

屬于CSS2.1

先加載HTML結(jié)構(gòu)在加載CSS文件

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優(yōu)先級（就近原則）：!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級高

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap（對長的不可分割單詞換行）word-wrap：break-word

文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

font-face屬性：定義自己的字體

圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角

邊框圖片：border-image: url(border.png) 30 30 round

盒陰影：box-shadow: 10px 10px 5px #888888

媒體查詢：定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進(jìn)行布局、對齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。
適用場景：彈性布局適合于移動(dòng)前端開發(fā)，在Android和ios上也完美支持。

首先，需要把元素的寬度、高度設(shè)為0。然后設(shè)置邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

第一種真正的品字：

三塊高寬是確定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調(diào)整位置使他們居中。

第二種全屏的品字布局:
上面的div設(shè)置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。*{margin:0;padding:0;}

IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

漸進(jìn)識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。

{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}

設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：

若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；

否則,則由這個(gè)祖先元素的 padding box 構(gòu)成。

如果都找不到，則為 initial containing block。
補(bǔ)充：

static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）

absolute: 向上找最近的定位為absolute/relative的元素

fixed: 它的containing block一律為根元素(html/body)

當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后，對于一般的元素，它的表現(xiàn)跟hidden是一樣的。

chrome中，使用collapse值和使用hidden沒有區(qū)別。

firefox，opera和IE，使用collapse值和使用display：none沒有什么區(qū)別。

display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個(gè)方向浮動(dòng)。
類似于優(yōu)先級機(jī)制：position：absolute/fixed優(yōu)先級最高，有他們在時(shí)，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。

BFC規(guī)定了內(nèi)部的Block Box如何布局。
定位方案：

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置。

Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

每個(gè)元素的margin box 的左邊，與包含塊border box的左邊相接觸。

BFC的區(qū)域不會(huì)與float box重疊。

BFC是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā)BFC：

根元素，即html

float的值不為none（默認(rèn)）

overflow的值不為visible（默認(rèn)）

display的值為inline-block、table-cell、table-caption

position的值為absolute或fixed

浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。由于浮動(dòng)元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。
浮動(dòng)帶來的問題：

父元素的高度無法被撐開，影響與父元素同級的元素

與浮動(dòng)元素同級的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)。

清除浮動(dòng)的方式：

父級div定義height

最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both。

包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。

父級div定義zoom

在重合元素外包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。
例子：

    

    

        

    
    
    .aside {
        margin-bottom: 100px;  
        width: 100px;
        height: 150px;
        background: #f66;
    }
    .main {
        margin-top: 100px;
        height: 200px;
        background: #fcc;
    }
     .text{
        /*盒子main的外面包一個(gè)div，通過改變此div的屬性使兩個(gè)盒子分屬于兩個(gè)不同的BFC，以此來阻止margin重疊*/
        overflow: hidden;  //此時(shí)已經(jīng)觸發(fā)了BFC屬性。
    }

自動(dòng)變成display:block

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應(yīng)相應(yīng)的設(shè)備的顯示。

里邊

CSS : @media only screen and (max-device-width:480px) {/css樣式/}

避免過度約束

避免后代選擇符

避免鏈?zhǔn)竭x擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復(fù)

最好使用表示語義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么

避免！important，可以選擇其他選擇器

盡可能的精簡規(guī)則，你可以合并不同類里的重復(fù)規(guī)則

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會(huì)損失很多性能。若從右向左匹配，先找到所有的最右節(jié)點(diǎn)，對于每一個(gè)節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個(gè)分支的遍歷。兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)），而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree，最終用來進(jìn)行繪圖。在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過程），瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree。

使用偶數(shù)字體。偶數(shù)字號相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個(gè)大小的點(diǎn)陣，而 13、15、17 px時(shí)用的是小一號的點(diǎn)。（即每個(gè)字占的空間大了 1 px，但點(diǎn)陣沒變），于是略顯稀疏。

何時(shí)使用margin：

需要在border外側(cè)添加空白

空白處不需要背景色

上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

何時(shí)使用padding：

需要在border內(nèi)側(cè)添加空白

空白處需要背景顏色

上下相連的兩個(gè)盒子的空白，希望為兩者之和。

兼容性的問題：在IE5 IE6中，為float的盒子指定margin時(shí)，左側(cè)的margin可能會(huì)變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對于父容器的寬度計(jì)算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。

原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進(jìn)行y軸定位，也可以通過margin-top實(shí)現(xiàn)

overflow：hidden；transition：all 1000ms ease；

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。
基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。

視差滾動(dòng)（Parallax Scrolling）通過在網(wǎng)頁向下滾動(dòng)的時(shí)候，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來創(chuàng)建出令人驚嘆的3D效果。

CSS3實(shí)現(xiàn): 優(yōu)點(diǎn)：開發(fā)時(shí)間短、性能和開發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器

jQuery實(shí)現(xiàn): 通過控制不同層滾動(dòng)速度，計(jì)算每一層的時(shí)間，控制滾動(dòng)效果。
優(yōu)點(diǎn)：能兼容到各個(gè)版本的，效果可控性好
缺點(diǎn)：開發(fā)起來對制作者要求高

插件實(shí)現(xiàn)方式: 例如：parallax-scrolling，兼容性十分好

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。

::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁面之中。

:before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中，其實(shí)也可以把height刪除。

多行文本垂直居中：需要設(shè)置display屬性為inline-block。

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

-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

行框的排列會(huì)受到中間空白（回車空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒有空格了。
解決方法：

可以將