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+内容宽/高