display值的分类

标签：个数   行内元素   blog   历史   fir   str   详细   含义   def   

整体来讲，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; 这个值基本上不会有人用，但你可以对它进行一下了解；因为除了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;
    }

现在我们给.container加上display: flow-root;再看一下：

喏，外容器高度又回来了，这效果是不是杠杠的？

那位同学说，我们用clear: both;不是一样可以达到这效果吗？ 

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

二狗子，你变了，请你离开这里好吗！我们在讲display: flow-root;，不是在讲clear: both;！

display值的分类

标签：个数   行内元素   blog   历史   fir   str   详细   含义   def   

原文地址：https://www.cnblogs.com/menglong1214/p/9204357.html