display在官方定义：规定元素应该生成的框的类型。本文只重点分析常用的6个值：none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。
一、None
此元素不会被显示。主要与visibility属性为hidden时相区分。
1) 当元素的none时，js可以获取此元素，但不能获取/设置此元素的可视化属性的值（但可以设置自定义属性的值），如Width、Height、background等Css属性的值，这也就表明当元素为none时，元素是不被浏览器渲染的。
2) 当元素的visibility值为hidden时，元素虽然不可见，但可以获取/设置元素的任何值，包含Css相关属性。这也就表明此时的元素是被浏览器渲染的（在文档流中是占有位置的），只是处于不可见的状态。
3) 示例代码如下：
Css代码：
#div01{ display: none; width: 200px; background: red; } #div02{ visibility: hidden; width: 100px; } #div03{ width: 100px; }
Js/html代码：
div01div01div03
二、Block
设置元素为块级元素，可应用盒子模型相关属性。默认Width会100%，Height自适应。Margin、padding都有效。如果没有占宽或高的子元素存在，则高度为零。
代码如下：
<html> <head> <style> #div01{ background: red; } #div02{ height: 100px; background: gray; } #div03{ background: green; } style> head> <body> <div id="div01" >div> <div id="div02" >div> <div id="div03" >div03div> body> html>
效果截图：
Vmall及配套产品是一套多商户协作型商城系统。新一代的电子商务解决方案，商城以社区专业属性为主题，通过网赢平台共享商家资源，对各个商城的商家资源提供了保障，Vmall采用赢联保（赢联保是网赢携手“支付宝”、“财付通”和“快钱”等行业领先的支付平台，联合打造的交易担保平台，应用于
三、inline
行内元素或者通过display:inline修饰为行内元素的都具有行内元素的行为。
1) 多个inline元素会排成一行，并列的多个inline元素之间会存在8个像素左右的间隔，8像素间隔解决办法：
a). Html文本有意识的都排成一行，如下代码所示： a01a02
b). 利用margin-left:-8px，也就是marginq负值实现，也可以在外层使用letter-spaceing和word-spaceing为负值的方式实现（此种试子元素需要重置被设置属性）
.inline{ display: inline; background: red; margin: 0px; padding: 10px; margin-left: -8px; }
<div class="inline">inline01div> <div class="inline">inline02div> <div class="inline">inline03div> <div class="inline">inline04div>c). 包裹inline元素的外层元素加上font-size:0px和-webkit-text-size-adjust:none实现
a{ background: red; font-size: 14px; } .overWidth{ white-space: nowrap; border: 1px solid gray; font-size: 0px; -webkit-text-size-adjust: none; }<div class="overWidth" > <a>a01a> <a>a000000002a> div>
2) Inline元素的width和height无效
3) Inline元素的padding都有效，但margin左右有效，上下无效。
4) Inline元素包裹inline元素，外层元素的width和height会被内部的撑开
.overWidth{ display: inline; border: 1px solid gray; }
<div class="overWidth" > <a>a01a> <a>a000000002a> div>
5) Block/inline-block元素包裹inline元素，默认超width自动换行，height撑开。
a) 强制不换行可以通过white-space:nowrap来实现，此时超width的就会浮出来，可以通过overflow:hidden和text-overflow:ellipsis配合实现省略显示。
.overWidth{ white-space: nowrap; width: 100px; border: 1px solid gray; overflow: hidden; text-overflow: ellipsis; }<div class="overWidth" > <a>a01a> <a>a000000002a> div>
