CSS行内元素，块级元素，行内块元素，置换元素，非置换元素

晴空的code

已于 2023-10-20 19:07:43 修改

阅读量178

点赞数

分类专栏： CSS 文章标签： css html css3

于 2023-03-30 18:01:47 首次发布

本文链接：https://blog.csdn.net/qq_60856466/article/details/129863109

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

行内元素

特点:行内元素默认宽度是由内容撑开的，不能设置宽高，只能容纳文本或者其它行内元素，可以和其他元素在一行拼接显示。

常用行内元素:
a、span、i、em、strong、img

/*宽高演示*/
<style>
    span {
        margin-top: 10px;
        border: solid 1px black;
        width: 1000px;
        height: 1000px;
    }
</style>

<body>
    <span>你好世界</span>
</body>

为span元素设置了宽和高各位1000px,但是实际的效果却不是我们所想的，span的大小并没有发生变化。

<style>
    span {
        margin-top: 10px;
        border: solid 1px black;
        width: 1000px;
        height: 1000px;
    }
</style>

<body>
    <span>你好世界</span>
    <span>你好世界</span>
</body>

两个span元素可以在同一行显示。

块级元素

特点:块级元素默认的宽是容器的100%，可以设置宽和高，可以容纳其它块级元素或行内元素，并且独占一行。

常用行内元素:
div、h1~h6、p、ul、ol、li、table、form

<style>
      div {
          border: solid 1px black;
      }
</style>

<body>
    <div>你好世界</div>
</body>

如果没有明确的设置块级元素的宽和高，那么默认的高会被内容撑开，而默认的块会与父容器等宽，比如上述示例的div元素。

<style>
      div {
          border: solid 1px black;
          width: 100px;
          margin: 10px;
      }
</style>

<body>
    <div>你好世界</div>
    <div>你好世界</div>
</body>

上述示例中，两个div元素各自独占一行。

行内块元素

特点:行内块元素默认的大小取决于它包容的内容的大小，可以设置宽和高，可以容纳其它元素，不会独占一行。

常用行内块元素:
input、button、label、select

<style>
    .first {
        width: 100px;
        height: 100px;
    }
</style>

<body>
  <button class="first">按钮一</button>
  <button>按钮二</button>
</body>

元素类型转换

使用display属性可以转换元素的类型。

转换为块级元素

<style>
    span {
        display: block; /*将行内元素转为块级元素*/
    }
</style>

<body>
    <span>你好世界</span>
    <span>你好世界</span>
</body>

类型转换后两个span元素从并排变成了各自独占一行(变成了块级元素)。

转换为行内元素

<style>
    div {
        display: inline; /*转换为行内元素*/
    }
</style>

<body>
  <div>你好世界</div>
  <div>你好世界</div>
</body>

类型转换后两个div元素从独占一行变成了并排显示(变成了行内元素)。

转换为行内块元素

<style>
      div {
          display: inline-block; /*转换为行内块元素*/
      }
</style>

<body>
    <div>你好世界</div>
    <div>你好世界</div>
</body>

类型转换后两个div元素从独占一行变成了并排显示(变成了行内块素)。

替换元素和非替换元素

我们在写CSS的时候会用到img元素，会给img元素设置高和宽，并且设置的高和宽会生效，但是img元素属于行内元素，按理说行内元素是不能够设置宽和高的(除非转换为块级元素或者是行内块元素)。

为了解释这个现象不得不介绍另外两个概念置换元素和非置换元素(元素的另一种分类方式)。

在介绍置换元素和非置换元素之前先来介绍一下非常重要的概念:CSS的视觉格式化模型。

CSS的视觉格式化模型：CSS的视觉格式化模型是一个抽象的概念，它描述了CSS如何将文档中的元素呈现为视觉效果，该模型定义了元素的尺寸、位置、边框、内边距、背景、定位、浮动等样式属性在页面上的表现形式。

其中我们所了解的盒子模型就是CSS的视觉格式化模型内容之一。

现在我们来了解一下置换元素和非置换元素:

置换元素：置换元素是指其内容不受CSS控制，它们的内容通常是由浏览器根据元素的属性和上下文确定的。例如，img、input、textarea等元素，它们的内容并不是在CSS的盒模型中呈现的，而是由浏览器根据元素的属性和上下文进行渲染的。在某些情况下，置换元素的尺寸和位置可以受到CSS的控制，例如通过设置宽度和高度属性来控制img元素的大小。

非置换元素：非置换元素则是指其内容受CSS控制，它们的内容会在CSS的盒模型中呈现。例如，div、p、span等元素，它们的内容会受到CSS的尺寸、位置、边框等属性的控制，呈现为一个矩形盒子。

这里之所以说img元素的内容不受CSS控制是因为img元素的内容是受到img元素的src属性控制的而不是CSS。

正因为img是置换元素，所以img虽然是行内元素却又表现的脱离CSS的视觉格式化模型的控制(但是img元素又有一部分行内元素的特性，所以并没有完全脱离CSS的视觉格式化模型的控制)。

博客