網(wǎng)頁上的元素辣么多庐镐，我該用什么辦法讓它們排列整齊恩商、間距合理呢。常干家務(wù)的朋友們就容易理解了必逆，用收納盒呀怠堪！
所以用CSS做網(wǎng)頁布局就涉及一個盒子的概念，簡單理解名眉，我們可以把頁面上的所有HTML元素看作一個個的盒子粟矿，網(wǎng)頁上所展示出來的具體內(nèi)容，如：文字损拢、圖片等都可以理解為內(nèi)容陌粹，是放在盒子里面的東西。
這些裝著內(nèi)容的盒子排列在網(wǎng)頁上福压，盒子與盒子存在著一定的間隙掏秩，我們稱為外邊距，
每個盒子都有邊框荆姆，每條邊框都可以設(shè)置自己的樣式蒙幻，邊框與內(nèi)容之間也可以存在一定的間隙，我們稱為內(nèi)邊距胆筒。
外邊距邮破、邊框、內(nèi)邊距按順時針方向又都可以分為上腐泻、右决乎、下队询、左四個部分派桩，注意，這四個部分我們都是可以單獨設(shè)置其樣式的喲蚌斩！
有圖有真相铆惑，下圖：
由上述可知，盒子由外到內(nèi)可以列出以下四個屬性：
?外邊距margin和內(nèi)邊距padding
外邊距margin和內(nèi)邊距padding以邊框為分界線，它們分四個方向可以分別設(shè)置四個不同的值员魏，按順時針方向分別是上丑蛤、右、下撕阎、左受裹，如下：
?? 外邊距：margin-top（上）、margin -right（右）虏束、margin -bottom（下）棉饶、margin -left（左）
?? 內(nèi)邊距：padding-top（上）、padding-right（右）镇匀、padding-bottom（下）照藻、padding-left（左）
具體寫法有三種，分別如下所示（margin和padding寫法類似汗侵，以padding為例）：
?Border（邊框）
Border(邊框)有三個屬性值需要設(shè)置幸缕，分別為邊框的寬度（border-width）、邊框的樣式（border-style）晰韵、邊框的顏色（border-color）发乔。
?寬度width和高度height
元素的寬度width和高度height是針對內(nèi)容而言的，不包括內(nèi)邊距（padding）雪猪，可參看上面的圖示列疗。另外，只有塊元素能設(shè)置width和height浪蹂，行內(nèi)元素無法設(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*/
/*另一寫法：margin:40px 60px 80px 100px;順時針方向*/ border:5px dotted red;/*DIV的邊框?qū)挾葹?px、樣式為點線坤次、顏色為紅*/ 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>
運行效果：
上圖是實際的運行效果古劲，有點太單薄，加上點注釋說明缰猴，下圖：
自己整理了一份最全前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS [炫酷特效产艾，游戲，插件封裝滑绒，設(shè)計模式]到移動端HTML5的項目實戰(zhàn)的學(xué)習(xí)資料都有闷堡，送給每一位前端小伙伴。企鵝裙：685910553（前端資料分享）疑故。有想學(xué)習(xí)web前端的杠览，或是轉(zhuǎn)行，或是大學(xué)生纵势，還有工作中想提升自己能力的踱阿，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)管钳。
