就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
css就三個大模組：盒子模型 、 浮動 、 定位
所有的文件元素（標籤）都會生成乙個矩形框，我們成為元素框（element box），它描述了乙個文件元素再網頁布局彙總所佔的位置大小。
每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。
邊框屬性—設定邊框樣式
none：沒有邊框即忽略所有邊框的寬度（預設值）
solid：邊框為單實線
(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
double：邊框為雙實線
div
<
/style>
table
collapse 單詞是合併的意思
border-collapse:collapse; 表示邊框合併在一起。
可以設定百分比和畫素
正方形盒子設定50%時是圓形
border-radius: 左上角 右上角 右下角 左下角;divpadding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
1個值 padding：上下左右邊距
2個值 padding: 上下邊距 左右邊距
3個值 padding：上邊距 左右邊距 下邊距
4個值 padding:上內邊距 右內邊距 下內邊距 左內邊距
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。
讓乙個盒子實現水平居中，需要滿足一下兩個條件：
1. 必須是塊級元素。
2. 盒子必須指定了寬度（width）
3. 然後就給margin左右的外邊距都設定為auto，就可使塊級元素水平居中。
盒子水平居中 左右margin 改為 auto
text-align: center;
margin:
0 auto;
背景我們一般用於小圖示背景 或者 超大背景
section img
aside
*
/* 相鄰的兩個盒子之間設定外邊距會發生合併現象，無論怎麼設定會以最大的margin值為準，稱為外邊距塌陷 */
div
.one
/* 上面的30px會和下面的100px合併，所以兩個盒子外間距100px*/
.two
<
/style>
<
/head>
="one"
>
<
/div>
="two"
>我和上面的盒子距離100px<
/div>
<
/body>
解決方案： 盡量避免。
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併，俗稱margin擊穿。
解決方案：
可以為父元素定義1畫素的上邊框或上內邊距。
可以為父元素新增overflow:hidden。
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是畫素值。
/*外盒尺寸計算（元素空間尺寸）*/
element空間高度 = content height + padding + border + margin
element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算（元素實際大小）*/
element height = content height + padding + border （height為內容高度）
element width = content width + padding + border （width為內容寬度）
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果乙個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。
優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。
原因：
1. margin 會有外邊距合併 還有 ie6下面margin加倍的bug，所以最後使用。
2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
3. width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做。
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/**影；**影 (outset) 但是不能寫 預設 想要內陰影 ： inset
div盒子模型（Box Model）
語法 border border width border style border color 注意 1 邊框寬度 border width 值描述 medium 預設寬度 thin 小於預設寬度 thick 大於預設寬度 指定大小 由浮點數字和單位識別符號組成的長度值，不可為負值如10px等 2...
盒子模型 box model
參考 css 盒子模型 box model 盒子模型 box model 是 css中的術語 是形容 body 和body 內的元素在頁面上像盒子似的用作設計和布局時使用,body和 body 內的元素都可以看作盒子，盒模型本質上是乙個盒子 它包括 邊距 margin 邊框 border 內邊距 p...
CSS盒子模型（Box Model）
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 不同部分的說明...