display属性通过设置不同值控制元素显示类型和是否显示。1. display: none使元素完全消失且不占空间，display: block或inline可恢复显示；2. 可改变元素显示类型，如block、inline、inline-block、flex、grid，用于布局调整；3. 结合JavaScript动态修改display值或切换预定义类（如.hidden）实现显示隐藏交互；4. 与visibility: hidden不同，后者元素仍占位。display是布局和显示控制的核心属性。
在CSS中，display 属性是控制元素布局和是否显示的核心方式之一。通过设置不同的 display 值，可以改变元素的显示类型，甚至让元素不显示。下面介绍几种常见的用法。
1. 控制元素是否显示
使用 display: none 可以让元素完全从页面布局中消失，不占据任何空间。
示例：
div { display: none; }
这会让该 div 及其内容不可见，也不影响其他元素的排布。
立即学习“前端免费学习笔记（深入）”；
要让元素正常显示，使用：
div { display: block; } 或 display: inline; 等具体类型。
2. 改变元素的显示类型
display 还能改变元素原本的显示方式，常用值包括：
block：块级元素，独占一行（如 div、h1） inline：行内元素，与其他行内元素同行显示（如 span、a） inline-block：行内块元素，同行显示但可设置宽高 flex：启用弹性布局，方便对齐子元素 grid：启用网格布局，适合复杂结构例子：
把链接变成块级元素：
a { display: block; }
pollinations
属于你的个性化媒体引擎
231 查看详情
这能让整个链接区域更容易点击，常用于导航菜单。
3. 隐藏与显示切换（配合JavaScript）
实际开发中，常通过 JavaScript 动态修改 display 值来实现显示/隐藏效果。
比如：
document.getElementById("box").style.display = "none"; // 隐藏document.getElementById("box").style.display = "block"; // 显示
也可以预先定义 CSS 类：
.hidden { display: none; }
再用 JS 添加或移除该类来控制显示状态。
4. 注意与 visibility 的区别
display: none 和 visibility: hidden 不一样：
display: none —— 元素彻底消失，不占空间 visibility: hidden —— 元素看不见，但仍占据原来位置
基本上就这些。display 是最直接有效的控制元素显示方式的属性，灵活使用能实现各种布局和交互效果。
以上就是在css中如何用display控制元素显示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999750.html
微信扫一扫 
支付宝扫一扫 
