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等天生都是这个值

display:inline; 行内元素,这个基本上也都知道,只要是行内元素就都是这个值,如span、a、img技术分享图片、del、strong、em、code等等都属于这一类型

display:run-in; 这个值基本上不会有人用,但你可以对它进行一下了解;因为除了IEOpera支持它以外,其他所有主流浏览器包括ChromeSafariFirefox全都对它置若罔闻。这东西说白了也没什么神秘,

        它的意思就是说如果我们命令一个元素run-in,中文意思就是『闯入』!那么这个元素就直接闯入下一行,鉴于此值和中国男足一样如此无用,我们弃之不理即可,不用浪费过多时间。。。

 

内部值:主要是用来规定子级元素布局排列的,规定它们要么排成S形,要么排成B形,再或者排成S-B这样队形的;在css3如火如荼的今天,你要玩不转这些值,怕是哪儿也找不到工作的;常见的值主要有:

    display:flow;        display:flex; 

display: flex; 弹性盒布局,作为新一代的全栈工程师,2009年诞生的这个属性可以说不亚于css界一场工业革命,它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆,所以这个属性你

               必须烂熟于你的胸(衣)中;display: flex;以及它的六大属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content,包括所有这些属

               的值,都是你需要反复推敲的;关于它的详情,可以参考阮一峰的这篇文章,但我认为,格式编排的更好还是csstrick上的这篇文章

 

前言:会flex很吊吗?会grid更吊哦!也许这就是下次前端面试的重点!

display: grid;  grid布局,中文翻译为网格布局;学习grid布局有两个重点:一个重点是grid布局引入了一个全新的单位:fr,它是fraction分数)的缩写,所以从此以后,你的兵器库里除了pxemrem

        这些常见兵器以及vwvh这些新式武器之外,又多了一样旁门暗器fr,要想用好grid,必须充分掌握fr。另一个重点是斜杠操作符,这可不是分数哦。它表示的是起始位置结束位置。比

        如说3 / 4,这可不是四分之三的意思,这是指一个元素从第3行开始,到第4行结束,但又不包括第4

        同样,与grid相关联的也有一大堆旁门属性,是在学习display: grid;的同时必须掌握的。包括gridgrid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-templategrid-template-columns

        grid-template-rowsgrid-template-areasgrid-gapgrid-column-gapgrid-row-gapgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgrid-columngrid-row。不能详述,关于这个写起来又是一大篇文章。

        详情还是参考csstrick上这篇文章,讲得非常细致非常清楚,以下是对网格布局的应用:

         技术分享图片

 

 

display: subgrid;  201586日,W3C的级联样式单(CSS)工作组(Cascading Style Sheets Working Group)发布了CSS网格布局模块第一级CSS Grid Layout Module Level 1)的工作草案。在这个草案里规定了上一节我们讲到

             的display: grid;的方案。而display: subgrid;是属于2017119日发布的非正式的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;不是一样可以达到这效果吗? 

.container::after {
    content: ‘‘;
    clear: both;
    display: table;
}
 

 

二狗子,你变了,请你离开这里好吗!我们在讲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混合了inheritinitial。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定。直接看图最明白:

        技术分享图片

 

 

 


以上是关于display值的分类的主要内容,如果未能解决你的问题,请参考以下文章

Xcode 8 Autocomplete Broken - 仅显示有限的用户代码片段 - 知道为啥吗?

片段的 onAttach 中的值的可能性是啥

具有获取 json 值的片段中的自定义适配器

创建特征向量以对空中图像中的片段进行分类

display值的作用分别是什么?relative和absolute分别是相对谁定位的?

元素分类--内联元素(特点:同行, 宽高边距不可改)