一、display属性介绍
display 属性规定元素应该生成的框的类型。
以下是一些关于display比较常用的属性值：
| 值 | 描述 |
|---|---|
| none | 元素不会显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| line-block | 行内块元素。（CSS2.1 新增的值）[IE6/7不支持] |
| list-item | 此元素会作为列表显示。 |
| inline-table | 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 |
| table | 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 |
| table-row | 此元素会作为一个表格行显示（类似 tr）。 |
| table-cell | 此元素会作为一个表格单元格显示（类似 td 和 th）. |
| inherit | 规定应该从父元素继承 display 属性的值。 |
其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。
二、display:none
- 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。
三、display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
- block元素可以设置margin和padding属性；
- block元素可以设置width、height属性。
- 块级元素即使设置了宽度，仍然是独占一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行。
块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，如下图所示：
块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行，如下图所示：
四、display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
- inline元素设置width、height属性无效；
- inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。
如下图所示：
五、display:inline-block
- 将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。就是集合了block和inline的全部优点。width、height、margin、padding设置都会生效。
如下图所示：
常见考点
1. 基本概念
- 请简述 CSS 中的
display属性及其作用。 display属性的常见值有哪些？请列举并解释其含义。- 例如：
block、inline、inline-block、flex、grid、none等。
- 例如：
2. display: block
- 什么是
display: block？它会给元素带来哪些表现？ - 一个块级元素通常具有哪些特点？例如：它的宽度会如何变化？它是否会换行？
3. display: inline
- 什么是
display: inline？它与display: block有什么不同？ - 内联元素如何处理宽度和高度？它们是否会占据整个可用宽度？
- 如何让一个内联元素变得像块级元素一样换行？
4. display: inline-block
- 什么是
display: inline-block？它结合了inline和block的哪些特点？ - 使用
inline-block时，元素的宽高如何影响布局？ inline-block元素如何与其他元素对齐？
5. display: none
- 请解释
display: none的作用与visibility: hidden的区别。 - 使用
display: none会有什么样的表现？例如，它对页面布局有何影响？ - 当你将一个元素的
display设置为none时，它会消失，但仍然存在于 DOM 中。如何通过 JavaScript 使其重新显示？
6. display: flex
display: flex是什么？它通常用来实现什么样的布局效果？- 在使用
flex布局时，如何控制子元素的排列方向、对齐方式等？ justify-content、align-items、flex-direction等 Flexbox 属性的作用是什么？
7. display: grid
- 什么是
display: grid布局？它与flex布局有何区别？ - 在
grid布局中，如何设置行和列的大小？如何控制子元素的位置？ - 请举例说明
grid-template-columns、grid-template-rows、grid-gap等属性的使用方法。
8. display: table
- 什么是
display: table，它如何模仿传统的 HTML<table>元素？ - 使用
display: table时，如何控制表格的行和列布局？ display: table-row、display: table-cell和display: table-caption的作用是什么？
9. 布局模型对比：block vs inline vs flex vs grid
- 你如何选择使用
block、inline、flex或grid布局？ - 在实际项目中，什么时候使用
flex布局，什么时候使用grid布局？ - 请比较
flex和grid布局的优缺点及应用场景。
10. display 与其他布局属性
- 在使用
display: flex或display: grid布局时，如何与其他布局属性（如position、float等）配合使用？ - 如何解决使用
display: flex或display: grid布局时遇到的常见布局问题，例如元素溢出、对齐等？
11. display: none 与性能
display: none对页面性能有何影响？如何通过 JavaScript 动态控制显示/隐藏元素以提高性能？
12. display: contents
- 什么是
display: contents？它是如何工作的？它与其他display值有什么区别？ - 请举例说明
display: contents的应用场景及可能的问题。
13. display 的继承性
display属性是否继承？如果没有，如何通过样式继承的方式控制多个元素的display属性？- 你如何在多个嵌套元素中保持一致的布局设置？
14. display 的可见性与布局
display属性会影响元素的布局、渲染和可见性。请简要解释display: none和visibility: hidden的区别，它们对页面的影响不同吗？
15. 实际应用
- 请描述一个你在实际开发中使用
display属性解决布局问题的案例。 - 如果需要在一个响应式设计中调整元素的布局，如何根据屏幕尺寸调整
display属性？