CSS布局中的問題

1. 高度自適應的問題

1. 乙個元素是否可以使用百分比顯示，取決於它的父級元素，所以如果需要給此元素設定100%，那麼需要先給父元素設定高100%。

2. 一級元素的父元素是body，所以如果我們想讓高度100%的話，那就給body設定高100%，但是又因為body的父元素是html，所以我們同時也要給html高設定成100%。

2. 什麼是盒模型

就是每個盒子都由內容(content)、填充(padding)、邊框(border)、邊界(margin)

3. 上下margin疊加的由來

css設計者考慮到我們要對段落進行控制，比如多個p標籤，如果這些p標籤都具備margin屬性的話，那麼它們中的第乙個段落距離頂部的外邊距是10px，而後面的其他p標籤具離頂部都是20px，這樣的話排版就不一致，所以設計出這種空白邊距疊加規則。

4. 解決margin上下疊加問題

設定：float

追夢子部落格。

5. ie6左右margin加倍問題以及解決

單我們將乙個盒模型設定成float以後如果有左右margin那麼這個margin會是雙倍的，解決方法：設定display:inline;

6. 文件流

元素的排列方式

7. 文字圍繞浮動之謎

現象1、為什麼ie6下非浮動元素不會被浮動元素覆蓋？

在ie中有特有的haslayout規則，當乙個元素擁有了布局，那麼它忽略浮動元素應該占有的空間，所以它不會被覆蓋，而是排列在浮動元素的右側。布局就是給元素新增了寬，高等。解決方法就是不去觸發ie的haslayout。

現象2、為什麼在ie8等瀏覽器下，雖然非浮動元素按照我們的理解，它是被浮動元素覆蓋了，但是它包含的文字為什麼不會被覆蓋，而是圍繞浮動元素呢？

浮動只會佔據文字的，而不會佔據塊級元素。可以這樣理解，但是從原理是不是這樣，技術有限請自行查資料。

8. z-index的由來

由於當我們使用了定位屬性position以後，那麼這個元素將脫離了文件流，並且這個定位的元素總是會覆蓋前面的元素，所以設計者設計了z-index用來自由的改變覆蓋的順序。