盒子模型

概念 : css 中每个标签都被看作是一个矩阵 , 每个矩阵由内到外有一系列属性 , 这一系列属性被称为盒子模 型

组成 : content padding border margin

加了背景色以后可视区域 : content + padding + border

1.content 内容

width 和 height 都是给他设置的

2.padding 内边距

从 content 层到 border 的距离

有四个方向 padding-top/right/bottom/left。

会默认增大可视面积 , 如果想让他保持原来大小 : box-sizing: border-box

3.border 边框

由三个属性控制 :

border-style 边框样式

border-width 边框粗细

border-color 边框颜色

会默认增大可视面积 , 如果想让他保持原来大小:box-sizing: border-box;

可以单独设置边框 ：border-left/top/right/bottom-style/width/color

边框圆弧 : border-radius:50%

可以单独设置 : border-top/bottom-left/right-radius

4.margin 外边距

有四个方向 margin -top/right/bottom/left

margin:auto 让容器处于当前文档流中央