概念：所謂盒子模型（box model）就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容(content)、內邊距（padding）、邊框（border）和外邊距（margin）組成。
盒子模型特性
標準的盒子模型
組成部分： 內容區 content + 填充補白（裡面的） + padding + 邊框 border+外邊距 （margin）
在標準盒子模型下，計算乙個容器的總高度
如果是計算的自己 設定的height+padding+border
如果計算的是父元素的，子元素設定的height+子元素設定padding+子元素設定border+子元素設定margin。
怪異盒子模型（ie的標準盒模型）
組成部分： 內容區域 + margin外邊距
觸發條件：
給元素新增css3屬性 box-sizing：border-box
div所以如果用css3新屬性，就不要考慮低版本瀏覽器了
觸發容器為怪異盒子模型之後，再給元素新增border或者 padding就不會把盒子撐大，也不需要去做減法了。
文件結構的 doctype 不寫，這個是在 ie8 ie7 ie6 ie5等低版本上有，測試可以在 win7 系統上比較老舊的ie瀏覽器上，win10 自帶的新ie瀏覽器不可以。
border 屬性來定義盒子的邊框，該屬性包含3個子屬性：border-style(邊框樣式)，border-color(邊框顏色)，border-width(邊框寬度)。
1、邊框樣式border-style
屬性值說明
none
預設值，無邊框，不受任何指定的 border-width 影響
hidden
隱藏邊框，ie 不支援
dotted
定義邊框為點線
dashed
定義邊框為虛線
solid
定義邊框為實線
double
定義邊框為雙線邊框，兩條線及其間隔寬度之和等於指定的border-width 值
groove
根據 border-color 定義 3d 凹槽
ridge
根據 border-color 定義 3d 凸槽
inset
根據 border-color 定義 3d 凹邊
outset
根據 border-color 定義 3d 凸邊
2、綜合寫法
border : border-width || border-style || border-colortable擴充套件2：
圓角邊框（css3）：
語法：取值可以是指定的固定的長度，也可以使用百分比來表示。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
margin：0 auto；實現乙個有寬度的容器水平居中。
注意點：
a. margin支援左右auto，上下無效
b. margin-top使用的時候，有相容問題。
產生條件：預設情況下，如果乙個子元素給了 margin-top ，父元素會一起下來，這個是相容問題
解決方法：
子元素或者父元素浮動（看頁面布局來定）
給父元素新增border-top
給父元素新增overflow：hidden；
1、 拓展案例
c、margin的上下外邊距重疊
bfc的深層理解和應用場景及布局方式
產生條件：預設情況下，2個並列的元素，上面元素給了margin-top，下面元素給了margin-bottom，這個時候上下會發生重疊，解析的結果是最大的數值。
解決方法：
1、給下面的元素新增父元素並且新增宣告overflow：hidden；
padding是內間距 （填充 補白）
什麼時候用，需要調整間距，並且這個間距相對於該元素來說是裡面的時候用
用法：簡寫 和拆開
padding:10px; padding:10px 20px 30px 40px;
padding-top bottom left right
padding新增上去之後，會把容器給撐大， 如果設定了容器固定的寬高，又新增了padding之後，想要保證盒子大小不變，必須得減去padding的數值，如果沒有設定容器的寬高，那麼就不需要做減法
padding不支援負值寫法
padding也不支援auto
根據穩定性來分，建議如下：
按照 優先使用寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
width > padding > marginpadding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
width 沒有問題 我們經常使用寬度剩餘法 高度剩餘法來做
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影；
注意前兩個屬性是必須寫的。其餘的可以省略。
**影 (outset) 預設值，但是不能寫 ，想要內陰影寫上 inset 即可。
可以新增多個陰影，如同時新增內陰影和**影。
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盒...