【CSS】display 属性

display 是 CSS 属性,用于控制元素的显示类型(display type)。它决定了元素如何在文档中生成布局和显示内容。

display 属性的常见取值有以下几种:

  1. display: block;:将元素呈现为块级元素。块级元素会独占一行,并且会在行与行之间创建一个新的换行空间。常见的块级元素有 <div>、<p>、<h1> 到 <h6> 等。

  2. display: inline;:将元素呈现为内联元素。内联元素不会独占一行,而是在一行内尽可能地排列。常见的内联元素有 <span>、<a>、<strong>、<em> 等。

  3. display: inline-block;:将元素呈现为内联块级元素。内联块级元素在一行内排列,并可以设置宽度和高度等样式,类似于块级元素。但是不会创建新的行。常见的内联块级元素有 <img>、<input> 等。

  4. display: none;:将元素隐藏。设置为 none 后,元素不会在页面中占据空间,也不会显示出来。它将完全从渲染流中移除。相当于元素不存在。

  5. display: flex;:将元素呈现为弹性容器。弹性容器允许子元素通过弹性布局进行排列和对齐。常见的用于构建响应式布局的属性。

  6. display: grid;:将元素呈现为网格容器。网格容器允许子元素通过网格布局进行排列和对齐。常用于复杂的网格式布局。

等等。

通过调整 display 属性,我们可以控制元素在页面中的排列和布局,实现不同的页面结构和样式效果。

相关推荐
疯华整猫3 分钟前
从 MVP 到 MVI,从 Java 到 Kotlin:老项目升级的避坑指南
前端
徐小夕@趣谈前端6 分钟前
Web 端 OFD 编辑器踩坑记:从“只能预览”到“在线改”
前端·编辑器
前端小万41 分钟前
想做个人副业别乱买服务器!我的 5 个月真实开销分享
前端·后端·github
用户69371750013841 小时前
我买的电视,我还不能研究它吗?
前端·后端·ai编程
Hilaku1 小时前
删了一个没用的 console.log,生产环境直接崩了!
前端·javascript·程序员
计算机魔术师1 小时前
Latent Space 解读 Anthropic 提交 S-1:拟以代码 AN 上市纳斯达克,H1 2026 营收 16.3B 美元
前端
2601_949847752 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
zyseo82 小时前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
夜雪一千2 小时前
标题特殊符号数据清洗实战:解决HTML实体、零宽字符、Emoji乱码踩坑
前端·html
richdata2 小时前
从采购承诺到库存周转:降低库存资金占用的六个计划杠杆
大数据·前端·javascript