在HTML中，标签从占位角度而言，可以被分为以下三大类：
- 行元素：
- 不能独占一行，不能设置宽高
- 代表标签：span a b u i s
- 块元素：
- 独占一行，可以设置宽高
- 代表标签：div p h1 ul li
- 行内块：
- 不能独占一行，能设置宽高
- 代表标签：img input
下面我们看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元、 行内块元素和块元素</title>
</head>
<style>
div,span,img{
width:100px;
height:100px;
background:#abcdef;
}
</style>
<body>
<div>这是盒子</div>
<div>这是盒子</div>
<span>这是文字</span>
<span>这是文字</span>
<img src="./img/1.png">
</body>
</html>
显示结果如下：
解释一下：
前面两个都是div盒子，它们可以独占一行，即使第一个div并没有占满一行，第二个div依然显示在下一行中。
下面的两个span和img标签都是行内元素，不同的是：span不能设置宽高，而img可以设置宽高。
下面我们接着看如何转换元素类型
主要有两种种转化需求，转换后的元素都可以设置宽高:
- 1、转为块元素。display:block; 例如：转换后可以让两个span显示在两行中。
- 2、转为行内块元素。display:inline-block; 例如：转换后两个div在一行显示。
请看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元素、行内块元素和块元素</title>
</head>
<style>
span{
width:200px;
height:200px;
background:#f00;
/* 模式转换：转为块元素 */
display:inline-block;
}
div{
width:200px;
height:200px;
background:#0f0;
/* 转为行内元素 */
display:inline-block;
}
</style>
<body>
<span>这是文字</span>
<span>这是文字</span>
<div>这是盒子</div>
</body>
</html>
以上代码中，我们将div和span全部转为行内块，最终的结果是div和span都显示在一行中，并且span可以设置宽高。
再看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签类型划分 行元素、行内块元素和块元素</title>
</head>
<style>
span{
width:200px;
height:200px;
background:#f00;
/* 模式转换：转为块元素 */
display:block;
}
div{
width:200px;
height:200px;
background:#0f0;
/* 转为行内元素 */
display:inline-block;
}
</style>
<body>
<span>这是文字</span>
<span>这是文字</span>
<div>这是盒子</div>
</body>
</html>
以上代码中，我们将span转为块元素，实现结果为，两个span标签分两行显示，且可以设置宽高。
|
窥视卡
雷达卡
发表于 2023-1-31 23:33:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 01:19:21
