如何理解盒模型及其 content、padding、border、margin？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 如何理解盒模型及其 content、padding、border、margin？】
【修真院 web（職業）小課堂】如何理解盒模型及其 content、padding、border、margin？
開場語：
大家好，我是 IT 修真院 鄭州分院第 14 期的學員 王亞龍，今天給大家分享一下，修真院官網 css深度思考中的知識點——如何理解盒模型及其 content、padding、border、margin？
（1）背景介紹：
盒子模型簡單點理解就是外邊距 (margin)+ 邊框 (border)+ 內邊距 (padding)+ 內容 (content)，頁面所呈現的效果其實就是一個個盒子堆疊而成的。每一個元素其實是包含了一個 “外在盒子” 和一個 “內在盒子”，其中 “外在盒子” 負責元素是一行顯示還是換行顯示，而 “內在盒子” 則負責寬高、內容展現。
（2）知識剖析：
在標準盒模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。盒子佔位 width = 2margin + 2padding + 2*border, 高度與之一樣。
-
width(包括 min-width, max-width)：寬
-
height(包括 min-height, max-height)：高
-
padding：內邊距
-
border：邊框
-
margin：外邊距
上面五大屬性，除了 width 和 height 以外，padding、border 和 margin 屬性都是由四邊組成的，每邊都可以設定自己的單獨值，還可以簡寫。這裡以 margin 為例具體講解下簡寫的取值模式。
在講解之前，我們先說下盒模型的四邊，方向分別為上、下、左、右，而 CSS 中表示就分別是 top、bottom、left、right
-
margin-top：top 方向單個值
-
margin-right：right 方向單個值
-
margin-bottom：bottom 方向單個值
-
margin-left：left 方向單個值
-
margin：總的，四個方向的值
/* 簡寫之前 */ .box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
} /* 簡寫之後 */ .
box {
margin: 10px 20px 30px 40px; /* 注意順序以top開始，順時針方向 */
}
margin: 10px;，表示四個方向的值都是 10px
margin: 10px 20px;，表示 top 和 bottom 方向是 10px，left 和 right 方向是 20px
這種取值模式其實並不是 margin 所獨有的，同樣 padding 也是按照這個模式來的。而且是一模一樣的。另外的話在寫html的還要注意，頁面預設的話有8個畫素的外邊距，可以在body裡面用 margin=0。來宣告。
內邊距影響盒子的尺寸，會將盒子撐大。寬和高都會將增加 padding 設定的值。所以我們在做頁面的時要注意，所以要保證盒子原來的大小，在寬度和高度上要做相應的減少。
而 border 相對來說還要更復雜點，border 的簡寫，其簡寫模式為：border: 1px solid #ccc;
border 的簡寫其實是由 border-width，border-style，border-color 三個屬性組合而成的。1px 就是 border-width，solid 就是 border-style，#ccc 就是 border-color。
而這三個屬性，它們如果單獨來寫，其取值模式就和 margin 是一樣的了，都可以設定 1-4 個值，如：
.box {
border-color: #f00 #ccc #ccc; /* top left和right bottom */
border-width: 2px 1px; /* top和bottom left和right*/
border-style: solid; /* all */
}
除此之外，border 當然也有表示方向的屬性，如border-left: 1px solid #f00;，則表示左邊框為 1px 紅色的實線。同樣還有 border-top，border-right，border-bottom
（3）常見問題：
1，什麼時候使用內邊距，什麼時候使用外邊距，
2.設定邊距borde的時候，高度或者說寬度發生改變
（4）解決方案：
1,什麼時候使用內邊距，什麼時候使用外邊距，
對於一個 “塊”（比如說 div）要設定他與外部 “塊” 間的距離用 margin，要設定他與內部內容間的距離用 padding
2.設定邊距borde的時候，高度或者說寬度發生改變
這方面大家可以往前看一下，盒子的寬度或者高度是由content+padding+border+margin組成的，在具體設定過程中，這一部分大家要把這一部分算進去。
（5）編碼實戰：
內容：content
.{
: }
.{
: }
上面的話主要演示的是一個盒子，其中內容背景是黃色的，邊框是藍色，中間空白部分就是padding內邊距，而外面比較大的空白部分就是外邊距。可以仔細思考下看下
（6）拓展思考：
外邊距重疊
外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。
防止外邊距重疊解決方案：
雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那麼可以有如下幾個建議可供參考：
外層元素 padding 代替
內層元素透明邊框 border:1px solid transparent;
外層元素 overflow:hidden;
內層元素 加 float:left; 或 display:inline-block;
內層元素 padding:1px;
（7）參考文獻：
1,http://www.hujuntao.com/web/css/css-margin-overlap.html
2, 菜鳥教程
（8）更多討論：
Q1：問題1：垂直居中又幾種辦法？
A1：我：這裡列舉幾個最常見的
1，line-height居中
2，flex佈局居中
align-items: center;
3.利用絕對定位或者是相對定位來居中
Q2：問題2：導航欄定高和不定高的區別
A2：我：定高的話內容不會隨著導航欄內容的增多而增加，會造成一部分內容顯示不出來，不定高可以隨著內容的增加而變化
Q1：問題1：box-sizing 屬性
A1：我： box-sizing，屬性值常用又連兩個
content-box：預設值，讓元素維持 W3C 的標準盒模型。Height = border+padding+content width/height
border-box：讓元素維持 IE6 及以下版本盒模型，Width/Height =width /height-border-padding
（9）鳴謝：
感謝韓筠宜師姐 ，此教程是在他們之前技術分享的基礎上完善而成。
（10）結束語：
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地