CSS学习05：块元素、行内元素、行内块元素

目录

1、块元素

常见的块元素：

块级元素的特点：

注意：

2、行内元素

常见的行内元素：

行内元素的特点：

注意：

3、行内块元素

常见的行内块标签：

 行内块元素的特点：

三种元素之间互相转换

三种元素的总结 

---

​​​​​​​

1、块元素

常见的块元素：

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

<div>是最常见的块元素 

块级元素的特点：

• 自身独占一行

• 高度、宽度、内外边距都可以自定义
• 宽度默认是父元素的100%
• 块元素里可以放行内、行内块、块元素

注意：

段落元素（文字元素）内不能放块元素

例如，p标签里不能放div标签，h1中也不能放div

---

2、行内元素

常见的行内元素：

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

其中<span>是最常见的行内元素

行内元素的特点：

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

• 高度、宽度的设置无效，只会被文字撑开。

• 默认宽度就是文本撑开的长度

• 行内元素只能容纳行内元素和文本 

注意：

超链接里不能容纳超链接

超链接可以放块级元素，但是为了代码工整，最好把a标签转换为块元素 

---

3、行内块元素

常见的行内块标签：

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

因为它们具有块元素的特点和行内元素的特点，故称为行内块元素。

 行内块元素的特点：

• 和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙
• 一行可以显示多个（行内元素特点）
• 默认宽度就是内容的宽度（行内元素特点）
• 高度、宽度、内外边距都可以自定义（块元素特点）

---

三种元素之间互相转换

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

例如：

div {

 display: inline-block;

}

这样div就转换为行内块元素，就不会独占一行了

---

三种元素的总结 

元素模式	元素排列	设置样式	默认宽度	包含
块元素	一行只能放一个块元素	高度、宽度、内外边距都可以自定义	父容器的100%	块元素可以包含任何标签
行内元素	一行可以放多个行内元素	高度、宽度、内外边距都不可以自定义	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行可以放多个行内&行内块元素	高度、宽度、内外边距都可以自定义	它本身内容的宽度