1.盒模型包括 width+height+padding(内边距)+margin(外边距)+border(边框)
2.padding:调整元素内容距离元素边缘的距离
设置padding增加了盒模型面积
一个值:四个方向
俩个值:第一个值代表上下 第二值代表左右
三个值:第一个值代表上 第二个值代表左右 第三个值代表下
四个值:上 右 下 左
3.border:边框宽度(border-width) 边框颜色(border-color)
边框样式(border-style solid:实线 dotted:点线 dashed:虚线 double:双实线)
border也会增大盒模型的面积
4.border-radius:圆角度
5.margin:用来调整元素之间的距离
margin存在的问题
问题1:上下俩个元素同时设置margin-bottom和margin-top会叠压取最大值
问题2:第一个子元素的margin-top会传递给父元素
解决方式 1.使用padding代替margin
2.给父元素设置overflow:hidden
6.正常盒模型和ie盒模型(怪异盒模型)区别:
正常盒模型设置padding和border会增大盒模型面积
ie盒模型设置padding和border会挤压内容区
7.如何把正常盒模型变成ie盒模型 box-sizing:border-box