盒模型时css定位布局的核心内容。利用div元素和列表元素，即可完成页面大部分的布局工作。
html中大部分的元素（特别是块级元素）都可以看作是一个盒子，而网页元素的定位实际就是这些
大大小小的盒子在页面中的定位。
首先我们来了解一些盒模型相关的属性。
1.margin属性（外边距）它分为：
margin-top顶部外边距
margin-left左部外边距
margin-right右部外边距
margin-bottom底部外边距
2.border属性(边框)它分为：
border-top顶部边框
border-left左部边框
border-right右部边框
border-bottom底部边框
3.padding属性（内边距）它分为：
padding-top顶部内边距
padding-left左部内边距
padding-right右部内边距
padding-bottom底部内边距
我们可以把盒模型这样理解：盒模型就是一个装物品的盒子，元素就是盒内的物品，内边距是保
护物品的填充物如：塑料、泡沫、纸....， 边框就是装东西的纸盒，外边距是周围物品离盒子的距离。
所以： 元素所占宽度：padding-left +padding-right+元素自身宽度+ border-left+border-right
元素所占高度：padding-top +padding-bottom +元素自身高度+padding-top +padding-bottom
元素的横向范围：padding-left +padding-right+元素自身宽度+ border-left+border-right
+margin-right +margin-left
元素的纵向范围: padding-top +padding-bottom +元素自身高度+padding-top +padding-bottom
+margin-top +margin-bottom
padding、border、margin都可以统一书写或分开书写，比如：
padding：10px ；表示所有内边距为10px
border：10px 20px；表示顶部边框和底部边框为 10px，左部内边距和右部内边距为20px
margin：10px 20px 30px；表示顶部边框为 10px，左部内边距和右部内边距为20px，底部边框为30px
margin：10px 20px 30px 40px；表示顶部边框为 10px，右部内边距为20px，底部边框为30px，
左部内边距为40px
以上书写方式完整的表达了内外边距的值，其中边框border只是表达了他的粗细并没有完全表达他的样式
所以border的完整书写方式为：border：10px solid #000；它表达的完整样式是 边框：10px宽 实线 黑色
实例：div {
300px;
border: 25px solid red;
padding: 25px;
margin: 25px;
}
元素宽度：300px+25px*2+25px*2=400px