[分享]css中display的属性解析

CSS中display属性决定了一个元素的显示方式。它有很多的取值，不同的取值具有不同的特性。其中常用的取值如下：display: none;//不显示，元素将被隐藏 display: block;/...

CSS中display属性决定了一个元素的显示方式。它有很多的取值，不同的取值具有不同的特性。

其中常用的取值如下：

display: none;//不显示，元素将被隐藏
display: block;//块元素，独占一行，默认宽度为父元素的100%
display: inline;//行内元素，不会独占一行，默认宽度为内容的宽度
display: inline-block;//行内块元素，可以设置宽度和高度，但是不会独占一行
display: flex;//弹性盒子，在父容器中可以通过设置不同的属性来对子元素进行布局 

其中有一些取值需要特别说明：

none 和 block：none 值表示元素不显示，即完全隐藏。如果使用none值，那么它所占据的空间也将被释放；而block值表示该元素会独占一行，宽度默认为父元素的100%。

inline 和 inline-block：inline值表示该元素是行内元素，不会独占一行，宽度默认为内容的宽度。而inline-block值表示该元素是行内块元素，可以设置宽度和高度，但是不会独占一行。这两个值经常被用来解决一些布局上的问题。

flex：flex值是近些年CSS中比较流行的一个值，它可以让我们更加方便地进行布局。使用flex值需要在父容器中设置display:flex，然后可以通过设置一些属性，如：justify-content、align-items、flex-direction、flex-wrap等来对子元素进行布局。

总的来说，对于display属性的取值，我们需要根据实际情况进行选择，以达到我们所期望的布局效果。