5.盒模型
88 字·
0
·
0
·
css
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子box)
盒子类型 #
- 行盒:display等于inline的元素。
- 块盒:display等于block的元素。
行盒在页面中不换行,块盒独占一行。
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、 a、 img、 video、 audio
盒子的组成部分 #
- 无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
1. 内容 content #
- width 宽度
- height 高度
- 这两个值设置的盒子内容的宽高。
- 内容部分通常叫做整个盒子的**内容盒 content-box**
2. 填充(内边距) padding #
- 盒子的边框到盒子内容的距离
- padding-left 左内边距
- padding-right 由内边距
- padding-top 上内边距
- padding-bottom 下内边距
- padding:简写属性(速写属性)
- padding:上 右 下 左
- 填充区+内容区域 = 填充盒 padding-box
3. 边框 border #
边框 = 边框样式 + 边框宽度 + 边框颜色 边框样式: border-style 边框宽度: border-width 边框颜色:border-color
边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin #
边框到其他盒子的距离 margin-top margin-left margin-right margin-bottom 速写属性:margin
Related
1.为网页添加样式
162 字·
0
·
0
css
2.常见的样式声明
153 字·
0
·
0
css
3.选择器
440 字·
0
·
0
css