~ 深入了解 display

display属性在网页布局中非常常见，但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值。

01. 定义

display属性用于规定元素生成的框类型，影响显示方式

初始值: inline

应用于: 所有元素

继承性: 无

[注意]IE7-浏览器不支持table类属性值及inherit

02. 分类

block

【特征】

[1]不设置宽度时，宽度为父元素宽度

[2]独占一行

[3]支持宽高

【标签】

<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption>
<figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option>
<p><section><summary><ul>

[注意] menuitem标签只有firefox支持

【不支持的样式】

[1]vertical-align

inline

【特征】

[1]内容撑开宽度

[2]非独占一行

[3]不支持宽高

[4]代码换行被解析成空格

【标签】

<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map>
<mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time>
<u><var><wbr>

【不支持的样式】

[1]background-position

[2]clear

[3]clip

[4]height | max-height | min-height

[5]width | max-width | min-width

[6]overflow

[7]text-align

[8]text-indent

[9]text-overflow

inline-block

【特征】

[1]不设置宽度时，内容撑开宽度

[2]非独占一行

[3]支持宽高

[4]代码换行被解析成空格

【标签】

<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress>
<select><textarea><video>

【不支持的样式】

[1]clear

【IE兼容】

IE7-浏览器不支持给块级元素设置inline-block样式，解决方法如下：首先将其变成行内元素，使用具有行内元素的特性，然后触发haslayout，使其具有块级元素的特性，如此就可以模拟出inline-block的效果

div{
    display:inline-block;
    *display: inline;
    zoom: 1;

none

【特征】

隐藏元素并脱离文档流

【标签】

<base><link><meta><title><datalist><dialog><param><script><source><style>

list-item

【特征】

[1]不设置宽度时，宽度撑满一行

[2]独占一行

[3]支持宽高

run-in

run-in是一个有意思的块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框，run-in框格式化成另一个元素中的行内框，但它们仍从文档中的父元素继承属性

[注意]只有safari和IE8+支持

<h3 style="display:run-in">run-in test</h3>
<p>paragraph</p>

若run-in框后面不是块级框时，run-in框本身将成为块级框

<span style="display:run-in">run-in test</span>
<span>paragraph</span>

[3] 表格类元素

table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}

表格类元素的display共有以上几种，<thead><tbody><tfoot><tr><col><colgroup>因为无法设置margin和padding用的较少，下面将着重介绍下<table>、<td>、<th>、<caption>这四个标签对应的display属性。

table

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]独占一行

[3]支持宽高

[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

[注意]对于display为table和inline-table，若处于分隔边框模型即border-collapse:separate;，margin和padding都可设置；若处于合并边框模型即border-collapse:collapse，只可设置margin。

inline-table

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性。

table-cell

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]垂直对齐

[5]同级等高

[注意]display:table-cell的元素不可以设置margin，但可以设置padding。

table-caption

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]独占一行

[3]支持宽高

[注意]display:table-caption的元素margin和padding都可设置。

04. 注意事项

【1】如果一个元素是绝对定位元素，float的值设置为none，对于浮动元素或绝对定位元素，计算值由声明值确定。

【2】对于根元素，如果声明为值inline-table或table，都会得到计算值table，声明为none时则会得到同样的计算值none，所有其他display值都计算为block。

[ 拓展理解：普通流：display、haslayout、BFC、视觉格式化、文本方向 ]

[ 拓展1：haslayout ]

01. 定义

haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况。

02. HTML标签

默认触发hasLayout的有如下HTML标签：

【1】html,body

【2】table,tr,th,td

【3】img

【4】hr

【5】input,button,select,textarea,fieldset

【6】frameset,frame,iframe

03. CSS属性

可以触发hasLayout的有如下CSS属性：

【1】display:inline-block

【2】height/width:除了auto

【3】float:left/right

【4】position:absolute

【5】writing-mode(IE专有属性，设置文本的垂直显示):tb-rl

【6】zoom(IE专有属性，设置或检索对象的缩放比例):除了normal

【IE7专有的触发hasLayout的CSS属性】

【1】min-height/max-height/min-width/max-width:除none

【2】overflow\overflow-x\overflow-y:除visible

【3】position:fixed

04. 用途

【1】解决IE7-浏览器下父级边框不阻止子级上下margin传递的bug

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    border: 10px solid black;
    background-color: red;
    /*触发hasLayout*/
    /*float:left;*/
}
.in{
    height: 100px;
    width: 100px;
    margin-top: 50px;
    background-color: blue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
</ul>
</body>    
</html>

【2】配合display:inline让块元素模拟inline-block

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    display:inline-block;
    /*配合display:inline触发hasLayout*/
    /*     float:left;
    display:inline; */
}
</style>
</head>
<body>
<div class="box" id="box"></div><span>测试inline-block用</span>
</body>    
</html>

【3】解决在IE7-浏览器下LI4px空隙bug(IE7-浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block，li下会多出3px的垂直间距)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
    background-color: lightgreen;
}
.in{
    height: 100px;
    background-color: lightblue;
}
.span{
    display: block;
    zoom:1;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">
        <span class="span">1231</span>
    </li>
    <li class="in">
        <span class="span">1232</span>
    </li>
</ul>
</body>    
</html>

【4】触发浮动元素的父级的hasLayout，浮动元素会被layout元素自动包含，相当于IE7-浏览器下实现清浮动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    background-color: lightgreen;
    height: 200px;
}

.in{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: lightblue;
}
.test{
    width: 100px;
    height: 150px;
    background-color: yellow;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<div class="test">测试浮动</div>
</body>    
</html>