CSS display 属性用法详解（css中display属性和hover属性）
zhezhongyun 2025-05-02 14:48 9 浏览
前端小伙伴们，在使用css的display的属性的时候是不是经常会迷惑怎么使用，今天就来详细讲解下。
CSS 的 display 属性用于定义元素应如何显示在页面上。它控制元素的布局和行为，是前端开发中非常重要的一个属性。以下是 display 属性的详细用法：
常见的 display 值
- block
- 将元素显示为块级元素。
- 每个块级元素都会独占一行，宽度默认为父容器的 100%。
- div {
display: block;
} - inline
- 将元素显示为行内元素。
- 元素不会独占一行，相邻的行内元素会在同一行显示。
- span {
display: inline;
} - inline-block
- 结合了块级元素和行内元素的特性。
- 元素不会独占一行，但可以设置宽高。
- div {
display: inline-block;
} - flex
- 将元素设置为弹性盒子容器，子元素可以灵活排列。
- .container {
display: flex;
} - grid
- 将元素设置为网格容器，子元素可以按网格布局排列。
- .container {
display: grid;
} - none
- 隐藏元素，不占据任何空间。
- .hidden {
display: none;
} - table, table-row, table-cell
- 分别将元素设置为表格、表格行和表格单元格。
- table {
display: table;
}
tr {
display: table-row;
}
td {
display: table-cell;
} - list-item
- 将元素设置为列表项，通常与 <li> 标签一起使用。
- li {
display: list-item;
} - inline-flex
- 结合了 inline 和 flex 的特性。
- .container {
display: inline-flex;
} - inline-grid
- 结合了 inline 和 grid 的特性。
- .container {
display: inline-grid;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property Example</title>
<style>
.block {
display: block;
width: 100px;
height: 100px;
background-color: lightblue;
}
.inline {
display: inline;
background-color: lightgreen;
}
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightcoral;
}
.flex-container {
display: flex;
background-color: lightgray;
}
.flex-item {
background-color: lightyellow;
margin: 5px;
padding: 10px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightgray;
}
.grid-item {
background-color: lightyellow;
padding: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="block">Block</div>
<span class="inline">Inline</span> <span class="inline">Inline</span>
<div class="inline-block">Inline Block</div> <div class="inline-block">Inline Block</div>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
</div>
<p class="hidden">This paragraph is hidden.</p>
</body>
</html>
总结
display 属性是 CSS 中非常强大的工具，通过改变元素的显示方式，可以实现各种复杂的布局效果。理解并熟练运用 display 属性，对于前端开发来说是非常重要的。question_type_trigger
相关推荐
- 前端面试:聊聊 meta 标签?（meta标签用法）
-
提供给页面的一些元信息（名称/值对），有助于SEO。Meta标签是HTML中用于定义文档类型声明的标签。它们通常被用在head标签中，与文档的body标签相关联。在一个有head...
- web网页性能分析系列（网页性能指标有哪些）
-
在前端开发中，App或者WebPage性能的好坏和响应速度，尤其是App端显得格外重要，一直都是前端很头疼的问题。专业的测试工具可以知道自己的网页还有哪些需要优化的地方，总体的评分是多少，是否合乎用...
- [抓狂瞬间] 5 大差异 + 布局绝招!前端元素面试通关秘籍
-
刚入行的搬砖工程师，面对面试必问题“行内元素和块级元素有啥区别”，是不是心跳加速，大脑却一片空白？别担心！这看似基础的问题，实则是面试逆袭的突破口。今天就带你深入剖析，用5个关键差异，解锁前端布...
- python中Django视图(view)的详解(附示例)
-
本篇文章给大家带来的内容是关于python中Django视图(view)的详解（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一个视图函数（类），简称视图，是一个简单的Pyt...
- MySQL进行整库数据备份「表(结构+数据)、视图、函数、事件」
-
前言 通常情况下，我们需要改什么地方就备份什么地方就可以了，但也免不了需要整库备份的时候，本文记录实现MySQL使用脚本进行整库数据备份【表（结构+数据）、视图、函数、事件】 主要是使用mys...
- python入门-day14-周末小项目（python周末培训班哪个好）
-
周末小项目-简易记事本的内容。这是一个综合练习，结合之前学过的函数、文件操作和异常处理，设计一个简单的命令行记事本程序。我会用清晰的步骤和代码带你实现添加、查看、删除笔记并保存到文件的功能，确保...
- Python必会的50个代码操作（python代码介绍）
-
学习Python时，掌握一些常用的程序操作非常重要。以下是50个Python必会的程序操作，主要包括基础语法、数据结构、函数和文件操作等。1.HelloWorldprint("Hello,...
- ScalersTalk成长会Python小组第7周学习笔记
-
Scalers点评：在2015年，ScalersTalk成长会完成Python小组完成了《Python核心编程》第1轮的学习。到2016年，我们开始第二轮的学习，并且将重点放在章节的习题上。Pytho...
- 电脑CMD命令与电脑工作效率提升（cmd使用提升命令）
-
在日常使用电脑同时按“windows+R”，可以弹出来一个框然后输入CMD弹出以下框：在这个框中输入一些内容可以简化一些我们的电脑操作好的，以下是一些最常用的CMD命令，按功能分类整理，适合日常使用和...
- 多线程实现消息推送并可重试3次以及1小时后重试
-
#-*-coding:utf-8-*-"""CreatedonTueApr2209:05:462025@author:1""&#...
- RBAC权限模型（rbac权限模型的优点）
-
RBAC权限模型RBAC权限模型（Role-BasedAccessControl）即：基于角色的权限控制。这是目前最常被开发者使用也是相对易用、通用权限模型。准备工作CREATETABLE`s...
- 如何使用PIL生成验证码?（pixivic验证码）
-
web项目中遇到使用验证码的情况有很多，进行介绍下使用PIL生成验证码的方法。安装开始安装PIL的过程确实麻烦各种问题层出不绝，不过不断深入后就没有这方面的困扰了：windows安装：直接安装Pil...
- 技术是这样应用的(一)（技术的运用）
-
WindowsServer2003路由与远程访问在计算机网络教室使用过程中网络访问控制的实现目前很多计算机网络教室采用双网卡服务器的路由和远程访问功能，通过NAT地址转换实现教室内学生机的互联网访...
- Flask-RESTful 用法指南（flask写restful接口）
-
Flask-RESTful是一个Flask扩展，用于快速构建RESTfulAPI。它提供了简单的语法来创建资源路由，并内置了请求解析和响应格式化功能。##安装首先安装Flask-REST...
- Python办公自动化系列篇之三:PowerPoint演示文稿(.pptx)
-
作为高效办公自动化领域的主流编程语言，Python凭借其优雅的语法结构、完善的技术生态及成熟的第三方工具库集合，已成为企业数字化转型过程中提升运营效率的理想选择。该语言在结构化数据处理、自动化文档生成...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)