一．前言
盒子模型，英文即box model。無論是div、span、還是a都是盒子。
但是，、表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。
盒子中的區域
乙個盒子中主要的屬性就5個：（width、height）、padding、border、margin。如下：
width和height：內容的寬度、高度（不是盒子的寬度、高度）。
padding：內邊距。
border：邊框。
margin：外邊距。
舉個例子---vs code中演示demo
上面這個盒子，width:100px; height:100px; 但是真實占有的寬高是202*202。 這是因為還要加上padding、border。
二．標準盒子模型和ie盒子模型
width和height：內容的寬度、高度（不是盒子的寬度、高度）。
padding：內邊距。
border：邊框。
margin：外邊距。
在 css的標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。ie盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。
三．以下我們就標準盒子模型來討論
1.認識width+height
在標準盒子模型中,width和height就是content的寬度和高度
2.認識padding
2.1padding區域也有顏色
padding就是內邊距。padding的區域有背景顏色，css2.1前提下，並且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有boder以內的區域。
在demo中加上background-color: pink;展示padding區域的顏色
2.2padding有四個方向
padding是4個方向的，所以我們能夠分別描述4個方向的padding。
方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。
小屬性的寫法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
綜合屬性的寫法：(上、右、下、左)（順時針方向，用空格隔開）
padding:30px 20px 40px 100px;
如果寫了四個值，則順序為：上、右、下、左。
如果只寫了三個值，則順序為：上、右、下。左和右一樣。
如果只寫了兩個值，比如說：padding: 30px 40px;則順序等價於：30px 40px 30px 40px;
通過屬性層疊來減少**量。比如：padding: 20px;padding-left: 30px;
利用css的層疊性將padding-left將第一行的左內邊距層疊掉了，導致第一行小屬性無效
但是如果反過來呢,就會發現padding-left：30px被層疊掉了
一些元素，預設帶有padding，比如ul標籤。如下：
上圖顯示，不加任何樣式的ul，也是有40px的padding-left。
所以，我們做網頁的時候，為了便於控制，總是喜歡清除這個預設的padding。
可以使用*進行清除
*但是，*比較殘暴，所以我們使用並集選擇器，羅列所有的標籤：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
3.認識border
border就是邊框。邊框有三個要素：畫素（粗細）、線型、顏色。
顏色如果不寫，預設是黑色。另外兩個屬性不寫，會顯示不出來邊框。
border-style border的所有的線型如下——見ppt
border拆分
border是乙個大綜合屬性。比如說：
border:1px solid red;
就是把4個邊框，都設定為1px寬度、線型實線、red顏色。
border屬性是能夠被拆開的，有兩大種拆開的方式：
（1）按三要素拆開：border-width、border-style、border-color。（乙個border屬性是由三個小屬性綜合而成的）
（2）按方向拆開：border-top、border-right、border-bottom、border-left。
乙個border屬性，是由三個小屬性綜合而成的。如果某乙個小屬性後面是空格隔開的多個值，那麼就是上右下左的順序。舉例如下：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
（1）按三要素拆：
border-width:10px; //邊框寬度
border-style:solid; //線型
border-color:red; //顏色。
等價於： border:10px solid red;
(2)按方向來拆：
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等價於： border:10px solid red;
（3）按三要素和方向來拆：(就是把每個方向的，每個要素拆開。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等價於： border:10px solid red;
4．認識margin
標籤也有margin
標籤有必要強調一下。很多人以為標籤佔據的是整個頁面的全部區域，其實是錯誤的，正確的理解是這樣的：整個網頁最大的盒子是，即瀏覽器。而是的兒子。瀏覽器給預設的margin大小是8個畫素，此時佔據了整個頁面的一大部分區域，而不是全部區域。
常見問題： 1.在實際開發中到底用大屬性還是小屬性？ 很簡單：什麼簡單用什麼。但要懂得，用小屬性層疊大屬性。 舉個例子 2.對於同乙個盒子，不同的盒模型去解釋會有不同的寬高，如何解決w3c 為了解決這個問題，在 css3 中加了 box-sizing 這個屬性。
box-sizing:content-box(標準盒子模型)
這個是box-sizing的預設屬性,這個時候的width是content的width,height是content的height
box-sizing:border-box(ie盒子模型)
設定該屬性後,這樣會更加直觀的體現盒子的大小,這個時候的width是box的width,height是box的height
3.magrin在垂直方向上的重疊觸發了bfc
本文參考：
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...