作者:
WangMin
格言:努力做好自己喜欢的每一件事
网页上的每个元素都是一个矩形框。CSS中的display属性决定了矩形框的行为。display属性是我们在前端开发中常常使用的一个属性。
display的属性值如下：
| 属性值 | 含义 |
|---|---|
block |
块对象的默认值。用该值为对象之后添加新行 |
none |
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 |
inline |
内联对象的默认值。用该值将从对象中删除行 |
inline-block |
行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。 |
| inherit | 规定应该从父元素继承 display 属性的值。 |
| compact | 分配对象为块对象或基于内容之上的内联对象（已废除） |
| marker | 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用（已废除） |
| inline-table | 将表格显示为无前后换行的内联对象或内联容器 |
| list-item | 将块对象指定为列表项目。并可以添加可选项目标志 |
| run-in | 分配对象为块对象或基于内容之上的内联对象 |
| table | 将对象作为块元素级的表格显示 |
| table-caption | 将对象作为表格标题显示 |
| table-cell | 将对象作为表格单元格显示 |
| table-column | 将对象作为表格列显示 |
| table-column-group | 将对象作为表格列组显示 |
| table-header-group | 将对象作为表格标题组显示 |
| table-footer-group | 将对象作为表格脚注组显示 |
| table-row | 将对象作为表格行显示 |
| table-row-group | 将对象作为表格行组显示 |
其中常用的如上表黄色着重部分：block、none、inline、inline-block，下面我们就开始讲一下这几个常见的属性吧！
display:block
block： 将元素将显示为块级元素，元素前后会带有换行符，通常用于将行内元素转换为块级元素时使用。那么什么是块级元素呢？什么是行内元素呢？
块级元素：
- 总是以一个块的形式表现出来，==占领一整行==。若干同级块元素会从上之下依次排列（使用float属性除外）。
- 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
- 当元素宽度（width）没有设置时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
- 块级元素中可以嵌套其他块级元素或行内元素。
- 块级元素的display属性值默认为block。
行内元素
- 它
不会单独占据一整行，而是只占领自身的宽度和高度所在的空间，也就是元素的的宽高度是由它的文本内容撑开。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。 - 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
- 行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
- 行内元素一般不可以包含块级元素。
- 块级元素的display属性值默认为inline。
通过给一个行内元素设置为block后，元素可以设置width和height了。元素独占一行。这里我用行内元素 span来说明一下， 例子如下：
<span></span>
span{
width:200px;
height:200px;
display: block;
background:#f00;
}
没有给span设置display:block，span的宽高度由元素内容撑开，及时span设置了宽高度，如下：
给span设置display:block，span由行内元素转换为块级元素，span设置的宽高度就起作用了，如下：
除了上面对display:block的理解，它还有一个含义，表示显示元素。实际含义由项目需求而定。
除了给行内元素设置display:block使它转换为块级元素的方式以外，以下还有两种方式可以使行内元素转换为块级元素，如下：
第一种：给元素设置 float 属性
span{
width:200px;
height:200px;
float:left;
border:1px solid #ccc;
}
第二种：给行内元素设置position:absolute/fixed，效果跟第一种方法是一样的
display:none
display:none这个值表示元素不被显示。当你想要某个元素隐藏时，就可以给某个元素设置这个属性，它就会消失在网页中，但元素并没有在文档中删除，只是隐藏在网页结构中，不在网页中显示而已。但如果你想要元素显示的话，可以给元素设置display:block，元素就可以显示在网页中了。
display:inline
display:inline 的作用可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。这个块级元素实际的宽度和高度都是auto，并不是我们设定的值。如下：
<div>块级元素div</div>
div{
width:200px;
height:200px;
display:inline;
background:#f00;
}
从上面的例子可以看到，div本身是块级元素，因为设置了display:inline，它就有块级元素变为了行内元素，给div设置的宽高度就失效了，而它的宽高度就有它的文本内容撑开了。
display：inline-block
根据名字来看，我们可以得到它是结合了inline和block并保留了它们的特性。所以设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。
举例说明，我们在做横向导航菜单的时候，一般是用ul li a组合，ul li默认是竖向显示的，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。
默认效果：
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">商品</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">招聘</a></li>
</ul>
</div>
div>ul>li{
width:100px;
background:#f00;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
list-style: none;
}
设置了display:inline-block的效果:
div>ul>li{
width:100px;
background:#f00;
line-height: 30px;
text-align: center;
display: inline-block;
list-style: none;
}
从两个图可以看出，设置了display：inline-block后 li 能够在同一行显示，display：inline-block的效果几乎和浮动一样，但是它们其实还是区别。接下来就来讲一下inline-block和浮动 float 的比较。
1）不同之处：对元素设置display：inline-block ，元素不会脱离普通文档流，而float就会使得元素脱离普通文档流，且还有父元素高度坍塌（对于未知高度的元素）的效果，所以要清除浮动。普通文档流参照 CSS属性 Position的几种定位方式 对文档流的解释。
2）相同之处：能在某种程度上达到一样的效果。就以上的例子来说：
float浮动的效果：
就这么一看两个几乎是一样的效果，但仔细看看设置display：inline-block，li之间有间隙问题，而float浮动使 li 紧挨着。
3）浮动布局不太好的地方：参差不齐的现象，也就是元素高度不一样时，我们可以看到一个效果：
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
.box{
width:300px;
border:1px solid #ccc;
overflow: hidden;
}
.box>div{
width:100px;
float: left;
}
.box>.one{
height:100px;
background:#8A2BE2;
}
.box>.two{
height:150px;
background:#98FB98;
}
.box>.three{
height:100px;
background:#CCCCCC;
}
.box>.four{
height:150px;
background:#CD853F;
}
设置float的效果，div排列得参差不齐：
设置display: inline-block;的效果，每一个div都很有序的排列：
从上面可以看出浮动的局限性在于，如果要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现子元素排列得参差不齐，而inline-block就不会。
display：inline-block存在的间隙问题：
1）用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手敲个回车，而这个回车会产生回车符，回车符相当于空白符。间隙产生的原因就是我们没怎么注意的空白符。
2）去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。但是它会影响元素内部文本的显示。
3）浏览器兼容性：ie6/7是不兼容 display：inline-block的，所以用以下代码处理以下：
对于行内元素直接使用：{dislplay:inline-block;}
对于块级元素：需添加 {display:inline;zoom:1;}
总结
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
a. 对于横向排列东西来说，我建议使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b. 对于浮动布局就用于需要文字环绕的时候。
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!
