一、概述
html中的标签可以分为两种类型：块标签和行标签。两者最明显的区别是块标签会重启一行，而行标签不会。
常见的块标签有：p, h1, ul, div等，常见的行标签有strong, a, font等。
1.1 块标签
对于一个块标签而言，它会新起一行：
<body>
<h1>HelloWorld</h1>
<p>helloworldhelloworld</p>
</body>
默认情况下，块标签的作用域为整个屏幕宽度，高度则为适当的文字高度。也可以手动指定宽度和高度，例如给它们设定对应的宽度和高度：
h1,p {
text-align: center;
height: 30px;
width: 300px;
background: #aaaaaa;
}效果如下：
可见，块元素是允许设置区域宽高的，不过对于预设的文字大小如果超出依旧会保持超出状态。
1.2 行标签
行标签的内容不会新起一行，最常用的span即是行标签，在上面的代码加上以下行：
<span>Hello</span>
<strong>World</strong>
<a href="#">AAAAAA</a>它的显示效果如下：
对比块标签而言，行标签除了不换行以外还有一个显著的区别：在它内部设置元素宽高是无效的，例如我们可以尝试也给它们设置上面块标签的样式。
span,strong,a {
height: 30px;
width: 300px;
background: #aaaaaa;
}网页显示为：
背景设置成功了，但是宽高是没有生效的。
二、行块标签转换
2.1 行标签转块标签
行标签转块标签要在对应标签的样式中加上以下属性即可：
display: block;
2.2 块标签转行标签
块标签转行标签添加以下样式属性：
display: inline;
2.3 行内块元素
相较于上面两种转换而言，行内块元素用得更广一点。它集成了行标签和块标签的特点，既能显示在行，又能对元素设置宽高毒。它的属性值为：
display: inline-block;最常使用的一种场景可以见下图：
以上是一个菜单栏，因为菜单栏点击之后跳转，所以它实际上是一个a标签。但是上面的菜单栏使用普通的a标签是无法实现的，因为a标签是一个行标签，不能设置宽高，也就达不到上面的效果。
并且我们经常需要完成的一个功能是点击按钮的任何一个地方都要认为是点到了按钮，即我们只要把鼠标移到数据库这一个区域块即可完成对它的选中，无需把鼠标移到数据库三个字上才能点击。
行内块标签就可以很好的完成这个功能，使a标签有固定宽高，还能都显示在一行。
此处评论已关闭