盒子模型
- 組成部分:
盒子內容(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不是同一個!!!