一、display简介
display 属性规定元素应该生成的框的类型。
从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类：外部值 内部值 列表值 属性值 显示值 混合值 全局值。
二、外部值类型的display
1） display: block;
- 设置此值得元素将显示为块级元素，此元素前后会带有换行符。
- 我们最熟悉的<div>，最基本的块级元素，除<div>之外，还有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>等天生都拥有这个值。
- 当控制使用display:none;隐藏的元素也可以使用此属性让其显示
2） display: inline;
- 设置此值得元素将显示为内联元素，此元素前后没有换行符。
- 最典型的是<span>，还有<a>，<img>都拥有此。
3） display: run-in;
- 此元素会根据上下文作为块级元素或内联元素显示。
- 支持性很差！！！谷歌火狐都不支持！！！不用！！！！
三、内部值类型的display
1） display: flow-root;
- 简单的讲他是最新一种BFC，也是最新的浮除浮动的方案。虽然目前仅几个最新浏览器(谷歌火狐)支持，但完全可以通过
@supports()属性做完美降级处理
兼容性元素容器会生成一个块盒子，并且块盒子里的内容是使用流布局。它总是为它建立一个新的块格式化上下文内容。如果你对CSS中浮动有所了解之后，你不难发现，容器里的元素浮动之后，会造成容器的坍塌现象之类的
浮动后父级坍塌使用对父级设置display:flow-root解决塌陷
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer{ display: flow-root; background-color: green; } .inner{ float: left; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="outer"> 我是外部的div <div class="inner"> </div> </div> </body> </html>
2） display: table;
- 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
- display：table解决了一部分需要使用表格特性但又不需要表格语义的情况,比如：
父元素宽度固定，想让若干个子元素平分宽度
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer{ display: table; border: 1px solid #000; width: 600px; } .inner{ display: table-cell;//元素当做td或th width: 100px; height: 100px; } .inner:nth-child(2n){ background-color: red; } .inner:nth-child(2n+1){ background-color: green; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>display:table;注意：虽然display：table解决了避免使用表格的问题，但有几个需要注意的：
（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效
3）display: flex;
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
这个玩意儿可大了。可以直接去搜索看弹性布局的内容。
4）display: grid;
- 就像flex的升级版，布局上十分强大。
- grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离。
这个玩意儿也可大了。可以直接去搜索看网格布局的内容。
