display定义和用法
定义：display 属性规定元素应该生成的框的类型。
首先 HTML可以将元素分类为行内元素、块状元素、行内块状元素
其次 要说明的是这三者是可以相互转换的，使用display属性可以将三者任意转换。其特点请看文章末尾的归纳 (｡♥ᴗ♥｡)
(这个属性 用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。)
属性：
1. display:none 顾名思义是指取消display相关指令
2. display:block 会将显示的元素变成块级元素，会使前后带有换行符
1
2
在这么一段代码中，元素里的1和2将会并列排序，若想将两个元素都变成块级元素，需在.one和.two的样式中加入display:block; (注意：这里注意不要加到外面的块元素content中，content本身是块元素，并且与目的将标签里的元素变为块元素不符 )
display:block前：
display:block后：
3. display:inline : 此元素会被显示为内联元素，元素前后没有换行符
这里补充一下内联元素
内联元素的显示，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
通常用于特殊布局，在同一行显示多个内容，可以使用内联元素实现，这样不需要将块级元素设置为浮动或绝对定位就可以在一行横排排版。
1
2
因为是块级元素，占据的宽度是100%，那么one和two会自动分行，如下图所示：
display:inline 前：
在这种情况下，若想使两个块级元素在同一行显示，那么可以分别在各自的属性中加入 display:inline
display：inline 后：
4. display:inline-block : 将转换为行内元素
1
2
display:inline-block 会将行内元素或块状元素转换为行内块状元素
display:inline-block 行内元素：
不加的状态：
after：
display:inline-block 块状元素：
不加的状态：
after：
发现：display:inline-block 后的块大小相等，即为能够识别宽高
特点归纳：
行内元素:
设置高宽无效
对 margin仅设置左右方向有效，上下无效. padding上下左右均有效，但会撑大空间
不会自动换行
块状元素:
能够自动识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素：
不能自动换行
能够识别宽高
默认排列方式为从左到右
总结：
行内块状元素综合了行内元素和块状元素的特性，因此行内块状元素在日常的使用中由于其特性，使用的也较多