前端CSS每日一姿势

前端CSS每日一姿势——display属性的使用

一、display 的作用

CSS 的 display 属性是用来指定 HTML 元素应该生成的框的类型。它可以控制元素的外观、布局和行为。

通过修改 display 属性，我们可以将元素显示为块级元素、行内元素、行内块级元素、列表项、表格等不同的类型。

二、display 的基本用法

display 属性可以在 CSS 中直接使用。例如：

div {
  display: block;
}

这个样式将使得 div 元素显示为块级元素。除了 block 以外，display 属性还有许多其他的值，这些值会在下面的章节中详细介绍。

三、display 的属性值

在上面的内容中我们介绍了 display 属性的作用和基本用法，现在我们来详细介绍 display 属性的各个属性值。

1. block

display: block 表示元素会生成一个块级盒子。block值会使元素以块级元素的形式进行显示。具体来说，块级元素会占据一整行，并且可以设置宽度、高度、内边距和外边距等属性。例如，div元素默认的display属性值就block。相邻的块级元素会排列在一起，父元素会根据其子元素的高度来自适应高度。

例如：

div {
  display: block;
}

<div>这是一个块级元素</div>

2. inline

display: inline 表示元素会生成一个行内框盒子。inline值会使元素以行内元素的形式进行显示。具体来说，行内元素不会占据一整行，而是在一行中随文本排列，并且不能设置宽度、高度等属性。例如，a、span等元素默认的display属性值就是inline。元素会按照其内容的大小排列在一起，不会强制换行

例如：

span {
  display: inline;
}

<span>这是一个行内元素</span>

3. inline-block

display: inline-block 表示元素会生成一个行内块级盒子。inline-block值会使元素既具有行内元素的特点，又具有块级元素的特点。具体来说，行内块元素会在一行中排列，并且可以设置宽度、高度、内边距和外边距等属性。例如，img元素默认的display属性值就是inline-block。

例如：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div>这是一个行内块级元素</div>

4. none

display: none 表示元素不会生成框。none值会使元素不在页面中进行显示。具体来说，元素将不占据页面空间，也不会被屏幕阅读器等设备所识别。例如，通过设置display: none可以实现对页面中某个元素的隐藏。

例如：

div {
  display: none;
}

<div>这个 div 元素将不会显示在页面上</div>

5. display: table-*系列

在 HTML 中，我们通常使用 table 元素来创建表格。但是有些时候，我们需要在非表格元素上模拟表格的布局。这时，我们可以使用 display: table-* 系列属性。

- display: table

在 HTML 中，我们通常使用 table 元素来创建表格。但是有些时候，我们需要在非表格元素上模拟表格的布局。这时，我们可以使用 display: table-* 系列属性。

div {
  display: table;
}

- display: table-row

将元素表现为一个表格行，类似于 HTML 中的 tr 元素。

div {
  display: table-row;
}

- display: table-cell

将元素表现为一个表格单元格，类似于 HTML 中的 td 或 th 元素。

div {
  display: table-cell;
}

使用 table-* 系列属性可以模拟出表格的布局，同时也可以使非表格元素支持表格布局，但是需要注意的是，这些属性会使元素失去正常的文档流特性，所以不要在大范围内滥用。

6、display: flex

Flex 布局是一种新的布局方式，可以轻松实现不同的布局效果，尤其适合移动端页面的布局。display: flex 是使用 Flex 布局的前提，它定义了元素如何参与 Flex 布局，并决定了子元素的排列方向、排序方式等等。

.container {
  display: flex;
}

在上述代码中，.container 就成为了一个 Flex 容器。容器里的子元素就成为了 Flex 项目，根据 container 的属性值不同，可以产生不同的布局效果。相关属性不在此处详解。

7、display: grid

Grid布局是一种比较新的布局方式，它提供了更加强大和灵活的排版能力，适用于各种网页布局需求。是一种二维网格布局，它将网页元素划分为行和列，然后在这些行和列的交叉点上放置网页元素，从而实现页面布局。这种布局方式可以非常灵活地调整元素之间的间距、对齐方式、大小比例等，非常适用于复杂的网页布局需求。

.container {
  display: grid;
}

在上述代码中，容器元素.container就成为了一个网格布局容器，我们可以在其中添加网格单元格和内容。相关属性不在此处详解。

四、使用经验

1. 避免滥用 display: none;

虽然 display: none; 可以让元素在页面上消失，但它实际上是将元素完全移除，而不是只隐藏。如果在页面渲染后动态修改元素的样式为 display: none;，那么这个元素及其子元素将会被移除，这样会造成页面的重排和重绘，影响性能。因此，如果想要控制元素的显示和隐藏，推荐使用 visibility: hidden; 或 opacity: 0;。

2. 避免滥用 display: flex;

display: flex; 是一个非常有用的布局方式，它可以轻松地实现很多复杂的布局，但在某些情况下，滥用 flexbox 可能会造成不必要的性能问题。如果只是简单的水平或垂直居中，或者是两列布局，使用传统的 display: inline-block; 或者 float: left/right; 即可，不需要使用 flexbox。

3. 使用 display: grid; 实现复杂布局

在实现复杂布局时，display: grid; 可能是最好的选择。grid 布局可以让我们轻松地实现多列、多行、网格布局等复杂布局，而且使用起来非常简单。

五、总结

display 属性是 CSS 中非常重要的一个属性，掌握它的使用方法可以帮助我们更好地实现页面布局。在选择 display 值时，需要根据实际情况选择最合适的值，并且需要注意不要滥用某些值，以免造成性能问题。同时，在实际应用中，需要结合其他属性来实现更好的效果，例如 position、float、flexbox、grid 等。

希望本文对您有所帮助，如有不足之处，欢迎指正。