CSS重點Float、dispaly、position、BFC、盒子模型

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定位

Fixed,absolute脫標，沒法marger 0 auto居中或者浮動

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定位。

定位機制

控制元素佈局的定位方案

一、普通流（normal flow）
HTML默認佈局。
以HTML文檔爲基礎，元素按照在HTML中出現的前後位置自上而下佈局，內聯元素水平排列，直到當行被沾滿而後換行。
塊級元素則會被渲染爲完整的一個新行，除非另外製定，不然全部元素默認都是普通流定位。
也能夠說，普通流中元素的位置由該元素在HTML文檔中的位置決定。

二、浮動流（float flow）
在浮動佈局中，元素首先按照普通流的位置出現，而後根據浮動的方向儘量地向左邊或右邊偏移，
其效果與印刷排版中的文本環繞類似。

三、定位（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;
  }

 

盒子模型

一、英文：box model

二、組成要素：
    （1）、content：寬高所劃分的區域
    （2）、border：邊框
    （3）、padding：內邊距
    （4）、margin：外邊距

三、盒子分類：
    W3C標準盒子模型
    IE盒子模型

四、標準盒子與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獲取盒模型的寬高

取出前提瀏覽器渲染完畢以後

// 一、只能獲取行內樣式的寬高
dom.style.width/height
// 二、內聯樣式和外聯樣式的寬高都能取到，但只有 IE 支持
dom.currentStyle.width/height
// 三、內聯樣式和外聯樣式的寬高都能取到，幾乎全部主流瀏覽器都支持
window.getComputedStyle(dom).width/height
// 四、內聯樣式和外聯樣式的寬高都能取到，幾乎全部主流瀏覽器都支持，
// 取到的是盒模型距離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方式

一、body自己爲BFC元素
二、float：值不爲none，如：left right
三、position：值不爲static或relative，如：absolute fixed
四、display：inline-block table-cell inline-table table flex grid
五、overflow：值不爲visible，如：hidden auto scroll

BFC做用

一、解決margin重疊/合併問題（兄弟元素） - 通常不須要解決
二、解決margin塌陷（父子元素）
三、解決浮動流形成父級元素高度坍塌 - 通常用清除浮動解決
四、解決浮動元素覆蓋問題

BFC應用舉例

（1）解決margin重疊/合併問題

1. 標準文檔流中，豎直方向的margin不疊加，會重疊合並，只取較大的值做爲margin(水平方向的margin是能夠疊加的，即水平方向沒有塌陷現象)。
2. 若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有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>

解決方案：

1. 給box1加一個透明邊框：border-top: 1px solid transparent;
2. 將父級變爲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>

解決方案：

1. 給父元素設置高度
2. 使用清除浮動的方法（開發經常使用）
3. 父元素變爲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 - 自適應格式化上下文