在 CSS 中，display 属性可以设置哪些值？这些值分别起到什么作用？请列举常见取值并说明其布局影响。

回答思路

1. 【回答框架 1】display 属性用于设置元素生成的盒类型，决定元素在页面中的显示方式。常见值包括 block、inline、inline-block、none、flex、grid、table 系列及 list-item 等。block 元素独占一行，可设置宽高和上下 margin；inline 元素不换行，宽高和上下 margin 无效；inline-block 结合两者，不换行但可设宽高和上下 margin。
2. 【回答框架 2】none 使元素不生成盒也不占空间，与 visibility:hidden（保留空间）不同。flex 和 grid 创建弹性或网格布局，使子元素遵循相应布局规则。table 相关值如 table、table-row、table-cell 模拟表格布局。其他如 list-item 使元素表现为列表项，带项目符号。
3. 【回答框架 3】选值需根据布局需求和语义确定，如导航常用 flex，内容块用 block，小图标用 inline-block。display 改变只影响布局渲染，不影响元素语义和可访问性。
4. 【回答框架 4】现代布局优先考虑 flex 和 grid，块级元素默认 block，文本行内元素默认 inline。注意 display 值有些可继承性差异，但 display 本身不继承。
5. 【回答框架 5】在不同浏览器中大部分 display 值支持良好，但旧浏览器对某些新值如 flex 需前缀或降级方案。建议先掌握核心值，再扩展。
6. 【关键点 1】display 值决定盒类型：block 独占一行，inline 不换行，inline-block 两者兼顾。
7. 【关键点 2】none 隐藏且不占空间，visibility:hidden 仅隐藏但保留空间。
8. 【关键点 3】flex 和 grid 实现现代布局，table 系列模拟表格布局。
9. 【关键点 4】display 不继承，仅影响渲染，不影响语义。
10. 【关键点 5】选择 display 值需结合布局需求与浏览器兼容性。
11. 【易错点 1】混淆 display:none 与 visibility:hidden 的空间占用区别。
12. 【易错点 2】认为 inline 元素无法设置宽高，忽略 inline-block 可设。
13. 【易错点 3】忽视 flex 和 grid 对子元素默认 display 的影响，如 flex 容器子项成为 flex item。