HTML中display属性的属性值是什么？display属性是怎么实现水平垂
display在这里我说四个最常用的属性值inline、 block、inlin-block、none。
第一我们来说一下inline（n内联元素）：
该属性值为默许值。此元素会被显示为内联元素，元素前后没有换行符。一样不会设定这个属性值。个人懂得，其实跟正常的行内元素没什么不同，用的比力多的还是block和inline-block。
接着是block（块级元素）这个属性值：
这个属性值是比力成心思的，设定为块级元素独占一行，就换行来说和p标签的结果一样，但是这个属性值设定后，作为一个块级元素他就具备了宽、高，和别的块级元素的间距margin着属性的设定，还有间距的设定padding，但是不克不及设定行高（line-height）。
还有inline-block（内联块）这个属性值：
这个属性值是比力强大的，本人刚开端学的时候根本上见到需要设定的只要不是换行的就会设定这个属性值，一来他可以作为块级元素，可以具有block的特性，另一方面，由于本人初学，关于居中的设定比力费事，所有使用这个属性值可以设定行高，从而使文字居中，利便易用。
关于这个导航栏的实现这几个属性很好用，主要用到block和inline-block这两个属性值，inline-block作为统一行的几个元素的实现，block做为元素间换行的实现。大家可以试试。
关于最后一个none这个属性值：
个人觉得用于潜藏元素比力利便，做那种鼠标浮动的时候更换display的属性值来到达显示与潜藏元素的结果。
HTML中display一共是什么比力常用的值呢，让我们一起来看看
HTML中display在平常的项目开发中比力容易被使用的值主要有：
none（元素不会被显示）;
block（元素将显示为块级元素，元素前后会带有换行符）;
inline（元素会被显示为内联元素，元素前后没有换行符）;
inline-block（行内块元素。CSS2.1 新增的值）;
table（元素会作为块级表格来显示，相似 <table>，表格前后带有换行符）;
table-row（元素会作为一个表格行显示，相似 <tr>）;
table-cell（元素会作为一个表格单元格显示，相似 <td> 和 <th>）。
display实现的水平垂直居中！
利用position和margin停止元素水平垂直居中；也许大家还是比力熟知，经常用的。但不知道你可否使用过display：table与table-cell对元素停止水平垂直居中呢？
以下就是利用display：table-cell停止元素水平垂直居中的的两种办法了：
1.利用display：table与table-cell停止元素水平垂直居中
构造：
<div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div>
样式：
.wrap {
/*让元素以表格情势渲染*/
display: table;
height: 400px;
width: 400px;
background: #fcf;
}
.box {
/*让元素以表格的单元素格情势渲染*/
display: table-cell;
/*使用元素的垂直对齐*/
vertical-align: middle;
}
.con {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}长处：
这种办法不会像前面的两种办法一样，有高度的限制，此办法可以要据元素内容动态的改动高度，从而也就没有空间的限制，元素的内容不会由于没足够的空间而被割断或者显现难看的滚动条。
缺陷：
不足之处呢？这种办法只适合现代阅读器，在IE6-7下没法正常运转。
2.利用display：table-cell停止元素水平垂直居中
构造：
<div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div>
样式：
.wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}长处：
这种办法的长处和办法三是一样的，不会有高度的限制。
缺陷：
IE6、IE7不支撑
【相关引荐】
HTML5中web是啥？web储备中的元素是什么？
HTML IMG标签的属性是是什么？理解IMG标签的用途
以上就是HTML中display属性的属性值是什么？display属性是如何实现水平垂直居中的？的具体内容，更多请关注百分百源码网其它相关文章！
