盒子模型
前言
盒子模型，英文即box model。無論是div、span、還是a都是盒子。
但是，圖片、表單元素一律看作是文本，它們並不是盒子。這個很好理解，比如說，一張圖片里並不能放東西，它自己就是自己的內容。
盒子中的區域
一個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：
- width和height：內容的寬度、高度（不是盒子的寬度、高度）。
- padding：內邊距。
- border：邊框。
- margin：外邊距。
盒子模型的示意圖：
代碼演示：
上面這個盒子，width:200px; height:200px; 但是真實占有的寬高是302*302。 這是因為還要加上padding、border。
注意：寬度和真實占有寬度，不是一個概念！來看下面這例子。
標准盒模型和IE盒模型
我們目前所學習的知識中，以標准盒子模型為准。
標准盒子模型：
IE盒子模型：
上圖顯示：
在 CSS 盒子模型 (Box Model) 規定了元素處理元素的幾種方式：
- width和height：內容的寬度、高度（不是盒子的寬度、高度）。
- padding：內邊距。
- border：邊框。
- margin：外邊距。
CSS盒模型和IE盒模型的區別：
-
在 標准盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
-
IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你會一點Android，應該比較好理解吧。區別在於，Android中沒有border這個東西，而且在Android中，margin並不是控件的一部分，我覺得這樣做更合理一些，呵呵。
<body>標簽也有margin
<body>標簽有必要強調一下。很多人以為<body>標簽占據的是整個頁面的全部區域，其實是錯誤的，正確的理解是這樣的：整個網頁最大的盒子是<document>，即瀏覽器。而<body>是<document>的兒子。瀏覽器給<body>默認的margin大小是8個像素，此時<body>占據了整個頁面的一大部分區域，而不是全部區域。來看一段代碼。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狹路相逢</div>
</body>
</html>
上面的代碼中，我們對div標簽設置了邊距等信息。打開google瀏覽器，按住F12，顯示效果如下：
認識width、height
一定要知道，在前端開發工程師眼中，世界中的一切都是不同的。
比如說，丈量稿紙，前端開發工程師只會丈量內容寬度：
下面這兩個盒子，真實占有寬高，都是302*302：
盒子1：
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}
盒子2：
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}
真實占有寬度 = 左border + 左padding + width + 右padding + 右border
上面這兩個盒子的盒模型圖如下：
如果想保持一個盒子的真實占有寬度不變，那么加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去。
認識padding
padding區域也有顏色
padding就是內邊距。padding的區域有背景顏色，css2.1前提下，並且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有border以內的區域。
效果如下：
padding有四個方向
padding是4個方向的，所以我們能夠分別描述4個方向的padding。
方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。
小屬性的寫法：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
綜合屬性的寫法：(上、右、下、左)（順時針方向，用空格隔開。margin的道理也是一樣的）
padding:30px 20px 40px 100px;
如果寫了四個值，則順序為：上、右、下、左。
如果只寫了三個值，則順序為：上、右、下。??和右一樣。
如果只寫了兩個值，比如說：
padding: 30px 40px;
則順序等價於：30px 40px 30px 40px;
要懂得，用小屬性層疊大屬性。比如：
padding: 20px;
padding-left: 30px;
上面的padding對應盒子模型為：
下面的寫法：
padding-left: 30px;
padding: 20px;
第一行的小屬性無效，因為被第二行的大屬性層疊掉了。
下面的題，會做了，說明你明白了。
一些題目
題目1：說出下面盒子真實占有寬高，並畫出盒模型圖。
div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}
答案：
題目2：說出下面盒子真實占有寬高，並畫出盒模型圖。
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}
答案：
padding-left:10px； 和padding-right:20px; 沒用，因為后面的padding大屬性，層疊掉了他們。
盒子模型如下：
題目3：現在給你一個盒子模型圖，請寫出代碼，試着用最最簡單的方法寫。
答案：
width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;
題目4：現在給你一個盒子模型圖，請寫出代碼，試着用最最簡單的方法寫。
答案：
width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;
一些元素，默認帶有padding
一些元素，默認帶有padding，比如ul標簽。如下：
上圖顯示，不加任何樣式的ul，也是有40px的padding-left。
所以，我們做站的時候，為了便於控制，總是喜歡清除這個默認的padding。
可以使用*進行清除：
*{
margin: 0;
padding: 0;
}
但是，*的效率不高，所以我們使用並集選擇器，羅列所有的標簽（不用背，有專業的清除默認樣式的樣式表，今后學習）：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
認識border
border就是邊框。邊框有三個要素：像素（粗細）、線型、顏色。
顏色如果不寫，默認是黑色。另外兩個屬性不寫，要命了，顯示不出來邊框。
border-style
border的所有的線型如下：（我們可以通過查看CSS參考手冊得到）
比如border:10px ridge red;這個屬性，在chrome和firefox、IE中有細微差別：（因為可以顯示出效果，因此並不是兼容性問題，只是有細微差別而已）
如果公司里面的設計師是處女座的，追求極高的頁面還原度，那么不能使用css來制作邊框。就要用到圖片，就要切圖了。
所以，比較穩定的border-style就幾個：solid、dashed、dotted。
border拆分
border是一個大綜合屬性。比如說：
border:1px solid red;
就是把4個邊框，都設置為1px寬度、線型實線、red顏色。
PS：小技巧：在sublime text中，為了快速輸入border:1px solid red;這個屬性，可以直接輸入bd，然后選第二個后回車。
border屬性是能夠被拆開的，有兩大種拆開的方式：
-
（1）按三要素拆開：border-width、border-style、border-color。（一個border屬性是由三個小屬性綜合而成的）
-
（2）按方向拆開：border-top、border-right、border-bottom、border-left。
現在我們明白了：一個border屬性，是由三個小屬性綜合而成的。如果某一個小屬性后面是空格隔開的多個值，那么就是上右下左的順序。舉例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
效果如下：
（1）按三要素拆：
border-width:10px; //邊框寬度
border-style:solid; //線型
border-color:red; //顏色。
等價於：
border:10px solid red;
(2)按方向來拆：
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等價於：
border:10px solid red;
（3）按三要素和方向來拆：(就是把每個方向的，每個要素拆開。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等價於：
border:10px solid red;
工作中到底用什么？很簡答：什么簡單用什么。但要懂得，用小屬性層疊大屬性。舉例如下：
為了實現上方效果，寫法如下：
border:10px solid red;
border-right-color:blue;
為了實現上方效果，寫法如下：
border:10px solid red;
border-style:solid dashed;
border可以沒有：
border:none;
可以某一條邊沒有：
border-left: none;
也可以調整左邊邊框的寬度為0：
border-left-width: 0;
舉例：利用border屬性畫一個三角形（小技巧）
步驟如下：
（1）當我們設置盒子的width和height為0時，此時效果如下：
（2）然后將border的底部取消：
（3）最后設置border的左邊和右邊為白色：
這樣，一個三角形就畫好了。
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：千古壹號（id：qianguyihao）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
