HTML中的标签显示模式，display的用法

Too_Soup_Soup

已于 2022-03-26 15:06:24 修改

阅读量3k

点赞数 3

分类专栏： HTML 文章标签： html 前端

于 2021-12-31 14:14:06 首次发布

本文链接：https://blog.youkuaiyun.com/Too_Soup_Soup/article/details/122253717

版权

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML中的三种基本元素类型：块状元素、行元素和行内块元素。块状元素如<div>、<h1>等，特点是独占一行，可设置宽高。行元素如<span>、<a>，它们在同一行内显示，无法直接设置宽高。行内块元素如<img>、<td>，具备设置宽高的能力，同时能并排显示。了解这些元素的特性对于网页布局至关重要，可通过display属性进行元素类型的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是标签显示模式？

HTML中我们将标签分为块状元素和行元素,它们也叫块标签和行内标签。

块状元素有哪些？

最熟悉的 <div></div>
标题元素：<h1></h1>  <h2></h2>...
段落标签: <p> </p>
表格 : <table></table> ...
这边我就举这点例子

块状元素有什么特点？

独占一行肯定是没有问题的
高度，宽度，边框都是可以设置的
默认宽度是100%
块状元素内部可以写行或者块元素

行元素有哪些？

<span></span>，<a></a>，<b></b>，<i></i>

行元素有什么特点？

每行可以有多个行元素
高，宽，内边距都无法设置（行内元素是可以设置内边距 padding 的，只不过元素本身无法把父元素撑开，看上去就是设置的 padding 上下边距不起效了，而 margin 就只能设置 span 的左右边距。）
默认宽度就是内容
行元素内部不能出现块状元素

接下来介绍一下行内块元素：不定规则里面总有几个不一样的

<img> ,<td> ,<input>  可以设置高，宽，内外边框

每行可存在多个，每个之间没有空隙
宽，高，内外边距都可以设置
默认宽度就是内容

标签之间的转化：

块---->行: display:inline;
行---->块: display:bolck;
块，行---->行内块:display:inline-block;
display:none;  该元素不被显示