HTML行内元素和块级元素的区别? 分别有哪些?

目录

行内元素和块级元素的区别? 分别有哪些？

1，行内元素和块级元素案例演示

2，改变元素的等级

display属性：

display特性：

inline：内联元素默认值；该元素前后没有换行

行元素变成块元素

 总结（重要）

---

行内元素和块级元素的区别? 分别有哪些？

行元素：可以在块元素里面

块元素：独占一行

常见的块元素有div，p，ul，li，h1~h6系列标签等。

行元素总是与其前后的其他元素保持在同一行中。常用的行元素有br(强制换行)元素、img(图像) 元素、a(链接) 元素、span（通用行）元素和文字格式元素等

1，行内元素和块级元素案例演示

<div class="lus">块级元素</div>
<p class="hs">块级元素</p>
<span id="hons">行内元素</span>
<a id="fs">行内元素</a>

运行结果

注意：行内元素不是从新行开始，只占用必要的宽度，不可以更改。

块级元素总是从新的一行开始，并占用可用的全部宽度(尽可能向左和向右延伸)

（内联标签可以被包含在块级标签中，成为它的子元素，而反过来则不成立）

2，改变元素的等级

以通过CSS display属性改变一个元素的视觉表现

例如，通过把display的值从”inline“修改为”block"

块元素（block）：<h1><h6><p><div>......

行联元素（inline）：<span><a><img><strong>.....

display属性：

• bolck：块元素默认值；该元素前后带有换行
• inline：内联元素默认值；该元素前后没有换行
• inline-block：行内元素；元素具有内联元素属性，也有块元素属性
• none：设置元素不会显示；显示效果跟删除一致

display特性：

• block，inline：块元素与行元素的转变
• inline-block：控制块元素排到一行；位置方向不可控制，会解析空格
• none：控制元素的显示与隐藏

inline：内联元素默认值；该元素前后没有换行

<div class="lus" style="display: inline">块级元素</div>
<p class="hs">块级元素</p><br><br>

运行结果

使块级元素变化成行元素

行元素变成块元素

<span id="hons" style="display:block;">行内元素</span>
<a id="fs">行内元素</a>

运行结果

 总结（重要）

以下内容是本文的重点知识

行内元素不从新行开始，只占用必要宽度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。

块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div。

修改元素的display属性，例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline"，并不会改变元素的类别和内容模型。例如，即使把span元素的display属性修改为”block“，它仍然属于行内元素并且不能内嵌div元素。