1. display 属性：
display 属性定义了元素应该生成的框的类型，以及如何布局这些框。它可以取多种值，常见的包括：
- block：元素将生成一个块级元素框，即在页面上独占一行，从上到下排列。
- inline：元素将生成一个行内元素框，即在页面上不会独占一行，沿着文本流水平排列。
- inline-block：元素将生成一个行内块元素框，即在页面上不会独占一行，但可以设置宽度和高度。
示例：
.element {
display: block;
}
2. visibility 属性：
visibility 属性控制元素是否可见。它可以取两个主要的值：
- visible：元素是可见的。
- hidden：元素是不可见的，但仍然占据页面上的空间。
示例：
.element {
visibility: hidden;
}
区别：
- display 影响布局： 改变 display 属性会影响元素在页面上的布局方式。例如，从 block 切换到 inline 将使元素不再独占一行。
- visibility 影响可见性： 改变 visibility 属性会影响元素在页面上的可见性，但不会改变元素在布局中的位置。即使设置为 hidden，元素仍然占据空间。
组合使用：
这两个属性经常一起使用，比如在某些情况下，你可能希望在不显示一个元素的同时，保留它在布局中的位置，可以将 visibility: hidden; 与 display: none; 结合使用：
.element {
visibility: hidden;
display: none;
}
这样可以同时隐藏元素并将其从布局中移除。需要注意的是，这两个属性的组合使用会影响到元素的可访问性，因此在使用时要谨慎考虑。
转载请注明出处：http://www.zyzy.cn/article/detail/4007/CSS