css中显示和隐藏的属性

CSS 是前端界必不可少的语言之一，其中显示和隐藏元素的属性更是我们常常会用到的。下文将对 CSS 中关于显示和隐藏的属性进行详细说明。

display

display: none;

表示将元素隐藏。隐藏后元素不再占据页面空间，且不可见。

display: block;

表示将元素以块级元素的形式显示。块级元素会在页面中独占一行，除非设置了 width 属性，否则宽度会默认填满整个父元素。比如 div、h1、p、ol、ul 等标签都是块级元素。

display: inline;

表示将元素以内联元素的形式显示。内联元素不会像块级元素那样独占一行，它们会尽可能占据一行的最左侧或最右侧。比如 a、span、img、input 等标签都是内联元素。

display: inline-block;

表示将元素以内联块元素的形式显示。内联块元素会像内联元素一样尽可能占据一行的位置，同时具有块级元素可设置宽高等属性的特点。比如 button、input、select 等标签都是内联块元素。

visibility

visibility: hidden;

表示将元素隐藏但依然占据页面空间。隐藏后元素不可见，但是该元素原本所在的位置依然占据空间。

visibility: visible;

表示将元素可见。该值常常用于将元素从

visibility: hidden;

总之，CSS 中的显示和隐藏属性十分方便实用，对前端的开发和调试都有很大的帮助。