![326deee2c4ed318ece88c827e448133c.png](https://i-blog.csdnimg.cn/blog_migrate/0b0085338c71d0dce49f58f669dc0520.jpeg)
外部值
内部值
列表值
属性值
显示值
混合值
全局值
display: block;
这个值大家不陌生,我们最熟悉的
缺省就是这个值,最基本的块级元素,属于css入门初学者都知道的概念,只要是容器类型的元素基本都是这个值。除
之外,还有
,以及古代html语言当中的,都属于这一类型。
写起来大概就是这样:
现在我们给.container加上display: flow-root;再看一下:
喏,外容器高度又回来了,这效果是不是杠杠的?
那位同学说,我们用clear: both;不是一样可以达到这效果吗?
到
,
,
,,,,天生都是这个值。display: inline;
这个值大家也不陌生,行内元素嘛,只要是个行内元素都是这个值,最典型的是,还有,display: run-in;
这个值有点奇怪,通常没人用它,但你可以知道它。因为除了IE和Opera支持它以外,其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。这东西说白了也没什么神秘,它的意思就是说如果我们命令一个元素run-in,中文意思就是『闯入』!那么这个元素就直接闯入下一行。比如说这样:![e3677745187b8e1c40545a1d13995208.png](https://i-blog.csdnimg.cn/blog_migrate/158c9bf33abd7571d38860e5935a5355.jpeg)
class="a">aaa
class="b">bbb
.a {
font-size: 36px;
display: run-in;
}
这有什么用呢?我们拿span设置font-size一样可以实现这个效果,就让IE自己跟自己玩去吧!说实话,在人力资源如此宝贵的今天,IE的产品经理不知脑子是不是进水了,不派工程师去实现那么多比这重要的多得多的特性,却花时间做这么个没用的玩意儿,难道工程师的时间不是金钱吗?难怪市场占有率连年下滑。
02、内部值
谈完了外部值,我们来看看内部值。这一组值比较有意思了,在css3如火如荼的今天,你要玩不转这些值,怕是哪儿也找不到工作的。
内部值主要是用来管束自己下属的儿子级元素的排布的,规定它们或者排成S形,或者排成B形这样的。
display: flow;
含义不清,实验室阶段产品,Chrome不支持。如果还不够说服你暂时不要碰它的话,试着理解以下英文原文: If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.display: flow-root;
不同于刚才谈到的flow,现在用flow-root的渐渐多起来了,因为它可以撑起被你float掉的块级元素的高度。外容器本来是有高度的,就像这样:![4e73e38cb7aec4e572cda0d512c9a36b.png](https://i-blog.csdnimg.cn/blog_migrate/e424d46897cc459c1cac92385aa84cfb.jpeg)
class="container container1">
class="item">
Example one
.container {
border: 2px solid #3bc9db;
border-radius: 5px;
background-color: #e3fafc;
width: 400px;
padding: 5px;
}
.item {
height: 100px;
width: 100px;
background-color: #1098ad;
border: 1px solid #0b7285;
border-radius: 5px;
}
结果因为你想让那一行字上去,于是你给.item加了一个float: left;结果就成这样了,外容器高度掉了,这不是很多人常犯的错误吗?
![0b640d8655129d5f3a2b5ae5e22adba5.png](https://i-blog.csdnimg.cn/blog_migrate/78e46b16d72f444ff6e5329a593b5790.jpeg)
![dfd25a27758c2e479ec14855e019aa0b.png](https://i-blog.csdnimg.cn/blog_migrate/92de826e0b8d96e601a31794fff08de2.jpeg)
.container::after {
content: '';
clear: both;
display: table;
}
小明,请你出去!我们在讲display: flow-root;,不是在讲clear: both;!
display: table;
这一个属性,以及下面的另外8个与table相关的属性,都是用来控制如何把div显示成table样式的,因为我们不喜欢
标签。
有什么好?无非就是能自动换行而已,但其实你完全可以做一个
标签,把它全都替换成display: block;也可以自动折行,只不过略微麻烦而已。关于display: table;的详细用法,大家可以参考这篇文章,这里就不细说了。display: flex;敲黑板,划重点!作为新一代的前端工程师,这个属性你必须烂熟于胸衣中,哦,错了,是胸中。display: flex;以及与它相关联的一系列属性:flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content,并且包括所有这些属性的取值,都是你需要反复研磨的。2009年诞生的这个属性可以说是不亚于css界一场蒸汽机诞生一样的工业革命,它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆。关于它的详情,会中文的可以参考阮一峰的这篇文章,但我认为,格式编排的更好还是csstrick上的这篇文章。没有一张图能完整地展现flex的神韵,就放这张我比较喜欢的图片吧:![]() display: grid;会flex很吊吗?会grid更吊哦!也许这就是下次前端面试的重点哦!![]() display: ruby;ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西,但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之,display: ruby;的作用就是可以做出下面这样的东西:![]() ![]() display: subgrid;2015年8月6日,W3C的级联样式单(CSS)工作组(Cascading Style Sheets Working Group)发布了CSS网格布局模块第一级(CSS Grid Layout Module Level 1)的工作草案。在这个草案里规定了上一节我们讲到的display: grid;的方案。而display: subgrid;是属于2017年11月9日发布的非正式的CSS网格布局模块第二级的内容。所以这是一个非常新的草案,并且围绕它的争议从来也没有断过。subgrid总的思想是说大网格里还可以套小网格,互相不影响。但如果grid里可以再套subgrid的话,那我subgrid里还想再套subgrid怎么办?subsubgrid吗?况且,到底是grid: subgrid;还是display: subgrid;这个也没有达成共识,关于此一系列的争议,感兴趣的同学可以看看这篇文章,英语好的可以看这篇。03、列表值display: list-item;display: list-item;和display: table;一样,也是一帮痛恨各种html标签,而希望只使用
来写遍一切html的家伙搞出来的鬼东西,实际使用极少,效果就是这样:
![]()
|