Created By JishuBao on 2019-03-15 12:38:22
Recently revised in 2019-03-15 12:38:22
歡迎大家來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址
文章簡介：
1、盒模型基本概念
2、何為border-box?
3、盒模型的其他屬性
4、JS獲取寬高
5、邊距重疊
6、BFC（邊距重疊解決方案）
一、盒模型基本概念
盒模型的組成大家肯定都懂,由裡向外content->padding->border->margin。
盒模型是有2鍾標準的,一個是標準模型,一個是IE模型。
從倆圖不難看出在標準模型中,盒模型的寬高只是內容(content)的寬高。
而在IE模型中盒模型寬高是內容content+填充padding+邊框border的總寬高。
二、何為border-box?
背景：先宣告一下運用的場景，假如專案佈局使用的是自適應的佈局方式，div給出的寬度是百分比的形式，即框佔視窗寬度的50%，但邊界和內邊距是用畫素來表示的怎麼辦？為了避免這種問題，可以使用屬性box-sizing來調整框模型。使用border-box，來將框模型更改成這個新的模型(即IE模型)**。
注意：回顧一下，框的總寬度是width,padding-right,padding-left,border-right以及border-left屬性之和，這就是造成上述背景下，樣式不好調整的原因。
box-sizing屬性用於更改用於計算元素的寬度和高度預設的CSS盒子模型，可以使用此屬性來模擬不正確支援CSS盒子模型規範的遊覽器行為。
/* 標準模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
複製程式碼三、盒模型的其他屬性
1.margin、padding設定為百分比形式：
給div元素的內邊距和外邊距的各個邊設定為5%，意味著“包含元素寬度的5%”，因此，隨著示例輸出視窗的大小增加，內邊距和外邊距也增加了。
2.margin可以接受負數，可以用來引起元素框的重疊：
注意:外邊距有一個特別的行為被稱作外邊距塌陷：當倆個框彼此接觸時,他們的間距將取倆個相鄰邊界的最大值,而非倆者的總和。
3.背景剪裁(Background clip)屬性:
background-clip:border-box; 背景被剪裁到邊框盒。
background-clip:padding-box; 背景被剪裁到內邊距盒。
background-clip:content-box; 背景被剪裁到內容框。
4.輪廓(outline)：
一個框的outline是一個看起來像是邊界但又不屬於框模型的東西。它的行為和邊界差不多，但是並不改變框的尺寸（更準確的說，輪廓被勾畫於在框邊界之外，外邊距區域之內）。
相關例項：在引入bootstrap框架時，input在360遊覽器（相容模式）下顯示，在獲得焦點時外邊框變藍，這就是outline造成的影響，去掉只需要新增一個CSS樣式即可，input:focus{outline:none;}。
5.CSS框型別，通過display屬性來設定元素的框型別：
最常見的display型別是：block,inline,inline-block，即塊框（block box）,行內框（inline box）,行內塊狀框（inline-block box）。
注意：預設狀態下display屬性值，塊級元素display:block，行內元素display:inline。
不常見的型別display型別是：table,flex,grid。
①display:table--允許你像處理table佈局那樣處理非table元素，而不是濫用HTML的table標籤來達到同樣的目的；
②display:flex--允許你處理一些困擾CSS已久的一些傳統佈局問題，如佈置一系列彈性等寬容器或者垂直居中內容（目前，flex佈局在移動端使用較為廣泛）；
③display:grid--給出一種簡單實現CSS網路系統的方式，而在傳統上它依賴於一些棘手難以處理的CSS網路框架。
6.框的高度
框的高度不遵守百分比的長度；框的高度總是採用框內容的高度，除非指定一個絕對的高度（如：px或者em）,它會比在頁面上預設是100%高度更實用。
7.盒的高階屬性--設定寬和高的約束
①通過min-width,max-width,min-height,max-height屬性，來設定大小約束，以更靈活的方式控制內容盒的大小：
這類情況通常用於響應式網頁設計，將一個佈局的外層容器的寬度設定為百分比形式。
width:70%;
max-width:1280px;
min-width:480px;
複製程式碼然後，新增下句CSS使該容器在它的父容器內居中顯示：
margin:0 auto;
複製程式碼那麼最終呈現的效果是：當父容器在最小和最大寬度限制內時，它將填滿整個視口寬度；當父容器超過1280px寬度時，佈局將保持在1280px寬，並開始在可用空間內居中。當寬度低於480px時，視口將小於容器，您必須滾動才能看到完全的內容。
②max-width屬性的另一個好處是可以將容器內的媒體（如影象和視訊）控制在容器內（響應式圖片）：
在上述例子中，影象會引起一個問題--起初它的顯示正常，但當容器變得比影象更窄時，影象開始溢流容器（因為它是一個固定的寬度）。解決這類問題，可以用以下CSS：
display:block;
margin:0 auto;
max-width:100%;
複製程式碼前兩條屬性display:block,margin:0auto，使它的展示行為像一個塊元素並且在父容器內居中。而max-width:100%限制了影象的寬度使它的最大寬度與父容器的寬度相等。因此，當父容器寬度縮小到小於影象的寬度時，影象會一起縮小。(這樣，可以讓圖片最大隻能是自己的寬度，成為響應式的圖片)
四、JS獲取高度
為了方便書寫，以下用dom來表示獲取的HTML的節點。
1.dom.style.width/height
這種方式只能取到dom元素內聯樣式所設定的寬高，也就是說如果該節點的樣式是在style標籤中或外聯的CSS檔案中設定的話，通過這種方法是獲取不到dom的寬高的。
2.dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設定的樣式，都能獲取到。
但這種方式只有IE瀏覽器支援。
3.window.getComputedStyle(dom).width/height
這種方式的原理和2是一樣的，這個可以相容更多的瀏覽器，通用性好一些。
4.dom.getBoundingClientRect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的。
5.dom.offsetWidth/offsetHeight
這個就沒什麼好說的了，最常用的，也是相容最好的。
五、邊距重疊
如下圖，父元素沒有設定margin-top，而子元素設定了margin-top:20px可以看出，父元素也一起有了邊距。
六、邊距重疊解決方案(BFC)
首先要明確BFC是什麼意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”
BFC的原理
1.內部的box會在垂直方向，一個接一個的放置。
2.每個元素的margin box的左邊，與包含塊border。
3.box的左邊相接觸（對於從做往右的格式化，否則相反）。
4.box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊。
5.bfc的區域不會與浮動區域的box重疊。
6.bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裡的元素，反過來，裡面的也不會影響外面的。
7.計算bfc高度的時候，浮動元素也會參與計算。
怎麼去建立bfc
1.float屬性不為none（脫離文件流）
2.position為absolute或fixed
3.display為inline-block,table-cell,table-caption,flex,inine-flex
4.overflow不為visible
5.根元素
應用場景
1.自適應兩欄佈局
2.清除內部浮動
3.防止垂直margin重疊
看一個垂直margin重疊例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
background: #0ff;
height:100px;
margin-bottom:30px;
}
.bottom{
height:100px;
margin-top:50px;
background: #ddd;
}
</style>
</head>
<body>
<section class="top">
<h1>上</h1>
margin-bottom:30px;
</section>
<section class="bottom">
<h1>下</h1>
margin-top:50px;
</section>
</body>
</html>
複製程式碼
用bfc可以解決垂直margin重疊的問題
<section class="top">
<h1>上</h1>
margin-bottom:30px;
</section>
<!-- 給下面這個塊新增一個父元素，在父元素上建立bfc -->
<div style="overflow:hidden">
<section class="bottom">
<h1>下</h1>
margin-top:50px;
</section>
</div>
複製程式碼
如果你覺得我的文章還不錯的話，可以給個star哦~，GitHub地址