CSS盒子模型
所有的
HTML
元素都可以看作是一個盒子
将盒子模型拆分，則包括 外邊距+邊框+填充+内容
顯得專業一些，
box model
=
margin
+
border
+
padding
+
content
------------------------------------------
| margin |
| -------------------------------------- |
| | border | |
| | ---------------------------------- | |
| | | padding | | |
| | | ------------------------------ | | |
| | | | content | | | |
| | | | | | | |
| | | | | | | |
| | | ------------------------------ | | |
| | ---------------------------------- | |
| ------------------------------------- |
------------------------------------------ 複制
盒子成分分析
margin
#marginShow{
/* 四個方向簡寫 */
margin: 10px;
/* 上下邊距，左右邊距簡寫 */
margin: 10px 10px;
/* 上右下左四個邊距 */
margin: 10px 10px 10px 10px;
/* 上右下左分别單獨配置 */
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
} 複制
border
#boderShow{
/* 簡寫 */
border: 1px solid #eee;
/* 四個方向單獨配置 */
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
} 複制
padding
#paddingShow{
/* 四個方向簡寫 */
padding: 10px;
/* 上下填充，左右填充簡寫 */
padding: 10px 10px;
/* 上右下左四個填充 */
padding: 10px 10px 10px 10px;
/* 上右下左分别單獨配置 */
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
} 複制
box-sizing屬性
content-box
：預設值，
width
和
height
屬性分别應用到元素的内容框。在寬度和高度之外繪制元素的内邊距、邊框、外邊距，稱為标準盒子模型。
border-box
：為元素設定的
width
和
height
屬性決定了元素的邊框盒。就是說，為元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。通過從已設定的寬度和高度分别減去 邊框 和 内邊距 才能得到内容的寬度和高度，稱為IE盒子模型。
inherit
：規定應從父元素繼承box-sizing屬性的值。
浏覽器相容性
一旦為頁面設定了恰當的
DTD
，大多數浏覽器都會按照上面的圖示來呈現内容。然而
IE5
和
IE6
的呈現卻是不正确的。根據
W3C
的規範，元素内容占據的空間是由
width
屬性設定的，而内容周圍的
padding
和
border
值是另外計算的。不幸的是，
IE5.X
和
IE6
在怪異模式中使用自己的非标準模型。這些浏覽器的
width
屬性不是内容的寬度，而是内容、内邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的内邊距，而是嘗試将内邊距或外邊距添加到元素的父元素和子元素。
IE8
及更早
IE
版本不支援設定填充的寬度和邊框的寬度屬性。
解決
IE8
及更早版本不相容問題可以在
HTML
頁面聲明
<!DOCTYPE html>
即可。
測試代碼
<!DOCTYPE html>
<html>
<head>
<title>CSS盒模型</title>
</head>
<body>
<div class="normal">我是帶了一個border盒子</div>
<div class="hr"></div>
<div id="marginShow" class="normal">我是帶了margin的盒子</div>
<div class="hr"></div>
<div id="paddingShow" class="normal">我是帶了padding的盒子</div>
<div class="hr"></div>
<div id="boxsizeShow" class="normal">我是帶了padding+IE盒子模型的盒子</div>
<style type="text/css">
.hr{
height: 1px;
background: #eee;
}
.normal{
color: #fff;
width: 300px;
height: 50px;
background: #1E9FFF;
border: 1px solid #aaa;
}
#marginShow{
/* 四個方向簡寫 */
margin: 10px;
/* 上下邊距，左右邊距簡寫 */
margin: 10px 10px;
/* 上右下左四個邊距 */
margin: 10px 10px 10px 10px;
/* 上右下左分别單獨配置 */
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
#paddingShow{
/* 四個方向簡寫 */
padding: 10px;
/* 上下填充，左右填充簡寫 */
padding: 10px 10px;
/* 上右下左四個填充 */
padding: 10px 10px 10px 10px;
/* 上右下左分别單獨配置 */
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
#boxsizeShow{
box-sizing: border-box;
padding: 10px;
}
</style>
</body>
</html> 複制