盒模型
在css布局的編寫中，盒模型的概念必須要搞清楚，才能更好的體現出前端**的能力。在此之前，我們需要弄清楚幾個名詞。
包含塊包含塊對於浮動元素來說，定義為最近的塊級祖先元素，但對於定位來說，情況則沒有這麼簡單，css2.1定義了一下行為：
「根元素」的包含塊（也稱為初始包含塊）由使用者**建立，在html中，根元素就是html元素，不過有些瀏覽器會使用body作為根元素。在大多數瀏覽器中，初始包含塊就是乙個視窗大小的矩形。
-對於乙個非根元素，如果其position值是relative或static，包含塊則由最近的塊級樞、表單元格或行內塊級祖先的內容邊界構成。
對於乙個非根元素，如果其position值是absolute，包含塊設定為最近的position值不是static的祖先元素（可以是任何型別），這個過程如下：
<1>.如果這個祖先是塊級元素，包含塊則設定為該元素的內邊距邊界，換句話說，就是由邊框界定的區域。
<2>.如果這個祖先是行內元素，包含塊則設定為該祖先元素的內容邊界，在從左向右讀的語言中，包含塊的上邊界和左邊界是該祖先元素中第乙個框內容區的上邊界和左邊界，包含塊的下邊界和右邊界是最後乙個內容區的下邊界和右邊界。在從有向左讀的語言中，包含塊的右邊界對應於第乙個樞的右內容邊界，包含塊的右邊界則取自最後乙個樞的左內容邊界。上下邊界也是一樣。
<3>.如果沒有祖先元素，元素的包含塊定義為初始包含塊
聖杯布局
聖杯布局是前端工程師面試的常見試題，是體現乙個前端工程師水準的經典布局。聖杯布局的主要口訣為：兩邊固定，當中自適應；當中列要完整顯示；當中列要優先載入。
對於聖杯布局的學習，我有一些總結：
關於浮動：搭建完整的布局框架。
margin為負值：調整旁邊兩列的位置，使三列布局到一行上。
使用相對定位，調整旁邊兩列的位置，是兩列位置調整到兩頭。
下面聖杯布局的**：
header
middle
left
right
footer
css布局之聖杯布局
聖杯布局 都為了實現乙個兩側寬度固定，中間寬度自適應的三欄布局。中間先載入渲染 實現思路 使用float布局框架 用margin為負值 position relative定位 優點 1 相容性好，相容若有主流瀏覽器，包括萬惡的ie6 2 可以實現主要內容的優先載入 實現 如下 div class c...
CSS盒模型與布局
1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行，允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們...