display的值一共有32个,分为7大类,如下:
在此之前,这个分类完全没听过,对于display我的学习是这样的,一开始 block 、inline、inline-block,,后来多了个none, 再后来学了flex,其他的table、contents等也见过几次,但是没有去深究。不过,这里只是作为解释型的介绍,了解一些其他的属性值,有一些布局还是比较复杂的,像table\list、 flex、grid布局都是可以写很多的,以后可以单独写出来。
外部值
外部值就是定义自身元素的外部表现,而不影响其内的子元素。
display: block;
display: inline;
块级元素和行内元素,这两个很常见了。譬如,div,h1-h6、p元素等就是块级元素,span、i、label等就是行内元素,通过去改变这两个值,去改变他的现实方式。
display: run-in;
这个属性倒是不常见,也不常用,基本上也只有IE和Opera支持它。很简单,就是让设置了这个值的属性【闯入】下一行。
<span>我是</span>
<span style="display: run-in;">run-in</span>
内部值
和外部值相反,内部值就是定义子元素的布局的。
display:flow;
翻译过来是流布局,具体怎么用代表什么意思也没有查出来,但我了解到他对chrome不支持,基本可以放弃。
display:flow-root;
不同于flow, flow-root可以用起来,可以撑开浮动的元素高度,就是可以清除浮动效果。
<div class="father">
<div class="son">我是</div>
flow-root
</div>
.father {
display: flow-root;
border: 1px solid #000;
width: 600px;
}
.son {
float: left;
width: 400px;
height: 400px;
background-color: pink;
}
display:table;
当我们想写表格,但却想要自动换行,那么我们可以用<div>
代替 <table><tr><td>
等标签。可以和属性类的table值搭配使用。
display:flex;
弹性布局,和flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content配合使用,也可以使用连写flex。特别好用的一个布局方式,2009年诞生,它的诞生,不亚于css界一场工业革命,标志着float被彻底抛进历史的垃圾堆。比较常用,也比较多,想要更深入地学习可以看A Complete Guide to Flexbox非常好。
display: grid;
网格布局;
学习 grid布局有两个重点:一个重点是 grid布局引入了一个全新的单位: fr,它是 fraction( 分数)的缩写,所以从此以后,你的兵器库里除了 px, em, rem, 百分比这些常见兵器以及 vw, vh这些新式武器之外,又多了一样旁门暗器 fr,要想用好 grid,必须充分掌握 fr。另一个重点是 斜杠操作符,这可不是 分数哦。它表示的是 起始位置和 结束位置。比如说3/4,这可不是 四分之三的意思,这是指一个元素从第 3行开始,到第 4行结束,但又不包括第 4行。
grid布局是一种比较强大的布局方式,后面需要专门写一篇,本文知识简单介绍这些布局。
详情参考grid布局
display: ruby;
旁注标记,看起来非常有用的一种布局,但是只有firefox支持比较好。
display: subgrid;
display:subgrid;是属于 2017年 11月 9日发布的非正式的CSS网格布局模块第二级的内容。这是一个非常新的草案,并且争议不断。
subgrid是想要大网格里还可以套小网格,并且互相不影响。但如果 grid里可以再套 subgrid的话,那我 subgrid里还想再套 subgrid怎么办? subsubgrid吗?况且,到底是 grid:subgrid;还是 display:subgrid;这个也没有达成共识。
列表值
display: list-item;
他和table相似,目的都是为了用div去代替<ul> <li>
标签之类的。
属性值
一些和table布局、ruby搭配一起控制页面布局的属性值
显示值
display: content;
经常会看到这个布局方式,但是不太懂它做了什么,简单看下他对布局和元素的影响:
1.它使div元素不产生任何边界框,因此元素的背景、边框和填充部分都不会渲染。然而,颜色(color)和字体(font)却可以渲染。所以我对它的理解是只影响其内容的样式起效。
<div class="son">a</div>
<div class="son diff">b</div>
<div class="son">c</div>
<style>
.son {
border: 1px solid deeppink;
background-color: pink;
font-size: 25px;
color: orangered;
width: 300px;
}
.diff {
display: contents;
}
</style>
2. 他对父元素的布局会继承,但同样的设置display: contents;时它本身的边框,边距,填充都会消失。
如下一个父元素中有三个元素,其中第二个盒子,又有两个盒子,在父盒子中使用flex布局。
在第二个子盒子中使用display:contents;后就会发生变化,第二个盒子不进没了边框、边距和填充,并且他的布局和父盒子的弹性布局效果一样。
display: none;
隐藏;元素渲染,但是不显示,相当于v-show的使用。
混合值
display: inline-block; 行内块元素,即在行内显示块级元素
display: inline-table; 即在行内显示表格元素
display: inline-flex; 即在行内弹性布局
这里也是一个我有疑问的地方,说起行内弹性布局,但是弹性布局如果设置了方向为水平,不是本来就是在行内吗?其实在对子元素的布局上我认为是没有变化,变化的是他本身。
1.其实display:flex;和display:inline-flex; + width: 100%;
就相当于display:block; 和 display: inline-block; + width: 100%;
如果按照这样说的话,其实flex和inline-flex其内盒子的布局是没有变化的,只是一个他本身是块级元素,一个是行内元素而已;
flex: 本身作为一个块级元素,占据整行
inline-flex: 本身作为一个行内块元素,如果不设置宽度,则占据子元素撑开的宽度
2.还发现一个区别,算是拓展吧
既然他们他们两都是伸缩盒,就是来体会一下伸缩的含义:
不设置宽度的情况, 当他的子元素所有的子元素的宽度加起来超过父盒子宽度,他会让子元素伸缩呢,还是让,父盒子的区域滚动呢?如下示例,给每个子元素的宽度都设置800px,父盒子分别设置这两种布局:
flex:
inline-flex:
display: inline-grid; 即在行内网格布局
全局值
几乎很多属性都存在这几种值。
display: inherit;
继承父元素的 display属性。
刚刚说了,display:contents;也有继承的功能,那inherit相对于它就是没有他本身让边距、边框、填充消失的功能,当然, 除非他继承的是contents;
举个继承contents的示例:
<body>
<div class="father">
<div class="li">a</div>
<div class="li diff">
<div class="li differ">
<div class="li">d</div>
<div class="li">f</div>
</div>
<div class="li">e</div>
</div>
<div class="li">c</div>
</div>
</body>
<style>
.father {
display: flex;
}
.li {
border: 1px solid deeppink;
background-color: pink;
font-size: 25px;
color: orangered;
width: 300px;
}
.diff {
border: 20px solid orange;
display: contents;
}
.differ {
border: 20px solid darkorange;
display: inherit;
}
</style>
没有设置inherit之前:
设置inherit之后:
display: initial;
不管父元素怎么设定,恢复到浏览器最初始时的 display属性。
display: unset;
unset混合了 inherit和 initial。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定