HTML行内元素与块级元素的区别(超详细)

目录

• 行内元素
• • • 🌸常见的行内元素
    • 🌸行内元素（内联元素）的特性
• 块级元素
• • • 🌸常见的块级元素
    • 🌸块级元素的特性
• 相互转换(display)
• • • 🌸行内块状元素的特性

行内元素

🌸常见的行内元素

<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>

还有包括一些文本元素如：<br>  、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。

---

🌸行内元素（内联元素）的特性

1,和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列
2,高度、宽度是不可控的，设置无效，由内容决定。
3,根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

---

块级元素

🌸常见的块级元素

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr>  、<pre>、<address>、<center>、<marquee> 、<blockquote> 

---

🌸块级元素的特性

1,总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
2,高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3,宽度没有设置时，默认为100%；
4,块级元素中可以包含块级元素和行内元素。

---

相互转换(display)

---

当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种

1,display:inline;转换为行内元素；
2,display:block;转换为块状元素；
3,display:inline-block;转换为行内块状元素

---

🌸行内块状元素的特性

1,行内块状元素综合了行内元素和块状元素
2,不自动换行，与其他行内元素都会在一条水平线上排列；
3,高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
4,默认排列方式为从左到右。

---

OK,以上就是关于HTML行内元素与块级元素的区别的全部内容啦!