盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
- 行盒:display等于inline的元素
- 块盒:display等于block的元素
在页面中,块盒独占一行,行盒不换行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素(div, header,article,section,aside)
h1~h6,p;
常见的行盒(跟内容相关的):span,a,img,video,audio
盒子的组成部分
无论是行盒还是块盒,都由下面几个部分组成,从内到外分别是:
- 内容 content
width,height设置的是盒子内容的宽高
内容部分叫做整个盒子的内容盒 content-box - 填充(内边距) padding 速写属性
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding:简写属性
padding(顺时针转):上 右 下 左
填充区+内容区=填充盒 padding-box - 边框 border 速写属性
边框=边框样式+边框宽度+边框颜色
边框样式:border-style
边框宽度:border-width
边框颜色:border-color
边框+填充区+内容区=边框盒 border-box - 外边距 margin 速写属性
边框到其他盒子的距离
margin-top,margin-right,margin-bottom,margin-left