盒模型就是把html元素看成乙個矩形盒子，是盛放內容的容器。
盒模型包括：邊框border、外邊距margin、內邊距padding、實際內容content。
邊框寬度（粗細）
border-width
常用px作單位。
邊框樣式
border-style
常用：solid實線、dashed虛線、dotted點線、none無。
邊框顏色
border-color
復合寫法： border: 寬度 樣式 顏色; 沒有順序要求
border-top: 寬度 樣式 顏色;
**細線邊框 table,td 會顯示成兩層邊框
加上border-collapse: collapse; 可以坍塌合併成一層邊框
其後可以跟1到4個值
1個值：上下左右內邊距
2個值：上下內距 + 左右內距
3個值：上內距 + 左右內距 + 下內距
4個值：上內距 + 右內距 + 下內距 + 左內距 （順時針）
padding的應用：
給字數不同的導航欄（橫向）設定寬度，用padding比直接用width美觀。
盒子與盒子之間的距離。
其後可以跟1到4個值
1個值：上下左右外邊距
2個值：上下外距 + 左右外距
3個值：上外距 + 左右外距 + 下外距
4個值：上外距 + 右外距 + 下外距 + 左外距 （順時針）
margin的應用：
塊級盒子水平居中：①盒子必須設定寬度；②將左右margin設定成auto。
（ 寫作margin:auto; 或margin: 0 auto; ）
行內元素、行內塊元素不能使用上述方法，但可以對其父元素設定align:center; 。
如果盒子本身有寬高，再設定border、padding、margin都會影響盒子大小。若要保持盒子大小，通常縮小盒子本身的寬高。
如果盒子本身沒有寬高，padding不會撐開盒子。
*此外，由於行內元素的上下邊距通常不生效，為照顧其相容性，不要對行內元素設定上下內外邊距，盡量只設定其左右內外邊距。
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...
CSS基本知識3 CSS盒模型
box sizing content box border box inherit 值 描述content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是...