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

- 日理万妓 2022-10-12 01:07 213阅读 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 的相对位置还是没有发生变化，因此仍然是无效的

在这里插入图片描述

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

2）块级元素（block / table）

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

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

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

在这里插入图片描述

  1. <div style="margin:10px;width: 100px;height: 100px;background-color: #6c9eff;">
  2.             block
  3. </div>
  4. <div style="margin:10px;width: 100px;height: 100px;background-color: #6c9eff;">
  5.             block
  6. </div>

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

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

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

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

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

  • 不独占一行

  • width 可调整
    在这里插入图片描述


  • margin 和 padding 可调整
    在这里插入图片描述


3. 总结






























独占一行 宽高 内外边距
block 是 可调整 可完全调整
inline 否 不可调整 部分调整
inline-block 否 可调整 可完全调整

常见的块级元素：

  div h1 h2 table ul ol p

常见的行内元素：

  span img input button

发表评论

表情：
评论列表 （有 0 条评论，213人围观）

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

相关阅读