盒子模型
前言
盒子模型，英文即box model记靡。無(wú)論是div谈竿、span、還是a都是盒子摸吠。
但是空凸，圖片、表單元素一律看作是文本寸痢，它們并不是盒子劫恒。這個(gè)很好理解，比如說(shuō)轿腺，一張圖片里并不能放東西两嘴，它自己就是自己的內(nèi)容。
盒子中的區(qū)域
一個(gè)盒子中主要的屬性就5個(gè)：width族壳、height憔辫、padding、border仿荆、margin贰您。如下：
- width和height：內(nèi)容的寬度、高度（不是盒子的寬度拢操、高度）锦亦。
- padding：內(nèi)邊距。
- border：邊框令境。
- margin：外邊距杠园。
盒子模型的示意圖：
代碼演示：
上面這個(gè)盒子，width:200px; height:200px; 但是真實(shí)占有的寬高是302*302舔庶。 這是因?yàn)檫€要加上padding抛蚁、border陈醒。
注意：寬度和真實(shí)占有寬度，不是一個(gè)概念瞧甩！來(lái)看下面這例子钉跷。
標(biāo)準(zhǔn)盒模型和IE盒模型
我們目前所學(xué)習(xí)的知識(shí)中，以標(biāo)準(zhǔn)盒子模型為準(zhǔn)肚逸。
標(biāo)準(zhǔn)盒子模型：
IE盒子模型：
上圖顯示：
在 CSS 盒子模型 (Box Model) 規(guī)定了元素處理元素的幾種方式：
- width和height：內(nèi)容的寬度爷辙、高度（不是盒子的寬度、高度）朦促。
- padding：內(nèi)邊距膝晾。
- border：邊框。
- margin：外邊距思灰。
CSS盒模型和IE盒模型的區(qū)別：
在 <font color="#0000FF">標(biāo)準(zhǔn)盒子模型</font>中玷犹，<font color="#0000FF">width 和 height 指的是內(nèi)容區(qū)域</font>的寬度和高度混滔。增加內(nèi)邊距洒疚、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸坯屿。
<font color="#0000FF">IE盒子模型</font>中油湖，<font color="#0000FF">width 和 height 指的是內(nèi)容區(qū)域+border+padding</font>的寬度和高度。
注：Android中也有margin和padding的概念领跛，意思是差不多的乏德，如果你會(huì)一點(diǎn)Android，應(yīng)該比較好理解吧吠昭。區(qū)別在于喊括，Android中沒(méi)有border這個(gè)東西，而且在Android中矢棚，margin并不是控件的一部分郑什。
<body>標(biāo)簽也有margin
<body>標(biāo)簽有必要強(qiáng)調(diào)一下。很多人以為<body>標(biāo)簽占據(jù)的是整個(gè)頁(yè)面的全部區(qū)域蒲肋，其實(shí)是錯(cuò)誤的蘑拯，正確的理解是這樣的：整個(gè)網(wǎng)頁(yè)最大的盒子是<document>，即瀏覽器兜粘。而<body>是<document>的兒子申窘。瀏覽器給<body>默認(rèn)的margin大小是8個(gè)像素，此時(shí)<body>占據(jù)了整個(gè)頁(yè)面的一大部分區(qū)域孔轴，而不是全部區(qū)域剃法。來(lái)看一段代碼。
<!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>
上面的代碼中路鹰，我們對(duì)div標(biāo)簽設(shè)置了邊距等信息玄窝。打開(kāi)google瀏覽器牵寺，按住F12，顯示效果如下：
認(rèn)識(shí)width恩脂、height
一定要知道帽氓，在前端開(kāi)發(fā)工程師眼中，世界中的一切都是不同的俩块。
比如說(shuō)黎休，丈量稿紙，前端開(kāi)發(fā)工程師只會(huì)丈量?jī)?nèi)容寬度：
下面這兩個(gè)盒子玉凯，真實(shí)占有寬高势腮，都是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;
}
真實(shí)占有寬度 = 左border + 左padding + width + 右padding + 右border
上面這兩個(gè)盒子的盒模型圖如下：
如果想保持一個(gè)盒子的真實(shí)占有寬度不變，那么加width的時(shí)候就要減padding漫仆。加padding的時(shí)候就要減width捎拯。因?yàn)楹凶幼兣至耸菫?zāi)難性的，這會(huì)把別的盒子擠下去盲厌。
認(rèn)識(shí)padding
padding區(qū)域也有顏色
padding就是內(nèi)邊距署照。padding的區(qū)域有背景顏色，css2.1前提下吗浩，并且背景顏色一定和內(nèi)容區(qū)域的相同建芙。也就是說(shuō)，background-color將填充所有border以?xún)?nèi)的區(qū)域懂扼。
效果如下：
padding有四個(gè)方向
padding是4個(gè)方向的禁荸，所以我們能夠分別描述4個(gè)方向的padding。
方法有兩種阀湿，第一種寫(xiě)小屬性赶熟；第二種寫(xiě)綜合屬性，用空格隔開(kāi)陷嘴。
小屬性的寫(xiě)法：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
綜合屬性的寫(xiě)法：(上映砖、右、下罩旋、左)（順時(shí)針?lè)较虬⊙耄每崭窀糸_(kāi)。margin的道理也是一樣的）
padding:30px 20px 40px 100px;
如果寫(xiě)了四個(gè)值涨醋，則順序?yàn)椋荷瞎霞ⅰ⒂摇⑾略÷睢⒆蟆?br> 如果只寫(xiě)了三個(gè)值乓土，則順序?yàn)椋荷稀⒂液妥蟆⑾隆?br> 如果只寫(xiě)了兩個(gè)值趣苏，則順序?yàn)椋荷虾拖陆葡唷⒆蠛陀摇?br> 比如說(shuō)：
padding: 30px 40px;
則順序等價(jià)于：30px 40px 30px 40px;
要懂得，用小屬性層疊大屬性食磕。比如：
padding: 20px;
padding-left: 30px;
上面的padding對(duì)應(yīng)盒子模型為：
下面的寫(xiě)法：
padding-left: 30px;
padding: 20px;
第一行的小屬性無(wú)效尽棕，因?yàn)楸坏诙械拇髮傩詫盈B掉了。
下面的題彬伦，會(huì)做了滔悉，說(shuō)明你明白了。
一些題目
題目1：說(shuō)出下面盒子真實(shí)占有寬高单绑，并畫(huà)出盒模型圖回官。
div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}
答案：
題目2：說(shuō)出下面盒子真實(shí)占有寬高，并畫(huà)出盒模型圖搂橙。
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; 沒(méi)用，因?yàn)楹竺娴膒adding大屬性区转，層疊掉了他們苔巨。
盒子模型如下：
題目3：現(xiàn)在給你一個(gè)盒子模型圖，請(qǐng)寫(xiě)出代碼蜗帜，試著用最最簡(jiǎn)單的方法寫(xiě)恋拷。
答案：
width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;
題目4：現(xiàn)在給你一個(gè)盒子模型圖资厉，請(qǐng)寫(xiě)出代碼厅缺，試著用最最簡(jiǎn)單的方法寫(xiě)。
答案：
width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;
一些元素宴偿，默認(rèn)帶有padding
一些元素湘捎，默認(rèn)帶有padding，比如ul標(biāo)簽窄刘。如下：
上圖顯示窥妇，不加任何樣式的ul，也是有40px的padding-left娩践。
所以活翩，我們做站的時(shí)候，為了便于控制翻伺，總是喜歡清除這個(gè)默認(rèn)的padding材泄。
可以使用
*進(jìn)行清除：
*{
margin: 0;
padding: 0;
}
但是，*的效率不高吨岭，所以我們使用并集選擇器拉宗，羅列所有的標(biāo)簽（不用背，有專(zhuān)業(yè)的清除默認(rèn)樣式的樣式表，今后學(xué)習(xí)）：
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;
}
認(rèn)識(shí)border
border就是邊框旦事。邊框有三個(gè)要素：像素（粗細(xì)）魁巩、線型、顏色姐浮。
比如：
.div1{
width: 10px;
height: 10px;
border: 2px solid red;
}
顏色如果不寫(xiě)谷遂，默認(rèn)是黑色。另外兩個(gè)屬性如果不寫(xiě)卖鲤，則無(wú)法顯示邊框埋凯。
border-style
border的所有的線型如下：（我們可以通過(guò)查看CSS參考手冊(cè)得到）
比如border:10px ridge red;這個(gè)屬性，在chrome和firefox扫尖、IE中有細(xì)微差別：（因?yàn)榭梢燥@示出效果白对，因此并不是兼容性問(wèn)題，只是有細(xì)微差別而已）
如果公司里面的設(shè)計(jì)師是處女座的换怖，追求極高的頁(yè)面還原度甩恼，那么不能使用css來(lái)制作邊框。就要用到圖片沉颂，就要切圖了条摸。
所以，比較穩(wěn)定的border-style就幾個(gè)：solid铸屉、dashed钉蒲、dotted。
border拆分
border是一個(gè)大綜合屬性彻坛。比如說(shuō)：
border:1px solid red;
就是把上下左右這四個(gè)方向的邊框顷啼，都設(shè)置為 1px 寬度、線型實(shí)線昌屉、red顏色钙蒙。
PS：小技巧：在sublime text中，為了快速輸入border:1px solid red;這個(gè)屬性间驮，可以直接輸入bd躬厌，然后選第二個(gè)后回車(chē)。
border屬性是能夠被拆開(kāi)的竞帽，有兩大種拆開(kāi)的方式：
- （1）按三要素拆開(kāi)：border-width扛施、border-style、border-color屹篓。（一個(gè)border屬性是由三個(gè)小屬性綜合而成的）
- （2）按方向拆開(kāi)：border-top疙渣、border-right、border-bottom抱虐、border-left昌阿。
現(xiàn)在我們明白了：一個(gè)border屬性，是由三個(gè)小屬性綜合而成的。如果某一個(gè)小屬性后面是空格隔開(kāi)的多個(gè)值懦冰，那么就是上右下左的順序灶轰。舉例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
效果如下：
（1）按三要素拆：
border-width:10px; //邊框?qū)挾?border-style:solid; //線型
border-color:red; //顏色。
等價(jià)于：
border:10px solid red;
(2)按方向來(lái)拆：
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等價(jià)于：
border:10px solid red;
（3）按三要素和方向來(lái)拆：(就是把每個(gè)方向的刷钢，每個(gè)要素拆開(kāi)笋颤。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;
等價(jià)于：
border:10px solid red;
工作中到底用什么？很簡(jiǎn)答：什么簡(jiǎn)單用什么内地。但要懂得伴澄，用小屬性層疊大屬性。舉例如下：
為了實(shí)現(xiàn)上方效果阱缓，寫(xiě)法如下：
border:10px solid red;
border-right-color:blue;
為了實(shí)現(xiàn)上方效果非凌，寫(xiě)法如下：
border:10px solid red;
border-style:solid dashed;
border可以沒(méi)有：
border:none;
可以某一條邊沒(méi)有：
border-left: none;
也可以調(diào)整左邊邊框的寬度為0：
border-left-width: 0;
border-image 屬性
比如：
border-image: url(.img.png) 30 round;
這個(gè)屬性在實(shí)際開(kāi)發(fā)中用得不多，暫時(shí)忽略荆针。
舉例1：利用 border 屬性畫(huà)一個(gè)三角形（小技巧）
完整代碼如下：
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
border-bottom: none;
}
步驟如下：
（1）當(dāng)我們?cè)O(shè)置盒子的width和height為0時(shí)敞嗡，此時(shí)效果如下：
（2）然后將border的底部取消：
（3）最后設(shè)置border的左邊和右邊為白色或者透明：
這樣，一個(gè)三角形就畫(huà)好了航背。
舉例2：利用 border 屬性畫(huà)一個(gè)三角形（更推薦的技巧）
上面的例子1中喉悴，畫(huà)出來(lái)的是直角三角形，可如果我想畫(huà)等邊三角形玖媚，要怎么做呢箕肃？
完整代碼如下：（用 css 畫(huà)等邊三角形）
.div1{
width: 0;
height: 0;
border-top: 30px solid red;
/* 通過(guò)改變 border-left 和 border-right 中的像素值，來(lái)改變?nèi)切蔚男螤?*/
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
效果如下：
另外今魔，我們?cè)谏戏酱a的基礎(chǔ)之上勺像，再加一個(gè) border-radus: 20px; 就能畫(huà)出一個(gè)扇形。
