一、CSS 樣式層聯想

1、IE低版本的非著名兼容問題

　　1、並非不支持Display: inline-block;

　　CSS2.1版本中對於inline-block的樣式定位為：使元素生成一個行內級別的包含塊，其內部按塊級可以設置寬高，自身按行內框來計算布局。

　　IE 5.5、6、7 、8（Q）幾個低版本IE瀏覽器中支持inline-block，與CSS2.1版本的規範效果有所差異，準確的說是支持的並不完整。

　　低版本IE中 inline 元素被設置為 inline-block 的效果只需直接設置此屬性值或使用 zoom:1 等觸發hasLayout屬性均可。

　　block 元素對 inline-block 支持不完整，如果要達到類似的效果，需要先設置為 display:inline，然後使用 zoom:1 等觸發hasLayout屬性。

　　於是便有了兼容性的代碼：

Display: inline-block;

*display: inline;

*zoom: 1;

　　2、position定位中的z-index問題

　　　　在IE瀏覽器中，定位元素的z-index層級是相對於各自的父級容器，所以會導致z-index出現錯誤的表現。

　　　　解決方法是給其父級元素定義z-index，有些情況下還需要定義position:relative。

2、清晰的html，js， css分層

　　常將網頁分為結構層，表現層，和行為層，將html、js、css分開管理。不仔細想，三者的界限是有一些模糊的。

　　在瀏覽器渲染頁面的過程中，html可以生成DOM樹，js可以被引擎執行，css也可以生成CSSOM（css object model）樹。DOM 和 CSSOM 結合生成渲染樹。

　　“塊級元素有div、ul、p等，內聯元素有a、span、input等”，這些元素的盒模型都是CSS樣式範圍定義的，來自於瀏覽器的默認樣式設定。

3、盒模型的種類

　　<p>這是一行普通的文字，這裏有個 <em>em</em> 標簽。</p>

　　這段HTML代碼涉及到4種boxes：
　　　　1、首先是p標簽所在的containing box，此box包含了其他的boxes；（塊級盒）

　　　　2、然後就是inline boxes，如下圖標註，（行內框）

　　　　inline boxes不會讓內容成塊顯示，而是排成一行，如果外部含inline屬性的標簽(span,a等)，就屬inline boxes，如果是個光禿禿的文字，則屬於匿名inline boxes。

　　　　3、line boxes，見下圖的標註：

　　　　　　在containing boxes裏，每行一個一個的inline boxes組成了line boxes。（行框）

　　　　4、content area，見下圖標註：

　　　　　　content area 是一種圍繞文字看不見的box。content area的大小與font-size大小相關。

　　　　　content area 圍繞著文字的一種box，高度由font-size和font-family決定。在chrome控制器裏，你用鼠標誌向某個內聯元素，顯示的高度值。

4、Inline盒模型的高度得來

　　line box模型，對應樣式為”line-height”。（圖片也屬於inline boxes，但其height比line-height作用更兇猛，故其inline boxes高度等於其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個原因），而真正的高度表現則是由每行眾多的inline boxes組成的line boxes（等於內部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或是p標簽之類的高度了。

　　inline box的高度由line-height決定，一半的line-height在content area的上面，另一半在下面。line-height從content area的水平中垂線開始計算。

5、Vertical-align屬性的應用

　　垂直對齊的幾個值：top，middle，baseline，bottom。

6、IE瀏覽器Haslayout屬性

　　layout是IE/WIN裏面的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何和其他元素進行相互作用和聯系、如何響應和傳遞應用程序事件、用戶事件等；

7、瀏覽器的BFC模型

　　相對於IE的hasLayout，W3C規範中有一個BFC概念。

　　BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相幹。

二、Webkit渲染引擎

1、頁面樣式css的來源

　　1、 網頁開發者編寫的 2、讀者設置的樣式 3、瀏覽器的內置默認樣式。使用的優先級遞減。

　　在開發過程中可能存在大量不必要，多余的css reset代碼，是可以被省去的。

2、頁面渲染中的包含塊模型

　　當webkit計算元素的盒子的位置和大小時，它需要計算該元素和另一個矩形區域的相對位置，這個矩形區域被稱為元素的包含塊。

　　　　--根元素的包含塊稱為初始包含塊，大小就是可視區域（viewport）

　　　　--position屬性為static或者relative的元素，它們的包含塊就是最近祖先的盒模型的內容區域。

　　　　--position屬性為fixed，那麽該元素的包含塊脫離HTML文檔，固定在可視區域的特定位置。

　　　　--position 屬性為absolute，由最近的含有屬性為absolute、relative、或者fiexd的祖先決定。

3、移動端的三個視口viewport

　　移動端可以分為視覺視口，布局視口和理想視口。通過meta便簽，媒體查詢，js接口可以獲取或設置。是響應式涉及到基礎。

4、布局計算中的定位方案

　　由position和float屬性設置，有三種定位方案：

　　1、static、relative普通：根據對象在文檔中的位置進行定位，也就是說對象在呈現樹中的位置和它在 DOM 樹中的位置相似，並根據其框類型和尺寸進行布局，其他框會浮動在它的周圍。

　　2、float浮動：對象先按照普通流進行布局，然後盡可能地向左或向右移動。

　　3、absolute、fixed絕對：脫離文檔流對象在呈現樹中的位置和它在 DOM 樹中的位置不同。元素不參與普通流。尺寸是相對於容器而言的。在固定定位中，容器就是可視區域。

　　float: left、right、none、inherit

　　position：absolute、 fixed、 relative、 static、 inherit

5、CSS選擇器的解析

　　選擇器解析一般從右向左進行，太長的樣式嵌套，會損失性能。

CSS 樣式層與 渲染引擎 聯想