display属性详解

ERGYW • 2025-01-13 13:23 • 编程

display属性定义了元素的展示类型，常用的属性有block、inline、inline-block、flex等，通过修改display属性，我们可以方便的控制元素的布局和显示方式。

  /* 修改 div 元素的展示类型为 inline */
  div {
    display: inline;
  }

上述代码将会把一个原本是块级元素的 div 元素变成一个行内元素，从而改变它的布局方式。

display属性的值还可以是 none，这种情况下元素会从页面流中移除，不会再占据空间，也不会对文档流产生任何影响。可以通过 JavaScript 动态地控制元素的显示和隐藏。

  /* 隐藏某一个 div 元素 */
  div {
    display: none;
  }

display属性的值是比较多的，我们来详细的了解一下每一个取值的意义和应用场景。

block类型的元素会在页面上单独占据一行，例如 div、h1、p 等元素。这种元素最明显的特征是：总是从新行开始。

当仅仅设置display: block; 时，元素宽度默认占据其父容器的 100%。

  /* 将列表元素 ul 改为块级元素 */
  ul {
    display: block;
  }

inline元素通常没有设置宽度和高度，其宽度和高度是由内容决定的，例如 span、a、img 等元素。这种元素通常是行内元素。

  /* 将一个 div 元素的展示属性改为行内元素 */
  div {
    display: inline;
  }

inline-block 元素是行内块元素，与行内元素类似，但是可以设置宽度和高度等属性，和块级元素一样可以占据多行的空间。

  /* 将表单按钮改为行内块元素 */
  button {
    display: inline-block;
  }

flex布局是CSS3中的一种新特性，它使得我们可以更方便的创建复杂的布局，得到更加灵活的盒模型。

flex属性是对容器设置的，用于指定当前容器使用flex布局，而不是block或者其他类型的布局。

  /* 将容器的布局方式改为flex */
  .container {
    display: flex;
  }

display属性的取值还有很多，下面列出一些常见的值和对应的特征。

下面是常见的 display 属性值及其解释：

block 元素最常见的是 div 元素，通过 block 元素使得具有相同语义的元素能够聚集起来，形成了网页中的一个个区块。block 元素默认宽度占据父元素的全部宽度。

  /* div 块级元素 */
  div {
    display: block;
  }

display 属性用于控制元素的布局和显示方式。不同类型的元素采用不同的布局方式和显示形式，通过修改 display 属性，可以方便的控制元素的表现。

原创文章，作者：ERGYW，如若转载，请注明出处：https://www.506064.com/n/325039.html