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

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

優先級不同（權重不同）

調用上的區別：在同一個html網頁頁面中class是可以被多次調用的（在不同的地方）。而id名作為標簽的身份則是唯一的，id在頁面中只能出現一次。在js腳本中經常會用到id來修改一個標簽的屬性

id作為元素的標簽，用于區分不同結構和內容，而class作為一個樣式，它可以應用到任何結構和內容上。

在布局思路上，一般堅持這樣的原則：id是先確定頁面的結構和內容，然后再為它定義樣式：而class相反，它先定義好一類樣式，然后再頁面中根據需要把類樣式應用到不同的元素和內容上面。

在實際應用時，class更多的被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉布局和設計包含塊，或包含框的樣式。

一般原則： 類應該應用于概念上相似的元素，這些元素可以出現在同一頁面上的多個位置，而ID 應該應用于不同的唯一的元素

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

Normalize.css 保護了有價值的默認值，Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。

Normalize.css 修復了瀏覽器的bug，它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關于這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

Normalize.css 不會讓你的調試工具變的雜亂

Normalize.css 是模塊化的

Normalize.css 擁有詳細的文檔

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

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

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

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

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

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

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

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

display:block

block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

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

block元素可以設置margin和padding屬性。

display:inline

inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

inline元素設置width,height屬性無效。

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

padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block
就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。

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

添加新的元素、應用 clear：both

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

優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：要增加很多無效布局，但這是清除浮動用的比較多的一種方法。

父級div定義overflow：auto或者hidden

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

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

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;指清除所有浮動；content: ‘.’; display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。
所以總的來說，推薦使用偽類的辦法。

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

解決方案：

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

根據產品的用戶群中各大瀏覽器，來考慮需要兼容的瀏覽器

把瀏覽器分兩類，一類歷史遺留瀏覽器，一類是現代瀏覽器，然后根據這個分類開發兩個版本的網站，然后自己定義哪些瀏覽器是歷史遺留版本，歷史遺留版本瀏覽器，是用歷史遺留界面，通過通告欄告知用戶使用現代瀏覽器，功能更全面，提供好的用戶體驗

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

項目開始前就得需要確認兼容支持的最低按本是什么，設計一個對應的兼容方案

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

visibility: hidden：隱藏內容或圖片
缺陷：隱藏的內容會占據他所應該占據物理空間

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

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

添加打印樣式，為屏幕顯示和打印分別準備一個css文件，如下所示：

用于屏幕顯示的css：

用于打印的css：

import方式：

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

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

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

其他：

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

打印樣式表也應有些注意事項：

打印樣式表中最好不要用背景圖片，因為打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。

最好不要使用像素作為單位，因為打印樣式表要打印出來的會是實物，所以建議使用pt和cm。

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

打印樣式表中最好少用浮動屬性，因為它們會消失。

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

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

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

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

不要tag-qualify （永遠不要這樣做 ul#main-navigation { } ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）

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

想清楚你為什么這樣寫

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

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

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

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

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

偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。
偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。

區別：偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素

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

盒子模型分為兩類：W3C標準盒子模型和IE盒子模型
這兩者的關鍵區別就在于：
寬高的計算：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包含 填充（padding）和邊框（border）
IE盒子模型——屬性高（height）和屬性寬（width）這兩個值包含 填充（padding）和邊框（border）

各瀏覽器盒模型的組成結構是一致的，區別只是在”怪異模式”下寬度和高度的計算方式，而“標準模式”下則沒有區別。

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

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

將頁面設為“標準模式”。 添加對應的dtd標識，如：

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

1、hack的方式

#box {  
    width:100px !important; // ie9,ff,chrome,opera這樣的標準瀏覽器
    width:160px; //所有的瀏覽器；它的本意是只對不認識!important的設置?？墒莍e7、ie8也認識
    +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;  
}

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

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

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

好處：　

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

　解決排版的問題，每個盒子之間排版時不用考慮padding和border的寬度計算

display 屬性規定元素應該生成的框的類型。

都是display 屬性規定元素應該生成的框的類型。但是block代表塊級元素，元素前后都有換行符；inline是默認的樣式，表示該元素被顯示為內聯元素，元素前后沒有換行符號。也就是說，block元素通常被現實為獨立的一塊，會多帶帶換一行；inline元素則前后不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。而inline-block代表行內塊元素（css2.0新增）。

display:block:

block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

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

block元素可以設置margin和padding屬性。

display:inline:

inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

inline元素設置width,height屬性無效。

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

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

各個屬性的值：

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

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

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定?？赏ㄟ^z-index進行層次分級。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定?？赏ㄟ^z-index進行層次分級。

relative和absolute進行對比分析：

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

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

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

relative和absolute與fixed進行對比分析：

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

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

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

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

行內：?title ?lable ?span a

行內塊： ?img ?input ?td

盒子模型的三維立體結構:?第一層：border ? 第二層：內容+padding ? ?第三層：背景圖片 ? ? 第四層：背景顏色 ? ? ?第五層：外邊距

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

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

在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。

便于團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。

支持多終端設備的瀏覽器渲染。

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

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

!important聲明的樣式優先級最高，如果沖突再進行計算。

如果優先級相同，則選擇最后出現的樣式。

繼承得到的樣式的優先級最低。

CSS的引入方式共有三種：

行內樣式（使用style屬性引入CSS樣式）

內部樣式表（在style標簽中書寫CSS代碼。style標簽寫在head標簽中）

外部樣式表（鏈接式、導入式）

鏈接：

導入：

鏈接和道路的區別：
：

屬于XHTML

優先加載CSS文件到頁面

@import：

屬于CSS2.1

先加載HTML結構在加載CSS文件

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(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
優先級（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先級高

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 屬性用于創建圓角

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

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

媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性

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

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

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調整位置使他們居中。

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

不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;}

IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。

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

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

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

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

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

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

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

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

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

否則,則由這個祖先元素的 padding box 構成。

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

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

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

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

當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。

chrome中，使用collapse值和使用hidden沒有區別。

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

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

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

display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。
類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

BFC規定了內部的Block Box如何布局。
定位方案：

內部的Box會在垂直方向上一個接一個放置。

Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。

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

BFC的區域不會與float box重疊。

BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。

計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發BFC：

根元素，即html

float的值不為none（默認）

overflow的值不為visible（默認）

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

position的值為absolute或fixed

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

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

與浮動元素同級的非浮動元素（內聯元素）會跟隨其后

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

父級div定義height

最后一個浮動元素后加空div標簽 并添加樣式clear:both。

包含浮動元素的父標簽添加樣式overflow為hidden或auto。

父級div定義zoom

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

    

    

        

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

自動變成display:block

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

里邊

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

避免過度約束

避免后代選擇符

避免鏈式選擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復

最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么

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

盡可能的精簡規則，你可以合并不同類里的重復規則

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

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

何時使用margin：

需要在border外側添加空白

空白處不需要背景色

上下相連的兩個盒子之間的空白，需要相互抵消時。

何時使用padding：

需要在border內側添加空白

空白處需要背景顏色

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

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

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

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

overflow：hidden；transition：all 1000ms ease；

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

視差滾動（Parallax Scrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。

CSS3實現: 優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器

jQuery實現: 通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優點：能兼容到各個版本的，效果可控性好
缺點：開發起來對制作者要求高

插件實現方式: 例如：parallax-scrolling，兼容性十分好

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

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

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

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

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

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

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

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

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
解決方法：

可以將