1.盒子模型由----网页内容content、边框boder、内边距padding、外边距margin----四部分组成
2.边框boder：三个属性---颜色color、粗细width、样式style
01.color：分开设置boder-top-color上边框颜色、boder-bottom-color下边框颜色、boder-left-color左边框颜色、boder-right-color右边框颜色
同时设置，boder-color：上、右、下、左，必须按上、右、下、左顺序设置，中间用空格分开，没有找对边
举例：boder-color：red blue black；上边框颜色为红色， 右边框颜色为蓝色，下边框颜色为黑色，没有设置左边框，找它的对边右边框，则左边框为蓝色
02.width：分开设置boder-top-width上边框粗细、boder-bottom-width下边框粗细、boder-left-width左边框粗细、boder-right-width右边框粗细
同时设置，boder-width：上、右、下、左，必须按上、右、下、左顺序设置，中间用空格分开，没有找对边
03.style：样式有：none、hidden、dotted、dashed、solid、double、groove、ridge、outset等
最常用的none无边框、dashed虚线边框、solid实线边框、dotted点线边框
总结：boder的三个属性可以同时设置 ，三个属性不要求有序
举例：boder-bottom:red 5px solid,设置的是下边框
boder：red 5px solid表示四条边框一样，同时设置
3.外边距：margin，是指与其他盒子之间的距离
margin-top上外边框、margin-bottom下外边框、margin-left左外边框、margin-right右外边框
同时设置margin，上、右、下、左，必须按上、右、下、左顺序设置，中间用空格分开，没有找对边
4.内边距：padding，是控制内容与边框之间的距离
padding-top上外边框、padding-bottom下外边框、padding-left左外边框、padding-right右外边框
同时设置padding，上、右、下、左，必须按上、右、下、左顺序设置，中间用空格分开，没有找对边
5.盒子模型的尺寸
内盒的总尺寸=boder+padding+内容宽/高
外盒的总尺寸=margin+boder+padding+内容宽/高
6.box-sizing拯救布局
语法：box-sizing：centent-box 、border-box、 inherit
centent-box默认值，盒子的总尺寸=boder+padding+内容宽/高