一红伦、display簡(jiǎn)介
display 屬性規(guī)定元素應(yīng)該生成的框的類型晃酒。
從大的分類來講吴菠，display的32種寫法可以分為6個(gè)大類痢缎，再加上1個(gè)全局類，一共是7大類：外部值 內(nèi)部值 列表值 屬性值 顯示值 混合值 全局值伦糯。
二棍矛、外部值類型的display
1） display: block;
- 設(shè)置此值得元素將顯示為塊級(jí)元素伍伤，此元素前后會(huì)帶有換行符你虹。
- 我們最熟悉的<div>，最基本的塊級(jí)元素彤避，除<div>之外傅物，還有<h1>到<h6>，<p>琉预，<form>董饰，<header>，<footer>圆米，<section>卒暂，<article>等天生都擁有這個(gè)值。
- 當(dāng)控制使用display:none;隱藏的元素也可以使用此屬性讓其顯示
2） display: inline;
- 設(shè)置此值得元素將顯示為內(nèi)聯(lián)元素娄帖，此元素前后沒有換行符也祠。
- 最典型的是<span>，還有<a>近速，<img>都擁有此诈嘿。
3） display: run-in;
- 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
- 支持性很差Ｏ鞔小＝毖恰！谷歌火狐都不支持Ｎ鲈摇Ｎ糇帧！不用Ｊ追薄Ｗ鞴！蛮瞄！
三所坯、內(nèi)部值類型的display
1） display: flow-root;
- 簡(jiǎn)單的講他是最新一種BFC，也是最新的浮除浮動(dòng)的方案挂捅。雖然目前僅幾個(gè)最新瀏覽器(谷歌火狐)支持芹助，但完全可以通過
@supports()屬性做完美降級(jí)處理
兼容性元素容器會(huì)生成一個(gè)塊盒子堂湖，并且塊盒子里的內(nèi)容是使用流布局。它總是為它建立一個(gè)新的塊格式化上下文內(nèi)容状土。如果你對(duì)CSS中浮動(dòng)有所了解之后无蜂，你不難發(fā)現(xiàn)，容器里的元素浮動(dòng)之后蒙谓，會(huì)造成容器的坍塌現(xiàn)象之類的
浮動(dòng)后父級(jí)坍塌使用對(duì)父級(jí)設(shè)置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;
- 此元素會(huì)作為塊級(jí)表格來顯示（類似 <table>）斥季，表格前后帶有換行符
- display：table解決了一部分需要使用表格特性但又不需要表格語義的情況,比如：
父元素寬度固定，想讓若干個(gè)子元素平分寬度
<!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;//元素當(dāng)做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解決了避免使用表格的問題累驮，但有幾個(gè)需要注意的：
（1）display: table時(shí)padding會(huì)失效
（2）display: table-row時(shí)margin酣倾、padding同時(shí)失效
（3）display: table-cell時(shí)margin會(huì)失效
3）display: flex;
- Flex 是 Flexible Box 的縮寫，意為"彈性布局"谤专，用來為盒狀模型提供最大的靈活性躁锡。
這個(gè)玩意兒可大了≈檬蹋可以直接去搜索看彈性布局的內(nèi)容映之。
4）display: grid;
- 就像flex的升級(jí)版，布局上十分強(qiáng)大蜡坊。
- grid布局即網(wǎng)格布局杠输，每個(gè)網(wǎng)格都有起止線，每兩條線之間都有設(shè)定好的距離秕衙。
這個(gè)玩意兒也可大了蠢甲。可以直接去搜索看網(wǎng)格布局的內(nèi)容据忘。
