【CSS】哪些元素是块级、哪些是行内元素？

- 日理万妓 2022-10-12 01:07 154阅读 0赞

# 1. 前言 #

今天会对以下三个概念进行简单而容易理解的区分

*  `inline`：行内元素
 *  `block`：块级元素
 *  `inline-block`：行内块级元素

# 2. 介绍 #

先从两个特点完全相反的概念入手：`行内元素` 和 `块级元素`

**1）行内元素（inline）**

*  不独占一行
 *  不能更改 `width` 和 `height`，尺寸由内容撑开
 *  可使用 `padding` 和 `margin`（但如下属性设置无效：padding-top / padding-bottom / margin-top / margin-bottom）

典型的例子如 `<span>` 标签，均验证了如上特性：

*  两个元素默认情况下排列在同一行
 *  尽管我设置了宽度1000px，它的宽度仍然是由内容撑开
 *  尽管当你设置 `padding-top` 时能看到有背景色有填充，但是两个 span 的相对位置还是没有发生变化，因此仍然是无效的

![在这里插入图片描述][20210702102715626.png]

<span style="width: 1000px;padding-top:100px;background-color: #ffcc66;">inline</span>
    <span>inline</span>

**2）块级元素（block / table）**

*  独占一行
 *  可以更改 `width` 和 `height`
 *  可使用所有的 `padding` 和 `margin`

典型的例子如 `<div>` 标签，均验证了如上特性：

*  默认情况下，两个方块分成两行排列
 *  `width` 和 `height` 均设置有效
 *  橙色部分为 `margin`，证明该属性的四个方向均可使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]

<div style="margin:10px;width: 100px;height: 100px;background-color: #6c9eff;">
    			block
    </div>
    <div style="margin:10px;width: 100px;height: 100px;background-color: #6c9eff;">
    			block
    </div>

综上两种形式，特性有利有弊，那如果我需要一个 `不独占一行，且能更改 width、padding 等属性` 的元素该怎么做？

**3）行内块级元素（inline-block）**

结合了行内元素和块级元素，特性如下：

*  不独占一行
 *  可更改 `width` 和 `height`
 *  可使用 `padding` 和 `margin`

典型的标签如 `<button>` 标签，可以验证如上特性：

*  不独占一行
 *  `width` 可调整  
    ![在这里插入图片描述][20210702102810787.png]

<button style="width: 150px;">inline-block</button>
    <button>inline-block</button>

*  `margin` 和 `padding` 可调整  
    ![在这里插入图片描述][20210702102830616.png]

<button style="width: 150px;padding: 20px;margin:20px;">inline-block</button>
    <button>inline-block</button>

# 3. 总结 #

<table> 
 <thead> 
  <tr> 
   <th align="center"></th> 
   <th align="center">独占一行</th> 
   <th align="center">宽高</th> 
   <th align="center">内外边距</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">block</td> 
   <td align="center">是</td> 
   <td align="center">可调整</td> 
   <td align="center">可完全调整</td> 
  </tr> 
  <tr> 
   <td align="center">inline</td> 
   <td align="center">否</td> 
   <td align="center">不可调整</td> 
   <td align="center">部分调整</td> 
  </tr> 
  <tr> 
   <td align="center">inline-block</td> 
   <td align="center">否</td> 
   <td align="center">可调整</td> 
   <td align="center">可完全调整</td> 
  </tr> 
 </tbody> 
</table>

常见的块级元素：

div h1 h2 table ul ol p

常见的行内元素：

span img input button

[20210702102715626.png]: /images/20221005/64296600d697428ab82bea19c04bb44d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221005/2ec35eade58d4b7b90b40a4f3729f31b.png
[20210702102810787.png]: /images/20221005/aca4b26fff534175b662a64c2eb04121.png
[20210702102830616.png]: /images/20221005/086ff3627c174349ac35192ca7bfc242.png