CSS的display的显示属性

display属性

关于display属性，在w3c官方文档中给出的解释是用来定义建立布局时元素生成的显示框类型。我们可以简单理解为定义一个元素应该如何显示

1，none

<div class="hide"></div>

  <style>
  .hide{
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: hidden;
  }
  </style>

设置了display：none之后，哪怕是给元素设置了宽高和背景颜色，在页面上依旧看不到，这就是设置了元素隐藏，但与visibility：hidden不同的是，设置display：none之后，是不占位置隐藏的，常常在后面用来实现一些类似点击消失，点击再出现的效果，而visibility：hidden是要占位隐藏的，即形不见，魂仍在。

2，block

即让元素已块级形式展示，换句话讲就是把非块级元素转换成块级元素，块级元素的特点有：

1. 一行只能有一个块级元素，不能多个并列
2. 可以利用margin：0 auto设置这个块级元素水平居中
3. 可以设置宽高
4. 默认的宽为父级元素的宽
5. 文字类的块级标签是不能包裹其他块级标签的，如p标签，h1等文字类标签，里面只能放文本

常见的块级元素有ul，div，table等等

3，inline

作用为把非行内元素转换为行内元素，行内元素的特点有：

1. 多个行内元素可以排列成一行
2. 行内元素不可以设置宽高，默认的宽高就是内容的宽高
3. 可以设置左右的margin和padding，不能设置上下的。换而言之，我们可以利用padding来改变行内元素的宽
4. 行内元素只能嵌套文本和行内标签，但是a标签除外（a
5. 标签不要嵌套a标签）

4，inline-block

将非行内块元素转换成行内块元素，行内块元素的特点有：

1. 行内块元素可以多个排成一行
2. 行内块元素之间具有默认的间距
3. 可以设置宽高，但是margin：0 auto对行内块没有作用

<div></div>
 <div></div>
 <div></div>
 
 <style>
 div{
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color:rosybrown;
 }
 </style>

效果为