盒子模型（Box Model）

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
Chome盒模型与IE盒模型的区别
每个元素在页面中占位大小 = content + padding + margin + border
Chome盒模型内容大小等于内容（center）大小
border + padding + content 得到实际宽高，实际宽高随着三个值的改变而改变。
IE盒模型内容大小等于content + padding + border的总和。

ie盒子模型

box-sizing: **border-box**;
另外一个叫法 盒子内减法

border + padding + content 得到实际宽高，但是不同的是给盒子设置了宽度后，实现宽高就固定了，content会随着三个值的改变而改变
w3c标准盒子模型更多使用于pc端的页面。ie盒子模型更多使用于移动端的页面。改变盒子模型的方法就是修改box-sizing;

盒子边框

border : border-width || border-style || border-color
border-width =定义边框粗细，单位是px
border-style =边框的样式
border-color =边框颜色
边框的样式：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线 读法：(哆ki德)

边框综合设置

border: 1px solid red; 没有顺序