CSS-标签的显示模式，块级元素特点、行内元素特点、行内块级元素的特点，块元素、行内元素、行内块元素之间的转换

蔚落 2023-08-17 17:17 139阅读 0赞

HTML 中的标签分为三种：块级元素、行内元素、行内块级元素；通过 CSS 中的样式属性 `display` 可转换元素的显示模式

#### 块级元素（block-level） ####

块级元素独占一行，可以设置宽、高、对齐等属性，如果不设置宽度块级元素的宽度默认为浏览窗口的宽度（父级元素宽度的 100%）；块级元素在实际开发中多用于网页的排版布局%

常见的块元素:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

其中 `<div>` 标签是最典型的块元素，网页布局中经常用到

需要注意的是：只有文字才能组成段落 ，因此 p 标签中不能放块级元素；h1~ h6、dt 这些都是文字类块级标签，里面都不能放其他块级元素

特点总结：

*  自己独占一行
 *  高度，宽度、外边距以及内边距都可以控制
 *  宽度默认是容器（父级宽度）的100%
 *  是一个容器及盒子，里面可以放行内或者块级元素

#### 行内元素（inline-level） ####

行内元素不占有独立的区域可以多个行内元素存在于一行；对宽高属性值不生效，完全靠内容来撑开宽高；不可以设置宽、高、对齐等属性，常用于控制页面中文本的样式（添加语义）

常见的行内元素

<a>、<strong>、<b>、<i>、<em>、<ins>、<del>、<u>、<s>、<span>

其中 `<span>` 标签为最典型的行内元素

需要注意的是：a 标签里面不能再放 a 标签；特殊情况 a 标签中可以放块级元素，但是最好给 a 转换为块级元素

特点总结：

*  相邻行内元素在一行上，一行可以显示多个
 *  高、宽无法直接设置（无效），可设置水平方向的 padding 和 margin，垂直方向无效
 *  默认宽度就是它本身内容的宽度
 *  行内元素只能容纳文本或则其他行内元素

#### 行内块级元素（inline-block） ####

行内块级元素结合了行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；可以对行内块级元素设置宽、高和对齐属性

常见的行内块级元素

<img />、<input />、<td>

特点总结：

*  和相邻行内元素（行内块）在一行上，但是元素之间会有空白缝隙；一行可以显示多个
 *  默认宽度就是它本身内容的宽度
 *  高度，行高、外边距以及内边距都可以设置

#### display 属性的使用 ####

需要将元素转为哪种显示模式，直接将 display 设置为需要的值即可，常见的值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>隐藏元素，不显示；设置了该属性值元数将隐藏，不再占有原来的空间</td> 
  </tr> 
  <tr> 
   <td>blcck</td> 
   <td>显示为块级元素</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td>显示为行内元素</td> 
  </tr> 
  <tr> 
   <td>inline-block</td> 
   <td>显示为行内块级元素</td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS-标签的显示模式，块级元素特点、行内元素特点、行内块级元素的特点，块元素、行内元素、行内块元素之间的转换

HTML 中的标签分为三种：块级元素、行内元素、行内块级元素；通过 CSS 中的样式属性 `display` 可转换元素的显示模式块级元素（block-level）

蔚落/ 2023年08月17日 17:17/ 0 赞/ 140 阅读

相关块级元素，行内元素，行内块元素的学习

块级元素 > 独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽； > 特点：独占一行，对高度、宽度、行高以及顶和底边距都可设

朱雀/ 2022年11月30日 04:18/ 0 赞/ 246 阅读

相关 CSS的元素显示模式（块元素 & 行内元素 & 行内块元素）

文章目录 1 什么是元素显示模式 2 块元素 versus 行内元素 3 行内块元素 4 元素显示模式总结 5 元素显示模式转换

客官°小女子只卖身不卖艺/ 2022年11月17日 14:58/ 0 赞/ 230 阅读

相关 HTML 中的块级元素、行内元素、行内块级元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种，一般使用 `display`，进行三者的转换。 1. `display: inline;` 将元素转换为

我就是我/ 2022年05月25日 05:51/ 0 赞/ 456 阅读

相关块级元素，行内元素，行内块元素

（1）块级元素：div、p、hi、ul、ol、li、h1~h6、dl、dt、dd等等常用的块及元素有div、p、hi、ul、ol、li、h1~h6

布满荆棘的人生/ 2022年04月23日 13:12/ 0 赞/ 316 阅读

相关块级元素、行内元素和行内块元素

块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h

Bertha 。/ 2022年03月16日 00:44/ 0 赞/ 448 阅读

相关行内元素,块元素,行内块元素

常见的块元素:div p、nav、aside、header、footer、section、article、ul-li、addres;对块元素的居中直接使用margin:0 au

女爷i/ 2021年12月16日 20:37/ 0 赞/ 434 阅读

相关块级元素、行内元素、行内块级元素的特点

1.块级元素： (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。注：文字类的块级元

野性酷女/ 2021年11月23日 01:08/ 0 赞/ 429 阅读

相关行内元素与块级元素与行内块元素

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度块级元素可以设置width,height属性. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置

Dear 丶/ 2021年09月01日 10:55/ 0 赞/ 485 阅读

相关行内元素、块级元素、行内块元素

行内元素、块级元素、行内块元素 1. 块级元素display:block:自己独自霸占一整行,默认宽度是100%,可以设置宽高（div、p、h1-h6、form、ul、

淩亂°似流年/ 2021年07月25日 15:56/ 0 赞/ 551 阅读