CSS 樣式層與 渲染引擎 聯想

1、CSS 樣式層聯想

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

　　一、並不是不支持Display: inline-block;

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

　　

　　IE 5.五、六、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;

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

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

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

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

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

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

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

三、盒模型的種類

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

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

　　　　二、而後就是inline boxes，以下圖標註，（行內框）

 　　　　

 

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

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

 　　　　　　

 

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

　　　　四、content area，見下圖標註：

 　　　　　　

 

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

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

四、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的水平中垂線開始計算。

五、Vertical-align屬性的應用

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

　　

六、IE瀏覽器Haslayout屬性

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

七、瀏覽器的BFC模型

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

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

2、Webkit渲染引擎

一、頁面樣式css的來源

 

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

 

　　在開發過程當中可能存在大量沒必要要，多餘的css reset代碼，是能夠被省去的。

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

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

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

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

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

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

三、移動端的三個視口viewport

　　移動端能夠分爲視覺視口，佈局視口和理想視口。經過meta便籤，媒體查詢，js接口能夠獲取或設置。是響應式涉及到基礎。

 

四、佈局計算中的定位方案

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

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

　　二、float浮動：對象先按照普通流進行佈局，而後儘量地向左或向右移動。

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

　　float: left、right、none、inherit

　　position：absolute、 fixed、 relative、 static、 inherit

五、CSS選擇器的解析

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