显示模式
显示模式即标签的显示方式，用于布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
- 块级元素 (例如 div)
- 独占一行
- 宽度默认是父级的 100%
- 添加宽高属性生效
- 行内元素 (例如 span)
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
- 行内块元素 (例如 img)
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
可以通过 CSS 属性 display 转换显示模式，取值为：
| 效果 | 块级 | 行内 | 行内块 |
|---|---|---|---|
| 属性值 | block | inline | inline-block |
盒子模型
作用：布局网页，摆放盒子和内容
盒子模型组成部分：
- 内容区域：width & height
- 内边距：padding (出现在内容与盒子边缘之间)
- 边框线：border
- 外边距：margin (出现在盒子外面)
边框线
属性值：边框线粗细 线条样式 颜色 不区分顺序
常见线条样式有：
| 线条样式 | 实线 | 虚线 | 点线 |
|---|---|---|---|
| 属性值 | solid | dashed | dotted |
1
2
3
div {
border: 1px solid aqua;
}
当然，还有可以设置单独方向的属性，属性值同上
1
2
3
4
5
6
div {
border-top: 1px solid red;
border-left: 1px dashed red;
border-bottom: 1px dotted red;
border-right: 1px solid blue;
}
内边距
设置内容与盒子边缘之间的距离
1
2
3
4
5
6
7
8
9
10
11
12
/* 四个方向内边距相同 */
div {
padding: 10px;
}
/* 分别设置四个方向 */
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 10px;
}
padding 也有多值写法，可以通过一个属性控制四个内边距
| 取值个数 | 示例 | 含义 |
|---|---|---|
| 一个 | padding: 10px; |
四个方向均为 10px |
| 四个 | padding: 10px 20px 30px 40px; |
上 右 下 左 (顺时针) |
| 两个 | padding: 10px 30px 20px; |
上 左右 下 |
| 三个 | padding: 10px 20px; |
上下 左右 |
尺寸内减模式
默认情况下 盒子尺寸=内容尺寸+内边距尺寸+边框尺寸，也就是说当给盒子加上 padding 和 border 属性后，盒子会变大
1
2
3
4
5
6
div {
height: 200px;
width: 200px;
/* 此盒子尺寸会变为 240*240 */
padding: 20px;
}
如果想要盒子大小为 200*200，需要手动计算并将 heigh 和 width 值调为 160px
而加上 box-sizing: border-box 后，盒子的大小将恒保持为 heigh 和 width 值
1
2
3
4
5
6
7
div {
height: 200px;
width: 200px;
/* 此盒子尺寸为 200*200 */
padding: 20px;
box-sizing: border-box;
}
外边距
作用：拉开两个盒子之间的距离。属性值与 padding 写法相同
外边距不会使盒子变大
如果将 margin 的左右属性值设置为 auto 将会使该盒子水平居中
1
2
3
4
5
6
div {
height: 200px;
width: 800px;
/* 此盒子将水平居中 */
margin: 0 auto;
}
合并现象
垂直排列的同级元素，上下 margin 会合并，取值为较大的 margin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.box1 {
width: 200px;
height: 100px;
background-color: aqua;
margin-bottom: 10px;
}
/* 俩盒子之间间隔 20px */
.box2 {
width: 100px;
height: 100px;
background-color: aquamarine;
margin-top: 20px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
塌陷问题
父子级标签，子级添加上外边距将产生塌陷。会导致父级一起向下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: aqua;
/* 俩盒子将一起向下塌陷 50px */
margin-top: 50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
解决方法：
- 取消子级 margin，父级使用 padding
- 父级设置
overflow: hidden - 父级设置 border-top
元素溢出
当盒子内容超过盒子大小是将产生溢出，可以用 overflow 属性控制溢出元素的内容的显示方式
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 溢出滚动 (无论是否溢出，都显示滚动条) |
| auto | 溢出滚动 (溢出才显示滚动条) |
行内元素垂直位置
行内元素 (如 span) 添加 margin 和 padding 无法改变垂直位置，此时可以通过行高改变
1
2
3
4
5
6
span {
margin: 50px;
padding: 20px;
line-height: 100px;
}
圆角效果
使用属性 border-radius 设置元素的外边框为圆角，属性值为圆角半径，可以使用数字+px 或百分比，多值与 padding 类似
| 取值个数 | 含义 |
|---|---|
| 一个 | 四个角均为设定值 |
| 四个 | 左上 右上 右下 左下 (顺时针) |
| 三个 | 左上 右上+左下 右下 |
| 两个 | 左上+右下 右上+左下 |
正圆形状
给正方形盒子设置圆角属性值为宽高的一半或 50%
1
2
3
4
5
6
7
8
div {
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
/* 或者 border-radius: 50px */
}
胶囊形状
给长方形盒子设置圆角属性值为盒子高度的一半
1
2
3
4
5
6
7
div {
width: 100px;
height: 50px;
background-color: aqua;
border-radius: 25px;
}
阴影效果
使用 box-shadow 设置，属性值：x y 模糊半径 扩散半径 颜色 内外阴影
其中 x 与 y 是必填，默认为外阴影，若设置内阴影属性值为 inset