CSS的元素显示模式-块元素、行内元素和行内块元素

ゝ一纸荒年。 2022-12-17 12:59 123阅读 0赞

# CSS的元素显示模式 #

### 什么是元素显示模式 ###

元素的显示模式是元素以什么方式进行显示。比如<div>自己占一行，<span>一行可以放多个。

### 元素显示模式的分类 ###

HTML元素可以分为行内元素和块元素两种类型。

##### 块元素 #####

块元素：常见的块元素有<h1>~<h6>、<p>、<div>、<ol>、<li>、等，其中<div>是最典型的块元素。

块元素的特点：

1、块元素独占一行

2、高度、宽度，外边距以及内边距都可以控制。

3、宽度默认是容器的100%。

4、是一个容器及盒子，里面可以放行内或者块级元素。

文字类的元素内不能使用块级元素；例如<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。同理，标题标签<h1>~<h6>都是文字类块级标签，里面也不能放其它块级元素。

##### 行内元素（内联元素） #####

行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个。

2、高、宽直接设置是无效的。

3、默认宽度就是他本身内容的宽度

4、行内元素只能容纳文本或者其他行内元素

<a>链接里面不能再放链接；链接里面可以放块级元素，但是给<a>转换一下块级模式最安全。

##### 行内块元素 #####

在行内元素中有几个特殊的标签——<img / >、<input />、<td>，他们同时具有行内元素和块元素的特点。

行内块元素的特点：

1、和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个。

2、默认宽度就是它本身内容的宽度。

3、高度、宽度、外边距以及内边距都可以控制。

### 元素显示模式的转换 ###

一个模式的元素需要另一个模式的特性，例如想要增加链接<a>的触发范围。

通过display: block;将行内元素转换为块级元素。

通过display: inline;将块级元素转换为行内元素。

通过display: inline-block;转换为行内块元素。

--------------------

块级元素，独占一行，可以设置高和宽；行内元素，一行可以显示多个，不可以设置高和宽；行内块元素，一行可以放多个，可以设置高和宽。

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 CSS的元素显示模式-块元素、行内元素和行内块元素

CSS的元素显示模式什么是元素显示模式元素的显示模式是元素以什么方式进行显示。比如<div>自己占一行，<span>一行可以放多个。元素显示模式的分类

ゝ一纸荒年。/ 2022年12月17日 12:59/ 0 赞/ 124 阅读

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

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

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

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

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

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

相关块元素、行内元素、行内块元素及其相互转化

![1190185-20180226173831103-856421838.png][] ![1190185-20180226174051581-1899167703.png

Myth丶恋晨/ 2022年10月02日 14:56/ 0 赞/ 124 阅读

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

（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 赞/ 239 阅读

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

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

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

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

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

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

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

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

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

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

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

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