CSS 盒子模型

显示模式

显示模式即标签的显示方式，用于布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素 (例如 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