HTML + CSS 连载 | 12 - HTML 块级和行内级元素

一、HTML 元素类型

前面我们经常提到 div 是块级元素会独占一行，span 元素是行内级元素会在同一行显示。那么到底什么是块级元素什么是行内级元素？

HTML 是如何定义元素类型的？

HTML 元素有很多，如 h 元素、p 元素、div 元素等，当我们把这个元素放到页面上时，这个元素会为什么有的会独占一行有的会在同一行呢？

对于 h 元素来说，我们希望它是独占一行的，其他内容不应该同标题放在同一行，对于 p 元素来说，我们也希望它是独占一行的，一段一段的内容应该是分开的，而对于 img、span、a 元素，它们都是对内容中某一个细节的描述，当然没有必要独占一行。

所以为了区分哪些元素需要独占一行，哪些元素不需要独占一行，HTML 将元素类型分为两类，分别是：

块级元素：独占父元素的一行
行内级元素：多个行内级元素可以在父元素的同一行显示

但是本质上来说，块级元素和行内级元素是否独占一行的效果还是由 CSS 来实现的。

因此我们可以通过修改 CSS 属性来改变元素的块级元素特性或者行内级元素特性，修改特性通过 display 属性来实现。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 100px;
      background-color: #f00;
      color: #fff;

      /*修改该div元素的特性，改为行内级，一行内显示*/
      display: inline;
    }

    span {
      height: 100px;
      background-color: #f0f;
      /*修改span元素的特性，改为块级，独占一行*/
      display: block;
    }
  </style>
</head>
<body>
  <div class="box">我是box1</div>
  <div class="box">我是box2</div>
  <span>我是span</span>
  <span>我是span</span>
</body>
</html>

在浏览器中打开页面，可以看到 span 变成了块级元素，独占一行，而 div 元素变成了行内元素，并且设置的 height 属性也没有生效。

CSS 中 display 属性的属性值常用的有四个，包括上面代码中的两个，分别是：

block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素

二、CSS 的 display 属性

使用 display 属性设置元素特性需要注意的是，设置为 block 时为块级元素，独占一行，可以设置宽和高，设置为 inline 时为行内级元素，和其他内容在一行显示，不可以设置宽和高，宽高是由内容决定的。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: #f00;
      /*块级元素，可以设置宽高*/
      width: 200px;
      height: 300px;
    }

  
    span {
      background-color: #ff0;
      /*行内级元素，不支持设置宽高*/
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div>块级元素div</div>
  <span>行内级元素span</span>
</body>
</html>

浏览器中打开该页面，可以看到 div 元素设置的宽和高是生效了的，但是 span 元素设置的宽和高没有生效，因为 span 是行内级元素，不支持设置宽和高。

除了块级元素和行内级元素，还有一种类型的元素就是 img 元素，img 元素是行内可替换（inline-replaced）元素，可以设置宽高，但是内容又和其他内容在一行显示。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: #f00;
      /*块级元素，可以设置宽高*/
      width: 200px;
      height: 200px;
    }

  
    span {
      background-color: #ff0;
      /*行内级元素，不支持设置宽高*/
      width: 200px;
      height: 200px;
    }

    img {
      /*img 元素是行内替换元素，inline-replaced，可以设置宽和高，但是是和其他内容一行显示的*/
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>块级元素div</div>
  <span>行内级元素span</span>
  <img src="../images/1228984.png" alt="">
</body>
</html>

在浏览器中打开该 HTML 页面，可以看到 span 元素的内容和 img 在同一行，但是 img 元素有可以设置宽和高。

除了 img 元素外，video 元素、input 元素也是常用的行内替换元素。

除了根据元素本身的特性外，当我想让一个元素既可以设置宽高，又想让他们在一行显示，该如何实现呢？

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #f0f;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <a href="#">必应一下</a>
  <div class="box">我是box</div>
  <span>我是span</span>
</body>
</html>

正常情况下，显示应该是这样的，div 独占一行；

想要实现 div 元素既可以设置宽高，又可以和其他内容在同一行显示，可以修改 div 元素的 display 属性为 inline-block：

CSS 复制代码

  <style>
    .box {
      background-color: #f0f;
      width: 200px;
      height: 200px;
      /*既可以设置高度和宽度，又可以和其他内容在同一行显示*/
      display: inline-block;
    }
  </style>

在浏览器中打开页面，可以看到 a div 和 span 内容在同一行显示，并且 div 元素的宽和高都是生效的，设置为行内块级元素后，既可以设置宽高，又不会独占一行。

元素类型特点总结：

block 元素
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认有内容决定
inline-block元素
- 跟其他行内级元素在同一行显示
- 可以随意设置宽和高
- 对外来说，它是一个行内级元素，对外来说它是一个块级元素
inline 元素
- 跟其他元素在同一行显示
- 不可以随意设置宽高
- 宽高都由内容决定