组成
margin 外边距
border 边框
padding 内边距
content 内容
content
盒子默认大小为内容大小
border( top bottom left rignt )
border-color
border-width
px
border-style
none
solid
dashed
dotted
复合写法无顺序
border-collapse
collapse
相邻单元格边框合并
border-radius
半径
影响盒子实际大小
padding( top bottom left rignt )
复合写法
x1上下左右
x1上下 x2左右
x1上 x2左右 x3下
x1上 x2右 x3下 x4左
影响盒子实际大小
若不指定盒子大小则盒子继承父元素大小此时padding不会撑开盒子大小
margin( top bottom left rignt )
复合写法同padding
外边距合并
当上下两个块元素合并时若上面元素有margin-bottom
下面元素有margin-top 则两者之间的垂直间距为两者
之中较大的
解决方案
尽量设置一个margin
外边距塌陷
对于两个嵌套关系的块元素 父子元素都有margin-top
此时父元素会塌陷较大的外边距值
解决方案
父元素添加
上边框
上内边距
overflow: hidden
清除内外边距
*
{
padding: 0;
margin: 0;
}
水平居中
块级盒子(盒子需指定宽度)
margin: 0 auto;
行内元素或行内块元素
父元素添加 text-decoration: center;