盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域。
类型:
display默认值为inline。
- 行盒
display等于inline的元素。
行盒在页面中不换行。 - 块盒
display等于block的元素。
块盒独占一行。
注意
- 浏览器默认样式表设置的块盒:容器元素、h1~h6、p.
容器元素:
header:通常同于表示页头,也可用于表示文章的头部。
footer:通常同于表示页脚,也可用于表示文章的尾部。
article:通常用于表示整篇文章。
section:通常用于表示文章的章节。
aside:通常用于表示侧边栏。
- 常见的行盒:span、a、img、video、audio
盒子的组成部分
无论时行盒,还是块盒,都由下面几部分组成,从内到外分别时:
1. 内容:content
- 属性:width、height:设置盒子内容的宽、高
- 内容部分通常叫做整个盒子的内容盒(content-box)。
2. 填充(内边距):paddind
- 盒子边框到盒子内容的距离。
- 填充区+内容区=填充盒(padding-box)
- 属性:padding-left、padding-right、padding-top、padding-bottom:左内边距、右内边距、上内边距、下内边距。
- 未设置时,默认为0.
- 简写属性:
- 四个值分别设置
- padding:上 右 下 左
- padding: a b(a表示上下内边框的值,b表示左右内边框的值)
- padding:a(a表示上下左右四个内边框值相同)
1. 方式一
padding-left:40px;
padding-right:40px;
padding-top:20px;
padding-bottom:20px;
2. 方式二
padding:20px 40px 20px 40px;
3. 方式三
padding:20px 40px;
4. 方式四
padding:20px;
3. 边框:border
-
边框+填充区+内容区=边框盒(border-box)
-
边框=边框样式+边框宽度+边框颜色
-
整体简写:
border:宽度 样式 颜色
border:2px solid red;
- 属性:
(1)border-width:边框宽度,默认边框宽度为0。(包括border-top-width、border-left-width、border-bottom-width、border-right-width)
(2)border-style:边框样式,默认边框样式为none。(简写属性,同上)
(3)border-color:边框颜色,默认边框颜色为字体颜色。(简写属性,同上)
4. 外边距:margin
- 边框到其他盒子的距离。
- 属性:margin-top、margin-bottom、margin-left、margin-right
- 简写属性