1. 盒模型的概念
css框模型（也被稱為「盒模型」）是網頁布局的基礎，每個元素被表示為乙個矩形的方框，包括框的內容（content），內邊距（padding），邊界（border），外邊距（margin），如下圖所示。瀏覽器在渲染網頁布局時，會計算出每個框的內容要用什麼樣式，框的邊距有多大，以及框相對於其他框放在**。
需要注意的是，我們在設定元素的width和height屬性時，設定的是內容框（content box）的寬度和高度。內容框是框內容顯示的區域——包括框內的文字內容，以及表示巢狀子元素的其他框。
整個盒子的寬度=border-left-width + padding-left + width + padding-right + border-right + border-right-width
注：外邊距又乙個特別地行為稱為「外邊距塌陷」；即當兩個框彼此接觸時，它們的間距將取兩個相鄰邊界的最大值，而非兩者的總和。
2. inline、block和inline-block的概念
塊框（block）是定義為堆放在其他框上的框（其內容會獨佔一行），而且可以設定它的寬高，之前所有對於框模型的應用適用於塊框（block box）；
行內框（inline box）與塊框是相反的，它隨著文件的文字而流動，（例如：它將會和周圍的文字和其他行內元素出現在同一行）對行內框設定寬高是無效的，設定padding，margin，和border都會更新周圍文字的位置，但是對於周圍的塊框不會有影響；
行內塊狀框（inline-block box）像是上述兩種的集合，它不會重新另起一行但會像行內框（inline box）一樣隨著周圍文字而流動，而且它能夠設定寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落中斷開。
3. 內外邊距，寬度，高度，box-sizing等屬性
padding-top
margin-top
padding-right
margin-right
padding-bottom
margin-bottom
padding-left
margin-left
這八個屬性一次設定乙個邊，當然，也可以通過簡寫屬性padding，margin一次性設定四個邊。
border-top
border-right
border-bottom
border-left
這四個屬性分別設定某一邊的邊界厚度/風格/顏色。
border-width
border-style
border-color
這四個屬性僅設定便捷的厚度/風格/顏色，並應用到全部四邊邊界，也可以單獨設定某乙個邊的三個不同屬性，如border-top
-width,border-top
-style,border-top
-color等
width和height設定了內容框的寬和高
max-width,min
-width,max
-height,min
-height這些屬性可以用來更靈活的控制內容盒的大小，通過設定大小約束，而不是設定乙個絕對大小。
style="clear:both">
div>clear屬性有三個值，
web前端（三） CSS布局之雙飛翼 聖杯布局
所謂的 三欄布局 即 左右兩欄固定寬度，中間部分自適應的布局方式。雙飛翼與聖杯布局的相同點 實現方式 container class main middlediv class left leftdiv class right rightdiv div 實現方式 container class mai...
CSS布局 三欄布局
題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...
CSS布局 三欄布局
css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...