CSS 盒子模型(Box Model)
每个HTML元素都可以看作是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
- 个人觉得盒模型主要是用来区分元素的大小
标准盒模型 (W3C盒模型)
标准的盒模型由content内容+padding内填充+border边框+margin外边距组成
盒子的大小由:内容的宽高+内填充的大小+边框的大小+外边距的大小决定
div{ width: 200px; height: 200px; background: red; padding:10px; border:10px solid #ccc; margin:10px;}//盒子宽：260px;高：260px;//div元素宽：240px;高：240px;//content宽200px,高:200px;怪异盒模型 (IE盒模型)
怪异盒模型由content内容+padding内填充+border边框组成
盒子的大小由：width、height决定
div{ width: 200px; height: 200px; background: red; padding:10px; border:10px solid #ccc; margin:10px;}//盒子宽：200px;高：200px;//div元素宽：200px;高：200px;//content宽160px,高:160px;- 既标准盒模型的width、height是指content的大小，怪异盒模型的width、height是指content+padding+border的大小
- 当box-sizing为content-box时，使用的是W3C盒模型，当box-sizing为border-box时，使用的是IE盒模型。
内边距padding
- padding-方向（left,right,top.bottom）表示给指定方向设置内边距。
- padding 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向的值都一样。
div{ width: 200px; height: 200px; background: red; padding:10px 20px; padding-left:30px;} 外边距margin
- margin-方向（left,right,top.bottom）表示给指定方向设置外边距。
- margin 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向上的值都是一样的。
div{ width: 200px; height: 200px; background: red; margin:10px 20px 30px 40px; margin-top:50px;}边框属性 border
1.边框宽度 border-width
2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线
3.边框颜色 border-color
div{ width: 200px; height: 200px; border-width:3px; border-style: double; border-color:red; <!--border:1px solid #ccc;合并写法-->}4.改变某条边框的属性值,border-方向left、right、top、bottom）
border-left:2px dashed red;border-bottom:4px solid orange;5.改变某条边框的具体某个属性的属性值,border-方向-属性(width、style、color)
border-right-style:dotted;border-left-color:pink;border-top-width:1px;