本文共 1129 字，大约阅读时间需要 3 分钟。
在学习CSS时，了解HTML标签的分类及其与CSS样式的结合方式，是掌握前端开发的关键环节。本文将从块级标签、行内标签和行内块标签三个方面展开讨论，并结合CSS display属性的应用，帮助开发者更好地理解标签的显示特性。
块级标签是一类能够独占一行的标签，其样式属性（如宽度、高度、水平居中等）会生效。在没有指定宽度时，默认会占据浏览器的整个宽度（即100%）。典型的块级标签包括<div>、<h1>到<h6>、<li>、<dt>、<dd>、<p>、<form>和<ul>等。
行内标签可以与其他标签共存一行，行内标签的样式属性（如宽度、高度等）无法直接设置，其宽高完全由内容决定。常见的行内标签有<span>、<a>、<b>、<i>、<u>、<em>、<strong>、<label>和<br>等。
行内块标签结合了行内和块级标签的特性，其样式属性可以生效，同时仍然可以与其他行内标签共存一行。典型的行内块标签有<img>和<input>等。
通过CSS的display属性，可以将不同类型的标签转换为所需的显示模式：
块级标签转换为行内标签：
display: inline;属性，行内标签将失去块级特性，无法设置宽高。行内标签转换为块级标签：
display: block;属性，块级标签将占据一行，并可以设置宽高属性。行内标签转换为行内块标签：
display: inline-block;属性，行内块标签既能与其他行内标签共存一行，又能设置宽高属性。示例1：行内标签转块级标签
百度
运行结果：点击任何区域都会跳转到百度，展示块级标签的实际效果。
示例2：行内标签转行内块标签
百度 百度一下我是div1我是div2
运行结果：块级标签会自动换行，而行内块标签可以在同一行内与其他行内标签共存。
示例3：块级标签转换为行内标签
谷歌https://www.google.com
运行结果：块级标签转换为行内标签后，无法设置宽高属性，仅能通过内容撑开。
转载地址：http://aoffz.baihongyu.com/