display属性决定元素在布局中的角色：block独占一行可设宽高，inline并排显示但宽高无效，inline-block兼顾二者，flex/grid分别用于一维和二维布局，none彻底移除元素不占空间。
display 属性不是“怎么设好看”的问题，而是“元素在布局中到底算什么角色”的底层判断依据。设错值，轻则样式失效，重则整个流式布局崩掉。
为什么 display: inline 里设 width 和 height 没用
因为内联元素的盒模型天生不支持尺寸控制——它只按文本流走，宽度由字符撑开，高度由行高（line-height）间接影响。width、height、margin-top、margin-bottom 这些声明会被浏览器忽略（但不会报错）。
常见错误现象：
解决办法只有两个：
- 改用
display: inline-block（保留并排特性 + 支持宽高/上下边距） - 或直接切为
display: block，再用float/flex控制排列
display: inline-block 的空白缝隙是怎么来的
这个缝隙不是 bug，是 HTML 解析器把换行符和空格当作文本节点渲染的结果。只要标签之间有回车或空格，就会产生约 4px 的间隙。
典型场景：
- 导航栏用多个
+inline-block，菜单项间出现无法消除的白缝 - 按钮组横向排列，间隙破坏对齐
绕过方式（选其一即可）：
- HTML 中删掉标签间的换行与空格：
- CSS 中父容器设
font-size: 0，子元素再单独设字体大小 - 用
display: flex替代（更现代、无副作用）
display: none 和 visibility: hidden 的本质区别
display: none 是从渲染树中彻底移除元素：不占空间、不触发重排、监听器照常绑定但无法交互；visibility: hidden 只是“看不见”，元素还在文档流里，占位、可获焦点、能响应事件（除非加 pointer-events: none）。
容易踩的坑：
- 用
visibility: hidden做菜单隐藏，结果屏幕阅读器仍能读出内容（无障碍失败） - 切换
display: none ↔ block频繁时，引发连续重排，页面卡顿 - JS 里读
offsetHeight判断是否显示，display: none下永远返回 0，而visibility: hidden返回真实值
面试常问：display: table-cell 还值得学吗
它确实能实现垂直居中（配合 display: table 父容器），但这是 CSS2 时代的 hack 方案。现代项目基本不用——flex 或 grid 更可控、语义清晰、兼容性已无短板（IE11 是最后拦路虎，2026 年多数项目已不保）。
真正要留意的是兼容性断层点：
-
display: grid在 Safari 10.1+ 才稳定支持，旧版 iOS 必须降级 -
display: contents能让父元素“消失”只透出子元素，但 Firefox 直到 2025 年才修复部分崩溃问题 - 所有
table-系列值（table-row、table-cell）在可访问性上容易混淆屏幕阅读器，WCAG 2.2 明确建议避免用于非表格语义结构
复杂点从来不在语法本身，而在于你改一个 display 值时，有没有同步检查它对流式布局、可访问性、性能重排、以及旧浏览器 fallback 的连锁反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
