一、 盒模型的概念和組成
盒模型是css布局的基石糠雨，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系料滥。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框讳推、邊界顶籽、補(bǔ)白、內(nèi)容區(qū)银觅，這就是盒模型礼饱。
二、 padding的使用方法
填充：padding,在設(shè)定頁面中一個(gè)元素內(nèi)容到元素的邊緣(邊框) 之間的距離究驴。 也稱補(bǔ)白镊绪。
用法：
1）用來調(diào)整內(nèi)容在容器中的位置關(guān)系
2）用來調(diào)整子元素在父元素中的位置關(guān)系。
注：padding屬性需要添加在父元素上洒忧。
3）padding值是額外加在元素原有大小之上的蝴韭，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性熙侍。
?padding的屬性值的4種方式：
? 四個(gè)值：上?? 右?? 下?? 左 {padding:10px?? 20px?? 30px??? 40px;}
? 三個(gè)值：上??? 左右??? 下? {padding:10px?? 20px?? 30px ;}
? 二個(gè)值：上下??? 左右????? {padding:10px?? 20px? ;}
? 一個(gè)值：四個(gè)方向????????? {padding:2px; }???????? /? *定義元素四周填充為2px*/
? 說明：可單獨(dú)設(shè)置一方向填充榄鉴，如：padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;
三、 margin的使用方法
? 邊界：margin,在元素外邊的空白區(qū)域蛉抓，被稱為邊距牢硅。
margin值得作用：控制同輩元素之間的位置關(guān)系；
? 屬性值的4種方式：
? 四個(gè)值：上 右 下 左?? margin:2px 4px 6px 8px;??? /*定義元素上芝雪、右邊界為2px，下右邊界為6px综苔，左邊界為8px*/
? 三個(gè)值：上 左右 下??? margin:2px 4px 6px;?????????? /*定義元素上邊界為2px惩系，左右邊界4px下邊界為6px位岔，*/
? 二個(gè)值：上下 左右???? margin:2px 4px;????????????????? /*定義元素上下邊界為2px，左右邊界為4px/
? 一個(gè)值：四個(gè)方向????? margin:2px????????????????????????? /*定義元素四邊邊界為2px*/
說明：可單獨(dú)設(shè)置一方向邊界堡牡，如：margin-top:10px;
?margin:0 auto;??????????????????? /*定義元素在瀏覽器中橫向居中抒抬。*/
margin:-200px 0 0 -100px;
margin可寫負(fù)值
四、 border(邊框)的使用方法
作用：網(wǎng)頁中很多修飾性的線條都是由邊框來實(shí)現(xiàn)晤柄；
??????? 邊框?qū)挾龋?border-width：2px;
??????? 邊框樣式：border-style：solid(實(shí)線)/ dotted（點(diǎn)）/ dashed（虛線）/ double（雙邊線）/none(取消邊框)擦剑；
??????? 邊框顏色：border-color：#ff0f0f;
border-width:1px ;border-style:solid ; border-color:#f00;
縮寫：border:1px solid #f00;
可單獨(dú)設(shè)置一方向邊框，
如：border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;???? 底邊框
border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;????????????????? 左邊框
border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;?????????????? 右邊框
border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;????????????????? 上邊框
五芥颈、盒子的實(shí)際大谢堇铡（公式）：
寬 =左右margin+左右border+左右padding+width
高 =上下margin+上下border+上下padding+height
例如：一個(gè)盒子的 margin 為 20px，border 為 1px爬坑，padding 為 10px纠屋，content 的寬為 200px、高為 50px
