备战蓝桥杯第五天之盒子模型

盒子模型

content：内容 由宽度高度决定

padding 内间距 ：内容到边框的距离 有上下左右四个方向的内边距 padding-top padding-left padding-right padding-bottom

其特点是设置padding时候，系统默认回撑大content，再拿出对应的间距作为内边距

解决方式：box-sizing：border-box

border 边框 样子style 颜色color 粗细width 可以单独设置某一条边粗细

圆角 border-radius 可以单独设置某一个角

当标签为正方形时，圆角度数为一半时，此标签变为圆形

其特点是设置border时候，系统默认回撑大content，再拿出对应的间距作为边框粗细

解决方式：box-sizing：border-box

margin：外边距

1.边框到边框的距离

2.有上下左右四个方向的外边距

3.margin：auto 使得标签处于它所占据的文档流正中央