整体来讲,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值的分类的更多相关文章

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

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

  2. 左右值无限级分类 MVC + EntityFramework 的简单实现

    在度娘上查了大半个月的资料,最后发现每个网友分享的文章都有一定的错误(PS:大家是故意的么?).最后是在看了一个ASP版本后知道了大概流程:看了一个存储过程实现的文章后知道了大概需要的功能:看了一个S ...

  3. 二十五:XSS跨站值原理分类及攻击手法

    HTML DOM树 XSS跨站产生原理,危害,特点 本质,产生层面,函数类,漏洞操作对应层,危害影响,浏览器内核版本 XSS是什么? XSS全称跨站脚本(Cross Site Scripting),为 ...

  4. Orchard分类Taxonomies图文教程

    Orchard分类和标签都实现对内容的分类管理,两者区别是分类的子项之间是具有级别(同级.上下级)关系,而标签是很随意的,子项之间可以有关系也可以没有,今天给大家分享分类的使用方法. 一.环境说明 O ...

  5. Mawawa CSS 学习之旅 Display

    CSS 类型之 Display 更新时间: 2018-2-10: 一个良好的布局结构从 display 开始! 分类:外部值.内部值.列表值.属性值.混合值.显示值.全局值: 一.外部值 作用:主要用 ...

  6. CS231n课程笔记翻译3:线性分类笔记

    译者注:本文智能单元首发,译自斯坦福CS231n课程笔记Linear Classification Note,课程教师Andrej Karpathy授权翻译.本篇教程由杜客翻译完成,巩子嘉和堃堃进行校 ...

  7. wordpress 获取分类ID,分类标题,分类描述,分类链接url函数

    get_cat_ID()    根据分类名称获取分类ID   ///// get_cat_name()    根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...

  8. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  9. Farseer.net轻量级开源框架 入门篇:分类逻辑层

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 缓存逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 ...

随机推荐

  1. C++判断是回文串还是镜像串

    #include <iostream> #include <string> #include <cstdio> #include <cctype> #p ...

  2. Vue管理系统前端系列二相关工具引入及封装

    目录 sass-loader/vuex 等的引入说明 引入 element 引入 axios 1.基本使用 2.封装使用 2.1 开发环境配置请求地址 2.2 配置代理 2.3 添加接口相关文件 sa ...

  3. golang rpc demo

    RPC工作流程图 1.调用客户端句柄:执行传送参数 2.调用本地系统内核发送网络消息 3.消息传送到远程主机 4.服务器句柄得到消息并取得参数 5.执行远程过程 6.执行的过程将结果返回服务器句柄 7 ...

  4. ubuntu ARM 源配置

    cat /etc/apt/sources.list deb http://mirrors.aliyun.com/ubuntu-ports/ xenial main deb-src http://mir ...

  5. 分块练习C. interval

    分块练习C. interval 题目描述 \(N\)个数\(a_i\),\(m\)个操作 \(1\). 从第一个数开始,每隔\(k_i\)个的位置上的数增加\(x_i\) \(2\). 查询\(l\) ...

  6. Distributional Reinforcement Learning with Quantile Regression

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:1710.10044v1 [cs.AI] 27 Oct 2017 In AAAI Conference on Artifici ...

  7. vscode 安装go插件失败后,最简单的方法

    vscode 安装go插件 参考: https://github.com/goproxy/goproxy.cn/blob/master/README.zh-CN.md https://goproxy. ...

  8. antd-vue中table行高亮效果实现

    [方式一]:通过设置customRow达到目的,点击时遍历所有行设置为正常颜色,把当前行设置为特殊颜色(高亮色) HTML: <a-table ref="table" siz ...

  9. Java面试题(容器篇)

    容器 18.java 容器都有哪些? 如图:   首先分为Collection.Map: Collection下分为List.Set和Queue: List下分为ArrayList和LinkedLis ...

  10. Windows 远程桌面鼠标光标不可见

    一.问题描述 通过在云端的主机上部署 frp 服务,实现「使用Windows 远程桌面(RDP)从互联网侧访问内网的主机」.但是,使用 Windows 自带的远程桌面工具 RDP 连接到另一台计算机时 ...