提示
本文主要讲解 CSS 中显示模式，包括块元素、行元素、行内块元素等。@ermo
# 显示模式
# 块（block）
div 标签就是最典型的块级元素。
块元素的特点是：
- 独占一行
- 可以设置宽高
- 宽度默认为父级的100%
代表标签有 div、p、h、ul、li、dl、dt、dd、form、header、nav、footer 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
div1
</div>
<div>
div2
</div>
</body>
</html>
# 行内（inline）
span 标签是典型的行内元素。
行内元素的特点是：
- 不换行
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签有 a、span、u、i、s、strong、ins、em、del 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
/* 不生效 */
width: 400px;
/* 不生效 */
height: 400px;
background-color: #ccc;
}
</style>
</head>
<body>
<span>span1</span> <span>span2</span>
</body>
</html>
# 行内块（inline-block）
img 属于行内块元素。
行内块元素的特点是：
- 不换行
- 可以设置宽高
代表元素有 img、input、textarea、button、select 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">
</body>
</html>
# 显示模式转换
元素的显示模式可以通过 display 属性转换，有3种取值方式：
display:block，转换成块元素display:inline-block，转换成行内块元素display:inline，转换成行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
display: inline-block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
上例中，div 本身属于块元素，通过 display 属性转换为行内块元素。