CSS中display和visibility的区别
在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。以下是它们的主要区别：
1.display
定义：display 属性用于控制元素的显示类型和布局行为。
常见值：
- none：元素不会被渲染，且不占据空间。
- block：元素作为块级元素显示，通常会在新行开始。
- inline：元素作为行内元素显示，不会在新行开始。
- inline-block：元素作为行内块级元素显示，允许设置宽高，但仍在同一行。
- flex、grid 等：用于创建灵活的布局。
2.visibility
定义：visibility 属性用于控制元素的可见性。
常见值：
- visible：元素可见。
- hidden：元素不可见，但仍占据空间。
- collapse：在表格布局中使用，隐藏行或列时不占据空间。
效果：当 visibility 设置为 hidden 时，元素仍然存在于文档流中，但不可见，后续元素不会填补其空间。
示例
<div style="display: none;">这个元素不会显示，也不占据空间。</div>
<div style="visibility: hidden;">这个元素不可见，但仍占据空间。</div>
<div>这个元素是可见的。</div>