前端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 等。
希望本文对您有所帮助,如有不足之处,欢迎指正。