CSS元素的显示与隐藏

当涉及到 CSS 元素的显示与隐藏时，可以使用 display、visibility 和 overflow 属性来实现不同的效果。

1. display 属性：用于控制元素的显示方式，常见取值包括：

   • display: none;：隐藏元素，并且不占据空间。
   • display: block;：以块级元素方式显示，会在新行上开始。
   • display: inline;：以内联元素方式显示，不会换行。
   • display: inline-block;：以内联块元素方式显示，可以设置宽高等属性。
   • display: flex;：使用 Flexbox 布局来排列元素。
   • display: grid;：使用 Grid 布局来排列元素。

2. visibility 属性：用于控制元素的可见性，常见取值包括：

   • visibility: visible;：元素可见。
   • visibility: hidden;：元素不可见，但仍占据空间。
   • visibility: collapse;：在表格中，行或列被折叠，但是它们仍占据空间。

3. overflow 属性：用于控制元素溢出内容的处理方式，常见取值包括：

   • overflow: visible;：内容不会被修剪，会呈现在元素框之外。
   • overflow: hidden;：内容会被修剪，并且不可见。
   • overflow: scroll;：如果内容溢出，会显示滚动条以便查看所有内容。
   • overflow: auto;：根据需要显示滚动条，如果内容未溢出，则不显示滚动条。

通过合理地运用这些属性，可以对元素的显示与隐藏进行精细的控制，以及对溢出内容的处理方式进行调整，从而实现更灵活的页面布局效果。