用法
display 属性规定元素应该生成的框的类型;
每个元素的display都有一个默认值.
display属性值
默认值为block的元素:
p,form,header,footer,section,div,table,pre, h1~h6, dl, ol, ul
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
栗子:
<div>p,form,header,footer,section : 我们都是块级元素</div>
浏览器显示效果:
默认值为inline的元素:
span, a, strong, em,label,input, select, textarea, img, br
1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
栗子:
<span>span, a, strong, em,label,input, select, textarea,
img, br都是行 内元素</span>
浏览器显示效果:
默认值为none的元素:
script
一些专门的元素，如脚本使用none作为他们的默认值;
此元素不会被显示。
<i>与visibility:hidden的区别</i>:
visibility是控制元素是否显示出来，它并不控制元素是以块、单元格、行或者其他的外观。
当你想隐藏一个元素的时候，如果用display:none的话，这个元素就完全不显示，也不占位置，不遮盖比它z-index小的元素。但是如果你用visibility:hidden的时候，元素虽然不会显示在网页上，但是元素还是会占位，而且也会覆盖比它z-index小的元素，visibility:hidden只是让元素变得不可见而已。
栗子:
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#b{display: none;}
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#b{visibility:hidden;}
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
栗子:
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#a{ background-color: aqua;
width: 20px;
height: 80px;
}
#b{ display: inline-block;
background-color: aqua;
width: 20px;
height: 80px;
}
在浏览器显示效果:
<i>关于z-index的介绍,将会在之后的文章中更新</i>
