display值的分类
Posted menglong1214
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display值的分类相关的知识,希望对你有一定的参考价值。
整体来讲,display
的值可以分为6
个大类,1
个全局类,一共是7
大类:
- 外部值
- 内部值
- 列表值
- 属性值
- 显示值
- 混合值
- 全局值
外部值,指的是这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现;常见的外部值有 display:block; display:inline; display:run-in;
display:block; 块级元素,css
初学者都知道的概念,只要是容器类型的元素基本都是这个值。除div之外,h1-h6、p、form、header、footer、section、artical等天生都是这个值
、del、strong、em、code等等
都属于这一类型display:run-in; 这个值基本上不会有人用,但你可以对它进行一下了解;因为除了IE
和Opera
支持它以外,其他所有主流浏览器包括Chrome
, Safari
, Firefox
全都对它置若罔闻。这东西说白了也没什么神秘,
它的意思就是说如果我们命令一个元素run-in
,中文意思就是『闯入
』!那么这个元素就直接闯入下一行,鉴于此值和中国男足一样如此无用,我们弃之不理即可,不用浪费过多时间。。。
内部值:主要是用来规定子级元素布局排列的,规定它们要么排成S
形,要么排成B
形,再或者排成S-B这样队形的;在css3
如火如荼的今天,你要玩不转这些值,怕是哪儿也找不到工作的;常见的值主要有:
display:flow; display:flex;
display: flex; 弹性盒布局,作为新一代的全栈工程师,2009
年诞生的这个属性可以说不亚于css
界一场工业革命,它的诞生标志着马车一样的float
被彻底抛进历史的垃圾堆,所以这个属性你
必须烂熟于你的胸(衣)中;display: flex;
以及它的六大属性:flex-direction
, flex-wrap
, flex-flow
, justify-content
, align-items
, align-content
,包括所有这些属性
的值,都是你需要反复推敲的;关于它的详情,可以参考阮一峰的这篇文章,但我认为,格式编排的更好还是csstrick
上的这篇文章
前言:会flex
很吊吗?会grid
更吊哦!也许这就是下次前端面试的重点!
display: grid; grid
布局,中文翻译为网格布局;
学习grid
布局有两个重点:一个重点是grid
布局引入了一个全新的单位:fr
,它是fraction
(分数
)的缩写,所以从此以后,你的兵器库里除了px
, em
, rem
,
百
分
比
这些常见兵器以及vw
, vh
这些新式武器之外,又多了一样旁门暗器fr
,要想用好grid
,必须充分掌握fr
。另一个重点是斜杠操作符
,这可不是分数
哦。它表示的是起始位置
和结束位置
。比
如说3 / 4
,这可不是四分之三
的意思,这是指一个元素从第3
行开始,到第4
行结束,但又不包括第4
行。
同样,与grid
相关联的也有一大堆旁门属性,是在学习display: grid;
的同时必须掌握的。包括grid
, grid-column-start
, grid-column-end
, grid-row-start
, grid-row-end
, grid-template
, grid-template-columns
,
grid-template-rows
, grid-template-areas
, grid-gap
, grid-column-gap
, grid-row-gap
, grid-auto-columns
, grid-auto-rows
, grid-auto-flow
, grid-column
, grid-row
。不能详述,关于这个写起来又是一大篇文章。
详情还是参考csstrick上这篇文章,讲得非常细致非常清楚,以下是对网格布局的应用:
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;
这个也没有达成共识,关于此一
系列的争议,感兴趣的同学可以看看这篇文章,英语好的可以看这篇。
display: table; 这一个属性,以及下面的另外8
个与table
相关的属性,都是用来控制如何把div
显示成table
样式的,因为我们不喜欢<table>这个标签嘛,所以我们想把所有的<table>标签都换成<div>标签。<div>有什么好?无非就是能自动
换行而已,但其实你完全可以做一个<table><tr><td>标签,把它全都替换成display: block;
也可以自动折行,只不过略微麻烦而已。关于display: table;
的详细用法,大家可以参考这篇文章。
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢?(即DIV+CSS布局优势)
1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示
3、非表格内容用table来装,不符合标签语义化要求,不利于SEO
4、table的嵌套性太多,用DIV代码会比较简洁
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
掉的块级元素的高度。外容器本来是有高度的,就像这样:
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;
结果就成这样了,外容器高度掉了,这不是很多人常犯的错误吗?现在我们给.container
加上display: flow-root;
再看一下:
喏,外容器高度又回来了,这效果是不是杠杠的?
那位同学说,我们用clear: both;
不是一样可以达到这效果吗?
二狗子,你变了,请你离开这里好吗!我们在讲display: flow-root;
,不是在讲clear: both;
!
display: ruby; 旁注标记 ruby
这个取值对于我们亚洲人来说其实是非常有用的一个东西,但是目前除了Firefox
以外其它浏览器对它的支持都不太好。简而言之,display: ruby;
的作用就是可以做出下面这样的东西:
很好的东西,对吧?如果可以用的话,对我国的小学教育可以有极大的促进。但可惜我们现在暂时还用不了。
ruby
这个词在英语里的意思是红宝石
,但在日语里是ルビ
,翻译成中文是旁注标记
的意思,我们中文的旁注标记就是汉语拼音。可以想见,这个标准的制定者肯定是日本人,如果是我们中国人的话,那这个标签就不是ruby
,
而是pinyin
了。还有一个ruby
语言,发明者也是一个日本人,和html
里这个ruby
是两码事,不要搞混了。
ruby
的语法大致如下:
列表值 display:list-item; 和display: table;
一样,痛恨各种html
标签,只想使用div标签来搞出类似ul-li的效果,如下:
说白了就是,你用ul-li能实现的效果,他可以用div实现出来,就是这个作用,这个很少使用,了解即可,不用过多浪费时间。
属性值:一般附属于主值,比如主值里设置了display: table;
,就可以在子元素里使用display: table-row-group;
等等属性,不过并不绝对;关于它们的作用,主要参考主值就够了。
display: table-row-group; 详情参考display: table;。
display: table-header-group; 详情参考display: table;。
display: table-footer-group; 详情参考display: table;。
display: table-row; 详情参考display: table;。
display: table-cell; 详情参考display: table;。这个属性有必要详细说说,因为它完全可以单独应用,用在高度不固定元素的垂直居中上,详情请见张鑫旭的这篇文章。效果如下图所示:
display: table-column-group; 详情参考display: table;
display: table-column; 详情参考display: table;
display: ruby-base; 详情参考display: ruby;。
display: ruby-text; 详情参考display: ruby;。
display: ruby-base-container; 详情参考display: ruby;。
display: ruby-text-container; 详情参考display: ruby;。
盒子值
display: contents; 让子元素拥有和父元素一样的布局方式,仅此而已。
这大概是2018
年年初最令人喜大普达的一件大事了:Chrome 65版本终于要支持display: contents;了!Firefox
早就支持了,而Chrome
直到现在才开始支持,这么重要的特性,它到底有什么功能呢?结果恐怕会令你大失所望。原来的布局是这样的:
你给中间那个div
加上display: contents;
之后,它就变成这样了:
display: none; 使元素从文档流中消失,声明远播,一般面试题中会用来和visibility:hidden;做比较
混合值
display: inline-block; 行内块元素,关于display: inline-block;
的作用恐怕只要做过3
天以上前端的工程师都应该知道。什么也不说了,上一张著名的图片作总结吧:
display: inline-table; 你要能理解inline-block
,你就能理解inline-table
。在行内显示一个表格,就像这样:
display: inline-flex; 这个就不用多说了吧?跟上面一样,在行内进行弹性布局,参考display: flex;。
display: inline-grid; 同上,在行内进行网格布局,参考display: grid;。
全局值:这些值不是display
属性的专利,几乎其它任意属性都可以用,列在这里凑个数。
display: inherit; 继承父元素的display
属性。
display: initial; 不管父元素怎么设定,恢复到浏览器最初始时的display
属性。
display: unset; unset
混合了inherit
和initial
。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定。直接看图最明白:
以上是关于display值的分类的主要内容,如果未能解决你的问题,请参考以下文章
Xcode 8 Autocomplete Broken - 仅显示有限的用户代码片段 - 知道为啥吗?