整体来讲,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. day3 基本语句

         代码缩进为一个tab键  就是四个空格           断点   在代码首行前空白处,双击  然后点右上角臭虫  然后点下面箭头朝下的 1.if 语句  if 判断条件:         ...

  2. 自建本地服务器,自建Web服务器——保姆级教程!

    搭建本地服务器,Web服务器--保姆级教程! 本文首发于https://blog.chens.life/How-to-build-your-own-server.html. 先上图!大致思路就是如此. ...

  3. Java 泛型(参数化类型)

    Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所 ...

  4. ansible实现批量建立互信

    Ansible:自动化运维工具 为什么要建立互信:ansible批量配置管理的前提是管理机和被管理机ssh互信,即通过将管理主机的公钥(id_rsa.pub)添加到目标主机上,实现管理机不通过交互式输 ...

  5. 更换git远程仓库地址

    通过命令直接修改远程仓库地址 git remote 查看所有远程仓库 git remote xxx 查看指定远程仓库地址 git remote set-url origin 你新的远程仓库地址 先删除 ...

  6. 牛哄哄的celery

    一.什么是Celery 1.1.celery是什么 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. Celery的架构由三部分组成, ...

  7. 洛谷 P4343 [SHOI2015]自动刷题机

    思路 二分答案 显然的二分答案,但是因为二分判定条件 \(\text{wa}\) 了好几遍-- 可以发现,\(n\) 越大,\(k\) 就越小,所以答案是有单调性的,因此可以用两个二分,一次求最大值, ...

  8. 用Java写编译器(1)- 词法和语法分析

    词法和语法分析器构建 ANTLR简介 ANTLR全称ANother Tool for Languate Recognition,是基于LL(*)算法实现的语法分析器生成器和词法分析器生成器,由旧金山大 ...

  9. Apache Pulsar 在 BIGO 的性能调优实战(上)

    背景 在人工智能技术的支持下,BIGO 基于视频的产品和服务受到广泛欢迎,在 150 多个国家/地区拥有用户,其中包括 Bigo Live(直播)和 Likee(短视频).Bigo Live 在 15 ...

  10. 【Flutter 实战】全局点击空白处隐藏键盘

    老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘. 对于单个页面来说,通过为 T ...