網(wǎng)頁(yè)上的元素辣么多，我該用什么辦法讓它們排列整齊、間距合理呢。常干家務(wù)的朋友們就容易理解了，用收納盒呀！
所以用CSS做網(wǎng)頁(yè)布局就涉及一個(gè)盒子的概念，簡(jiǎn)單理解，我們可以把頁(yè)面上的所有HTML元素看作一個(gè)個(gè)的盒子，網(wǎng)頁(yè)上所展示出來(lái)的具體內(nèi)容，如：文字、圖片等都可以理解為內(nèi)容，是放在盒子里面的東西。
這些裝著內(nèi)容的盒子排列在網(wǎng)頁(yè)上，盒子與盒子存在著一定的間隙，我們稱為外邊距，
每個(gè)盒子都有邊框，每條邊框都可以設(shè)置自己的樣式，邊框與內(nèi)容之間也可以存在一定的間隙，我們稱為內(nèi)邊距。
外邊距、邊框、內(nèi)邊距按順時(shí)針?lè)较蛴侄伎梢苑譃樯?、右、下、左四個(gè)部分，注意，這四個(gè)部分我們都是可以單獨(dú)設(shè)置其樣式的喲！
有圖有真相，下圖：
由上述可知，盒子由外到內(nèi)可以列出以下四個(gè)屬性：
?外邊距margin和內(nèi)邊距padding
外邊距margin和內(nèi)邊距padding以邊框?yàn)榉纸缇€，它們分四個(gè)方向可以分別設(shè)置四個(gè)不同的值，按順時(shí)針?lè)较蚍謩e是上、右、下、左，如下：
?? 外邊距：margin-top（上）、margin -right（右）、margin -bottom（下）、margin -left（左）
?? 內(nèi)邊距：padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）
具體寫(xiě)法有三種，分別如下所示（margin和padding寫(xiě)法類(lèi)似，以padding為例）：
?Border（邊框）
Border(邊框)有三個(gè)屬性值需要設(shè)置，分別為邊框的寬度（border-width）、邊框的樣式（border-style）、邊框的顏色（border-color）。
?寬度width和高度height
元素的寬度width和高度height是針對(duì)內(nèi)容而言的，不包括內(nèi)邊距（padding），可參看上面的圖示。另外，只有塊元素能設(shè)置width和height，行內(nèi)元素?zé)o法設(shè)置width和height。
示例代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css"> #div1 { display:inline-block;/*將DIV轉(zhuǎn)換為inline-block元素*/ border:1px solid green;/*設(shè)置外層DIV的邊框樣式*/
} #div2 { display:inline-block; /*將DIV轉(zhuǎn)換為inline-block元素*/ padding:40px 80px;/*設(shè)置內(nèi)邊距上下為40px,左右為80px*/ margin-top:40px;/*設(shè)置外邊距上為40px*/ margin-right:60px;/*設(shè)置外邊距右為60px*/ margin-bottom:80px;/*設(shè)置外邊距下為80px*/ margin-left:100px;/*設(shè)置外邊距左為100px*/
/*另一寫(xiě)法：margin:40px 60px 80px 100px;順時(shí)針?lè)较?/ border:5px dotted red;/*DIV的邊框?qū)挾葹?px、樣式為點(diǎn)線、顏色為紅*/ background-color:#FCE9B8;/*設(shè)置背景色*/
} span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="div1">
<div id="div2"><span>CSS盒子模型</span></div>
</div>
</body>
</html>
運(yùn)行效果：
上圖是實(shí)際的運(yùn)行效果，有點(diǎn)太單薄，加上點(diǎn)注釋說(shuō)明，下圖：
自己整理了一份最全前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS [炫酷特效，游戲，插件封裝，設(shè)計(jì)模式]到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有，送給每一位前端小伙伴。企鵝裙：685910553（前端資料分享）。有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)。
