精通CSS之深入理解display属性none block inline和inline-block的区别和细节

内联(行内)元素的细节问题

当元素的display设置为inline的时候，那么这样元素就是内联元素，或者叫行内元素。行内元素大小是不能通过设置width和height来改变的，但img虽然是行内元素，但是他的大小却可以通过width和height来改变。这就非常奇怪了。
同时行内元素垂直的margin的没有效果的，但水平margin有效果，但水平的margin:0 auto又是没有效果的。读完本篇文章将给你答案。

display基本属性定义

首先看定义：

//block 块元素
//inline 内联元素
//inline-block 内联块元素
//none 不显示

display有非常多的值，这四个是非常基础的值。在实际使用的时候如果理解的不是很透彻，有时候会非常的困惑为什么这里要用这个。
而且不要和float混着理解，因为那是两回事。

display的默认值

display的默认值是不固定的。块元素默认都是block，反过来说，因为display的值是block，所以他被叫做块元素。行内元素默认是inline。反过来说，因为display的值是inline，所以他被叫做内联元素或者行内元素。

display各种属性值的特点及使用建议

首先最常用也最好用的是inline-block。因为在页面中，我们经常需要让父元素子适应子元素大小。inline-block默认就是这样，inline虽然也是可以自适应，但inline的宽高都是不可以改变的。当你需要水平居中的时候，优先考虑block，block水平居中是非常方便的。none可以实现隐藏的效果。
下面详细介绍特点，和在实际开发中的使用情况

inline 行内元素

span,a,img都是非常常用的行内元素。在浏览器的样式表里面，是看不到display这个属性的，这个属性在盒子模型里面可以看到，可以看到span,a,img的display默认值都是inline，这是符合我们的猜想的。

1.inline自适应子元素大小 从左往右排列。
内容多大，内联元素就多大，在文档流里面，所以从左往右排列，没什么好说的。
2.inline元素不可以直接改变宽高
我们给span,a,img分别设置宽高。span和a的实际宽高都是没有改变的，用鼠标审查就可以知道。但img的实际宽高却发生了改变，这并不是因为inline的问题，而是img是属于一种特殊的元素，叫做可替换元素，可替换元素的展示效果不由css控制。

<iframe>
<video>
<embed>
<img>

有些元素仅在特定情况下被作为可替换元素处理，例如：

<option>
<audio>
<canvas>
<object>
<applet>

具体参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

        span{
            width: 200px;
            height: 200px;
        }
        a{
            width: 200px;
            height: 200px;
        }
        img{
            width: 200px;
            height: 200px;
        }

3.没有垂直margin,padding和border,只要水平margin,padding和border。margin的auto是无效的
没有垂直margin是CSS规范要求的，一个主要原因就是为了方便管理布局，块元素是独占一行的，可以垂直排列。对应的行内元素要在一行内，如果能够垂直margin,那么很可能会超出现在的行，那也就不是行内元素了。
参考官方文档：常规流中的块和内联布局
水平margin虽然有效果的，但是margin的auto功能是没效果的，根本原因还是因为不能改变宽高导致的。因为不能改变宽高，auto依赖的盒子模型计算公式就失效了，导致auto也失效了。
没有垂直padding和border同理，都是规范规定的。

一般情况下，我们不会单独的控制行内元素，而是放到div里面统一管理。

总结：

//inline 内联元素
//行内元素就是指display默认是inline的元素，比如a,span。 
1.inline自适应子元素大小 从左往右排列
2.inline元素不可以直接改变宽高
3.没有垂直margin,padding和border,只要水平margin,padding和border。margin的auto是无效的
项目实际使用情况：
一般情况下是不用inline的，因为在实际项目中几乎是没有什么元素会需要不改变大小，一般都是将inline改为block，这样可以实现文字水平居中等效果

block 块元素

block比inline简单的多，我们也更加的熟悉。div就是典型的块元素。

//block 块元素
块元素最大的特点就是独占一行，这也是最大的缺点，一般就最外层会用block独占一行。
1.block独占一行 从上到下排序
2.block元素可以直接改变宽高
3.margin有效 可以通过margin: 0px auto实现快速水平居中
4.padding有效
实际使用情况：
用的也比较多。

inline-block 行内块元素

//inline-block 内联块元素
inline-block最大特点实际上就是可以自适应子元素大小，并且宽高是可以改变的。
1.并不是独占一行 从左到右排序
2.可以改变直接宽高
3.margin有效 可以通过margin: 0px auto实现快速水平居中
4.padding有效
实际开发使用情况：
非常的有用，可以用来实现自适应子元素大小的布局。

none

//none
可以实现隐藏的效果。
实际开发情况：
比较常用。