关于display几个经常使用的属性值及其之间的相互转换关系

display定义和用法

定义：display 属性规定元素应该生成的框的类型。

首先 HTML能够将元素分类为行内元素、块状元素、行内块状元素

其次 要说明的是这三者是能够相互转换的，使用display属性能够将三者任意转换。其特色请看文章末尾的概括   (｡♥ᴗ♥｡)

（这个属性 用于定义创建布局时元素生成的显示框类型。对于 HTML 等文档类型，若是使用 display 不谨慎会很危险，由于可能违反 HTML 中已经定义的显示层次结构。）

属性：

1. display:none  顾名思义是指取消display相关指令

2. display:block  会将显示的元素变成块级元素，会使先后带有换行符

<div class="content">
            <span class="one"> 
                1
            </span>
            <span class="two">
                2
            </span>
        </div>

在这么一段代码中，<span>元素里的1和2将会并列排序，若想将两个元素都变成块级元素，需在.one和.two的样式中加入display:block; (注意：这里注意不要加到外面的块元素content中，content自己是块元素，而且与目的将<span>标签里的元素变为块元素不符 )

display:block前：

display:block后：

3. display:inline : 此元素会被显示为内联元素，元素先后没有换行符

• 这里补充一下内联元素
• 内联元素的显示，能够形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
• 一般用于特殊布局，在同一行显示多个内容，可使用内联元素实现，这样不须要将块级元素设置为浮动或绝对定位就能够在一行横排排版。

<div class="content">
        <div class="one"> 
            1
        </div>
        <div class="two">
            2
        </div>
    </div>

由于是块级元素，占据的宽度是100%，那么one和two会自动分行，以下图所示：

display:inline 前：

在这种状况下，若想使两个块级元素在同一行显示，那么能够分别在各自的属性中加入 display:inline

display：inline 后：

4. display:inline-block :  将转换为行内元素

<div class="content">
        <div class="one"> 
            1
        </div>
        <div class="two">
            2
        </div>
    </div>

display:inline-block 会将行内元素或块状元素转换为行内块状元素

display:inline-block  行内元素：

不加的状态：        

after：                       

display:inline-block 块状元素：

不加的状态：

after：                     

发现：display:inline-block 后的块大小相等，即为可以识别宽高

特色概括：

• 行内元素:

  • 设置高宽无效
  • 对 margin仅设置左右方向有效，上下无效. padding上下左右均有效，但会撑大空间
  • 不会自动换行

• 块状元素:

  • 可以自动识别宽高
  • margin和padding的上下左右均对其有效
  • 能够自动换行
  • 多个块状元素标签写在一块儿，默认排列方式为从上至下

• 行内块状元素：

  • 不能自动换行
  • 可以识别宽高
  • 默认排列方式为从左到右

总结：行内块状元素综合了行内元素和块状元素的特性，所以行内块状元素在平常的使用中因为其特性，使用的也较多