【知识点】display的N种写法（一）

一、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布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离。
这个玩意儿也可大了。可以直接去搜索看网格布局的内容。

【知识点】display的N种写法（一）

一、display简介

二、外部值类型的display

1） display: block;

2） display: inline;

3） display: run-in;

三、内部值类型的display

1） display: flow-root;

2） display: table;

3）display: flex;

4）display: grid;

推荐阅读更多精彩内容