在 CSS 中，可视和隐藏属性是非常重要的一部分。通过这些属性，我们可以决定页面上元素是否显示和占据空间。

在 CSS 中，有两个属性来控制元素的可见性：visibility 和 display。

visibility 属性控制元素是否可见，但仍然占据空间。默认值是 visible。如果将其设置为 hidden，则元素不可见，但仍然占据空间。如果将其设置为 collapse，则在表格中使用时，将行隐藏起来。

element {
visibility: visible; /* 默认值 */
visibility: hidden; /* 元素不可见，但仍占据空间 */
visibility: collapse; /* 在表格中使用，将行隐藏起来 */
}

display 属性控制元素是否可见，并决定元素如何显示。默认值是 block，元素在页面中占据一整行。其他常见的值包括 inline，元素在页面中占据一行的一部分，并允许其他元素在同一行上显示，以及 none，元素不可见，也不占据空间。

element {
display: block; /* 默认值，元素在页面中占据一整行 */
display: inline; /* 元素在页面中占据一行的一部分 */
display: none; /* 元素不占据空间，也不可见 */
}

在实际开发中，我们经常使用可视和隐藏属性来控制页面上的元素。例如，在响应式 Web 设计中，我们可以使用这些属性来隐藏或显示不同大小的屏幕上的元素。

总的来说，可视和隐藏属性是我们在 CSS 中必须要掌握的技巧。通过这些属性，我们可以控制页面上元素的可见性和空间占用，实现更加灵活多样的页面效果。