CSS中，有以下几种标签类型：块级标签、行内标签、行内-块级标签。
块级标签
特点：
1.独占一行的标签；
2.能随时设置宽度和高度。
eg：div、p、h1、h2、ul、li
<div> div标签 </div>
<p> 段落标签 </p>
<!--列表标签-->
<ul>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
<li> 我是无序列表 </li>
</ul>
<!--标题标签:h标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
行内标签
特点：
1.多个行内标签能同时显示在一行；
2.宽度和高度取决于内容的尺寸。
eg：span、a、label
<span>我是行内标签</span>
<a href="#">我是超链接</a>
行内-块级标签
特点：
1、多个行内-块级标签可以显示在同一行；
2、能够随时设置宽度和高度。
eg：input、button
<input placeholder="我是输入框">
<button>我是按钮</button>
我把以上三种标签类型完整展示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的标签类型</title>
<style>
div{
background-color: red;
}
p{
background-color: yellow;
}
span{
background-color: aqua;
width: 300px;
height: 90px;
}
a{
background-color: blueviolet;
}
input{
/*background-color: burlywood;*/
width: 200px;
height: 100px;
}
button{
/*background-color: pink;*/
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<!--块级标签-->
<div> div标签 </div>
<div> div标签 </div>
<div> div标签 </div>
<p> 段落标签 </p>
<!--行内标签-->
<span>我是行内标签</span>
<span>我是行内标签</span>
<span>我是行内标签</span>
<a href="#">我是超链接</a>
<!--行内—块级标签-->
<input placeholder="我是输入框">
<button>我是按钮</button>
</body>
</html>
显示效果如下：
Paste_Image.png
如果我们想要让这几种标签类型相互转换，那就要用到
display属性。
display：规定元素应该生成的框的类型。
实现相互转换需要用到的值：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
通过显示效果来进行对比，在<style>中添加display代码：
<style>
div{
background-color: red;
/* 隐藏标签 */
/*display: none;*/
/*改变标签的类型：块级——>行内标签*/
/*display: inline;*/
/*改变标签的类型：块级——>行内-块级标签*/
display: inline-block;
}
p{
background-color: yellow;
}
span{
background-color: aqua;
width: 300px;
height: 90px;
/*改变标签的类型：行内——>块级标签*/
/*display: block;*/
/*改变标签的类型：行内——>行内-块级标签*/
display: inline-block;
}
a{
background-color: blueviolet;
}
input{
/*background-color: burlywood;*/
width: 200px;
height: 100px;
}
button{
/*background-color: pink;*/
width: 100px;
height: 80px;
}
</style>
显示效果如下：
Paste_Image.png
网友评论