[分享]css中display三个取值

CSS中的display属性是用来定义元素显示方式的，可以对一个元素进行显示和隐藏操作，同时也能够控制元素的布局方式。display属性有三个常用的取值： display: block; displa...

CSS中的display属性是用来定义元素显示方式的，可以对一个元素进行显示和隐藏操作，同时也能够控制元素的布局方式。display属性有三个常用的取值：

 display: block;
    display: inline;
    display: none; 

block和inline是最常见的两个取值。

当元素使用display:block;时，元素会以块级元素的形式展示出来。它会有一个完整的表示区域，也就是说它会占满整个父级容器所能给出的宽度。

当元素使用display:inline;时，元素会以行内元素的形式展示出来。它不会有一个完整的表示区域，也就是说它只会占据需要的宽度。换而言之，它会在一行内和其他元素横向排列。

那么，如果我们想要实现类似于菜单的效果时，就会使用inline-block了。

 display: inline-block; 

它是以上两种属性的结合，具有行内元素的特性，同时也享有块级元素的特性，这就意味着它可以在一行内排列，同时也允许设置宽高。

最后一个取值是none。

当元素使用display:none;时，元素将不会被显示出来。这个属性对于我们动态控制元素显示和隐藏是非常有用的。