一、display簡(jiǎn)介
display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。
從大的分類(lèi)來(lái)講，display的32種寫(xiě)法可以分為6個(gè)大類(lèi)，再加上1個(gè)全局類(lèi)，一共是7大類(lèi)：外部值 內(nèi)部值 列表值 屬性值 顯示值 混合值 全局值。
二、外部值類(lè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)元素，此元素前后沒(méi)有換行符。
- 最典型的是<span>，還有<a>，<img>都擁有此。
3） display: run-in;
- 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
- 支持性很差?。?！谷歌火狐都不支持！?。〔挥茫。。?！
三、內(nèi)部值類(lèi)型的display
1） display: flow-root;
- 簡(jiǎn)單的講他是最新一種BFC，也是最新的浮除浮動(dòng)的方案。雖然目前僅幾個(gè)最新瀏覽器(谷歌火狐)支持，但完全可以通過(guò)
@supports()屬性做完美降級(jí)處理
兼容性元素容器會(huì)生成一個(gè)塊盒子，并且塊盒子里的內(nèi)容是使用流布局。它總是為它建立一個(gè)新的塊格式化上下文內(nèi)容。如果你對(duì)CSS中浮動(dòng)有所了解之后，你不難發(fā)現(xiàn)，容器里的元素浮動(dòng)之后，會(huì)造成容器的坍塌現(xiàn)象之類(lèi)的
浮動(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í)表格來(lái)顯示（類(lèi)似 <table>），表格前后帶有換行符
- display：table解決了一部分需要使用表格特性但又不需要表格語(yǔ)義的情況,比如：
父元素寬度固定，想讓若干個(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解決了避免使用表格的問(wèn)題，但有幾個(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 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
這個(gè)玩意兒可大了?？梢灾苯尤ニ阉骺磸椥圆季值膬?nèi)容。
4）display: grid;
- 就像flex的升級(jí)版，布局上十分強(qiáng)大。
- grid布局即網(wǎng)格布局，每個(gè)網(wǎng)格都有起止線，每?jī)蓷l線之間都有設(shè)定好的距離。
這個(gè)玩意兒也可大了?？梢灾苯尤ニ阉骺淳W(wǎng)格布局的內(nèi)容。
