盒子模型
概念
: 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
让容器处于当前文档流中央