一、盒模型
把html網頁中的所有标簽都當作一個盒子，通過盒子的内容（width寬、height高）、内邊距（padding）、邊框（border）、外邊距（margin），來給每個盒子設定特定的樣式屬性。
1、盒模型的描述：
width和height：内容的寬度、高度 ( 指的是盒子的空間 )。
padding：内邊距。
border：邊框。
margin：外邊距。
2、盒子的内容：
指盒子不算邊框 邊距的 空間 就是盒子的内容，用width、height來表示。
3、内邊距 padding
a、使用方法一：
内邊距padding 可以設定一個或者多個值 這種屬性我們成為是複合屬性
b、使用方法二：
四個方向的内邊距可以單獨設定
padding-left: 左邊距
padding-right: 右邊距
padding-top: 上邊距
padding-bottom: 下邊距
4、邊框 border：
a、邊框 border 為複合屬性
border: red solid 20px;
代表四個方向的邊框都相同。
b、可以使用以下複合屬性對邊框進行設定：
border-left:red solid 20px; 左邊框
border-right:red solid 20px; 右邊框
border-top:red solid 20px; 上邊框
border-bottom:red solid 20px; 下邊框
c、邊框border 以及四個方向的border-left border-top border-right border-bottom 都需要設定三個值 順序 代表邊框的 寬度 樣式 顔色
每個方向單獨可以設定
border-width:20px; 一個值 四個邊的寬度
border-style:solid; 一個值 四個邊的樣式 實線 、虛線
border-color:#333; 一個值 四個邊的顔色
可以設定不同方向的不同 樣式 寬度 顔色
e、border-sytle屬性常用取值：
none：定義無邊框。
solid：定義實線。
dotted：定義點狀邊框。在大多數浏覽器中呈現為實線。
dashed：定義虛線。在大多數浏覽器中呈現為實線。
inherit：規定應該從父元素繼承邊框樣式。
5、外邊距 margin
與内邊距padding類似，可參照。
二、盒模型的使用總結
A、标簽自帶的盒子模型：
1、 浏覽器預設的margin值為8px！
2、 h1~h6标簽 自帶外邊距
3、 p段落标簽 自帶一個 字型的 外邊距
4、 button input 自帶邊框 内邊距
5、 ul,ol,li dl,dt,dd,自帶 内邊距 外邊距
B、盒子的大小
盒子的大小指的是盒子的寬度和高度。大多數容易将寬度和高度 誤解為width和height屬性，然而預設情況下width和height屬性隻是設定content（内容）部分的寬和高。盒子真正的寬和高按下面公式計算：
盒子的寬度 = 内容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
三、盒模型練習
1、編寫一個三角形：
.box{
width:0px;
height:0px;
border:50px solid green;
border-top-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
}
2、六邊形相框
<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
.box-1,.box-3{
margin:0 auto;
width:0;
height:0;
border:100px solid white;
border-top:50px solid yellow;
border-bottom:50px solid yellow;
}
.box-1{
border-top-color:white;
border-bottom-color:transparent;
}
.box-3{
border-bottom-color:white;
border-top-color:transparent;
}
.box-2{
width:200px;
height:130px;
background-color:transparent;
margin:0 auto;
}
.box{
width:200px;
height:300px;
background-image:url('img/h.jpg')
}
3、心形
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
.box{
width:400px;
height:800px;
margin:0 auto;
}
.box1,.box2,.box4 {
width:0;
height:0;
}
.box1,.box2{
border:100px solid white;
border-top:50px solid white;
border-bottom:50px solid red;
float:left;
}
.box3{
width:400px;
height:100px;
background-color:red;
float:left;
}
.box4{
border:200px solid white;
float:left;
border-top:200px solid red;
}