盒子模型
- 組成部分：
盒子內容(width+height): 是當前元素用來容納子孫元素。（content area)
盒子壁(border): 來顯示自身的輪廓。
內邊距(padding): 隔離自身和與子孫元素。(在內容周圍增加額外的空間）
外邊距(margin): 隔離自身和相鄰元素。(提供元素之間的間距）(margin+border+padding+(content=width+height))
div{
width: 200px;
height: 200px;
border: 1px solid red;
padding: 50px;
}寬度和真實佔有寬度，不是一個概念！除此之外：
- body標籤也有margin
<body>標籤有必要強調一下。很多人以爲<body>標籤佔據的是整個頁面的全部區域，其實是錯誤的，正確的理解是這樣的：整個網頁最大的盒子是<document>，即瀏覽器。而<body>是<document>的兒子。瀏覽器給<body>默認的margin大小是8個像素，此時<body>佔據了整個頁面的一大部分區域，而不是全部區域。來看一段代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單練習</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狹路相逢</div>
</body>
</html>
- 注意：盒子的寬高和內容的width 、height不是同一個！！！