cssvisibility和display属性区别

上周 我那个朋友 跟你讲visibility和display区别
display:none 完全没空间 后续元素往前挤 恢复显示要记类型 改display属性值
visibility:hidden 保留空间 后续元素不挤 恢复显示简单 改visibility值就行
性能上 display触发回流 visibility只触发重绘 回流更耗性能
屏幕阅读器 display:none完全看不到 visibility:hidden能读到 影响无障碍访问
替代方法 aria-hidden="true" 不读也不占位 适合特定场景
动画支持 visibility可以淡入淡出 display不行 要opacity+transition模拟
其他方法 opacity:0 透明但占位 可以点事件 clip-path裁剪 绝对定位移出视口
判断可见性 display:none用offsetWidth===0 visibility用getComputedStyle
选哪个看需求 要空间动画用visibility 要彻底隐藏用display:none 复杂情况自己组合

css 中 display 属性作用 css 中 display 属性的使用场景

哎呦，说起CSS中的display属性，那可真是老生常谈了。
这玩意儿就像装修房子时用的电线，虽然看不见，但作用可大了去了。
它主要就是控制元素的盒子类型和布局行为，决定了元素在页面上的表现，是块级、行内还是其他啥的。

一说到基础盒子类型，那可多了去了。
比如，display:block，这就像是个独立的小房间，它独占一行，宽度默认填满父容器，可以设置宽高、边距啥的。
比如，有个div或者p或者h1 ，你想让它独立出来，就用这个。
我之前在一个项目里，就是用这个让几个导航按钮独立成行，看起来整齐多了。

然后是display:inline，这就像是个贴在墙上的装饰品，它跟着文本走，宽度只占内容宽度，设置宽高、垂直方向的边距都不管用。
像span或者a或者strong，你想要嵌在文本里，就用这个。

还有个display:inline-block，这就像是既能贴在墙上又能独立的小柜子，它有inline的特性，又能设置宽高和边距。
比如导航菜单、图标列表，你想要它们并排且固定尺寸，就用这个。

再说到现代布局模式，比如display:flex，这就像是能自由伸缩的房间，你把容器变成弹性容器，子元素就能灵活排列、对齐和分配空间。
响应式导航、卡片布局啥的，就需要这个。

还有display:grid，这就像是能自由划分的房间，你创建二维网格布局，就能实现复杂结构。
响应式设计，比如根据屏幕尺寸切换列数，就用这个。

然后是响应式设计中的关键应用，比如隐藏/显示元素，display:none，这就像是把房间彻底封起来，元素不占空间，但屏幕阅读器啥的读不到。
替代方案有visibility:hidden，或者position:absolute，把元素移出视口。

布局模式切换，通过媒体查询结合flex或grid，实现不同屏幕下的布局重构。

高级用法嘛，比如display:table，模拟表格布局，实现垂直居中或等高列；display:list-item，生成列表标记；display:contents，元素不生成盒子，子元素直接参与父容器布局。

但是，这玩意儿也有潜在陷阱，比如inline垂直间距问题，垂直margin/padding可能无效，得改为inline-block或block；inline-block间隙，由HTML空白字符引起，得移除空白、设置font-size:0或使用flex/grid解决；display:none与SEO，隐藏关键内容可能影响搜索引擎抓取，得用替代方案；过度依赖旧技巧，比如float布局，现代项目应优先使用flex或grid。

总之，display属性是CSS布局的核心，从基础的block、inline到现代的flex、grid，再到特殊场景的table、contents，理解并合理运用这些值，能高效构建健壮、响应式的网页布局。
同时，要注意潜在陷阱，避免过度依赖过时技巧。
说实话，我当时也没想明白这些细节，但实践多了，慢慢就明白了。

display在css中是什么意思

CSS中display属性，直接说就是控制元素布局的关键。
作用包括定义显示类型和布局行为。


显示类型：inline（内联）、block（块级）、inline-block（内联块）、none（隐藏）、flex（弹性布局）、grid（网格布局）。

布局行为：独占一行、宽度高度、对齐方式等。

常用值解析：
inline：如、，宽度高度由内容决定。

block：如

，独占一行，可设置宽高。

inline-block：如<button>，内联但可设置宽高。

none：隐藏元素，不占空间。

flex：子元素自动调整大小和位置。

grid：二维布局，精确控制行列和位置。

使用场景：
调整默认显示类型，如水平菜单。

隐藏元素，实现交互效果。

现代布局，flex和grid简化设计。

注意事项：
优先级：可能受其他属性影响。

性能：频繁切换可能影响性能。

兼容性：旧浏览器需前缀或降级方案。

总之，display是CSS布局的核心，合理使用能高效控制页面结构。

标签： display visibility