仅列举部分:
none 隐藏,此元素不会被显示。
block 块显示;此元素将显示为块级元素,此元素前后会带有换行符。
inline 内嵌 ,默认。此元素会被显示为内联元素,元素前后没有换行符。
table 表格显示,此元素会作为块级表格来显示(类似 <table>
),表格前后带有换行符。
inline-block:元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。
list-item:象块类型元素一样显示,并添加样式列表标记。
flex:块级弹性/伸缩盒模型,父元素类似block显示方式,子元素则变成类似inline-block并排显示成一行,通过调整子元素的flex值实现伸缩的效果;
inline-flex:行内块级弹性/伸缩盒模型,父元素类似inline-block显示方式,其余与上相同;
box:据说是被flex模型淘汰掉的前辈,但flex又无法完全代替box,使用时需加兼容性前缀。目前写一个功能:文本显示两行后,多余省略号代替,需要用到这种显示方式。相关链接
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
inherit 规定应该从父元素继承 display 属性的值