display常用值
// 常用值 none：元素不顯示 inline：將元素變爲內聯元素，默認 block：將元素變爲塊級元素 inline-block：將元素變爲內聯塊級元素 list-item：inline：將元素變爲列表顯示（一般不用） table：將元素變爲塊級表格元素，前後帶有換行符 inline-table：將元素變爲內聯表格元素，前後不帶換行符 table-row：將元素變爲表格行，類似tr table-cell：將元素變爲表格列，類似td grid：將產生一個塊級網格佈局 inline-grid：將產生一個內聯塊級網格佈局 flex：將產生一個塊級彈性盒子進行佈局 inline-flex：將產生一個內聯彈性盒子進行佈局
position定位
CSS中的定位相當於PS中的新建圖層，即在原有文檔流上新開一層用於元素顯示。
（1）position屬性值
static：元素默認值，即沒有定位，遵循正常的文檔流對象 relative：相對定位 absolute：絕對定位，相對於static以外的第一個父元素進行定位，搭配元素：left/right top/bottom fixed：固定布定位，相對於瀏覽器窗口定位：搭配元素：left/right top/bottom inherit：規定應該從父元素繼承 position 屬性的值 sticky：css3新增，相當於relative和fixed結合，即滑動到一定程度就固定佈局參考鏈接：https://jsbin.com/moxetad/edit?html,css,output
（2）定位相對性
相對於最近的有定位的父元素，絕對定位，如果向上級找，如果都沒找到定位元素，則相對與html定位。
定位機制
控制元素佈局的定位方案 1、普通流（normal flow） HTML默認佈局。 以HTML文檔爲基礎，元素按照在HTML中出現的先後位置自上而下佈局，內聯元素水平排列，直到當行被沾滿然後換行。 塊級元素則會被渲染爲完整的一個新行，除非另外製定，否則所有元素默認都是普通流定位。 也可以說，普通流中元素的位置由該元素在HTML文檔中的位置決定。 2、浮動流（float flow） 在浮動佈局中，元素首先按照普通流的位置出現，然後根據浮動的方向儘可能地向左邊或右邊偏移， 其效果與印刷排版中的文本環繞相似。 3、定位（positioning） （1）絕對定位：absolute positioning 在絕對定位佈局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響， 而元素具體的位置由絕對定位的座標決定。這種定位通過設置top、right、bottom、left這些偏移值， 相對於 static 定位以外的第一個父元素進行定位（這種定位通常設置父元素爲relative定位來配合使用）， 在沒有父元素的條件下，它的參照爲body，該方式脫離文檔流； （2）靜態定位（static positioning） 當我們沒有指定定位方式的時候，這時默認的定位方式就是static，也就是按照文檔的書寫佈局自動分配在一個合適的地方， 這種定位方式用margin來改變位置，對left、top、z-index等設置值無效，這種定位不脫離文檔流； （3）相對定位（relative positioning） 該定位是一種相對的定位，可以通過設置left、top等值，使得指定元素相對其正常的位置進行偏移，這種定位不脫離文檔流 （4）固定定位（fixed positioning） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。這種定位方式是相對於整個文檔的，只需設置它相對於各個方向的偏移值， 就可以將該元素固定在頁面固定的位置，通常用來顯示一些提示信息，脫離文檔流； （5）inherit定位 這種方式規定該元素繼承父元素的position屬性值。 注意： float，absolute，fixed，脫離文檔流，即將元素從普通的佈局排版中拿走， 其他盒子在定位的時候，會當沒看到它，兩者位置重疊就會發生重疊
佈局
（1）table佈局
（2）絕對定位佈局
// 絕對定位中的兩欄設計
<div class="left"></div>
<div class="right"></div>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
overflow-y: hidden;
background: #000;
}
div {
width: 100%;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background-color: green;
}
.right {
margin-left: 200px;
background-color: orange;
}</style>（3）浮動佈局
內聯、內聯塊、浮動、溢出隱藏、純文本都可以識別浮動元素的位置
塊級元素無法識別浮動元素的位置
float以後，元素變成內聯塊級元素
// 清除浮動 .clearfix::after { content: ""; /*display: block;*/ display: table; clear: both;}
（5）網格佈局
網格佈局參考鏈接
盒子模型
1、英文：box model 2、組成要素： （1）、content：寬高所劃分的區域 （2）、border：邊框 （3）、padding：內邊距 （4）、margin：外邊距 3、盒子分類： W3C標準盒子模型 IE盒子模型 4、標準盒子與IE盒子區別： 盒子寬高的計算方式不一樣
（1）標準盒子模型
// 元素寬高度計算 一個元素的寬度 = content 盒子總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 盒子總高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
（2）IE盒子模型
// 元素寬高度計算 一個元素的寬度 = content + padding + border 盒子總寬度 = margin-left + width + margin-right 盒子總高度 = margin-top + height + margin-bottom
（3）box-sizing設置兩種模型
box-sizing取值： content-box：W3C標準模型，瀏覽器默認設置 border-box：IE模型 padding-box：針對firefox，在Firefox 50中已被刪除 具體可以參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
（4）JS獲取盒模型的寬高
取出前提瀏覽器渲染完畢之後
// 1、只能獲取行內樣式的寬高
dom.style.width/height
// 2、內聯樣式和外聯樣式的寬高都能取到，但只有 IE 支持
dom.currentStyle.width/height
// 3、內聯樣式和外聯樣式的寬高都能取到，幾乎所有主流瀏覽器都支持
window.getComputedStyle(dom).width/height
// 4、內聯樣式和外聯樣式的寬高都能取到，幾乎所有主流瀏覽器都支持，
// 取到的是盒模型距離viewport左上角的距離（絕對位置）
dom.getBoundingClientRect().width/height/left/top
示例如下：
// 獲取dom
let dom = ocument.getElementById('box');console.log('style:' + box.style.width);console.log('currentStyle:' + box.currentStyle.width) ;console.log('getComputedStyle:' + getComputedStyle(box).width)console.log('getBoundingClientRect:' + box.getBoundingClientRect().width);BFC
定義：邊距重疊解決方案 中文：塊級格式化上下文 英文：Block Formatting Context
BFC原理（渲染規則）
（1）BFC 裏面的元素，在垂直方向，邊距會發生重疊 （2）BFC在頁面中是獨立的容器，外面的元素不會影響裏面的元素，反之亦然 （3）計算BFC的高度時，浮動的子元素也參與計算 （4）BFC區域不與旁邊的float box區域重疊。（可以用來清除浮動帶來的影響）
元素創建BFC方式
1、body本身爲BFC元素 2、float：值不爲none，如：left right 3、position：值不爲static或relative，如：absolute fixed 4、display：inline-block table-cell inline-table table flex grid 5、overflow：值不爲visible，如：hidden auto scroll
BFC作用
1、解決margin重疊/合併問題（兄弟元素） - 一般不需要解決 2、解決margin塌陷（父子元素） 3、解決浮動流造成父級元素高度坍塌 - 一般用清除浮動解決 4、解決浮動元素覆蓋問題
BFC應用舉例
（1）解決margin重疊/合併問題
標準文檔流中，豎直方向的margin不疊加，會重疊合並，只取較大的值作爲margin(水平方向的margin是可以疊加的，即水平方向沒有塌陷現象)。
如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有margin重疊的現象的。
// 通常發生在兄弟元素之間
// 現象解釋：對應原理第一條：BFC 裏面的元素，在垂直方向，邊距會發生重疊
<div class="box box1"></div>
<div class="box box2"></div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: lightblue;
margin-bottom: 100px;
}
.box2 {
background-color: orange;
margin-top: 50px;
}</style>
解決方案：分別將兩個元素放置到BFC容器中
<div class="container">
<div class="box box1"></div>
</div>
<div class="container">
<div class="box box2"></div>
</div>
<style type="text/css">
.container {
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: lightblue;
margin-bottom: 100px;
}
.box2 {
background-color: orange;
margin-top: 50px;
}</style>
（2）解決margin塌陷
<div class="box1">
<div class="box2"></div>
</div>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #000;
}
.box2 {
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background-color: orange;
}</style>
解決方案：
給box1加一個透明邊框：border-top: 1px solid transparent;
將父級變爲BFC
// box1變爲BFC
.box1 {
width: 300px;
height: 300px;
background-color: #000;
overflow: hidden;
}解決原理對應第二條：
BFC在頁面中是獨立的容器，外面的元素不會影響裏面的元素，反之亦然
（3）解決浮動流造成父級元素高度坍塌
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<style type="text/css">
.box {
width: 200px;
border: 10px solid #000;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}</style>
解決方案：
給父元素設置高度
使用清除浮動的方法（開發常用）
父元素變爲BFC，以下爲BFC解決方案
// 父級加一行代碼變爲BFC即可
.box {
width: 200px;
border: 10px solid #000;
overflow: hidden;}爲什麼父元素變爲BFC之後就有高度了呢？
對應原理第三條：計算BFC的高度時，浮動的子元素也參與計算
（4）解決浮動元素覆蓋問題
<div class="box1">浮動元素box</div>
<div class="box2">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
<style type="text/css">
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
}</style>
解決方案：右側浮動元素變爲BFC
// box2加一行代碼變爲BFC即可
.box2 {
width: 200px;
height: 200px;
background-color: orange;
overflow: hidden;}對應原理第四條：BFC區域不與旁邊的float box區域重疊
BFC、IFC、GFC、FFC定義
BFC：Block Formatting Contexts - 塊級格式化上下文 IFC：Inline Formatting Contexts - 內聯格式化上下文 GFC：GridLayout Formatting Contexts - 網格佈局格式化上下文 FFC：Flex Formatting Contexts - 自適應格式化上下文