div { /*外盒尺寸計算（元素空間尺寸）*/
width: 100px;
height: 100px;
background-color: blue;
border: 5px solid red; /*4個邊框 110 5+5*/
/*空間尺寸： width+border*/
padding: 10px; /* left right 10+10 (加上前面的一共130)*/
margin: 20px; /*left right 20+20 （加上前面的一共170）*/
/*空間尺寸: width + border + padding + margin;*/
/*內盒(實際)尺寸: width + border + padding; 130*/
}
計算盒子尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 59px;
height: 33px;
border: 1px solid #c1c1c1;
margin: 200px;
font-size: 16px;
color: #666;
line-height: 33px;
border-radius: 5px 0 0 5px;
padding-left: 15px; /* 給了padding值盒子會增大*/
/*74+15=89*/
/*74-15=59*/
}
</style>
</head>
<body>
<div>新聞</div>
</html>
注意：
1.寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（img標籤和input除外）
2.計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況
3.如果一個盒子沒有給定寬度/高度或繼承父親的寬度/高度，則padding不會影響本盒子大小
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
height: 30px;
border: 1px solid red;
padding-left: 20px; /*因爲這個盒子沒有寬度所以padding不會影響盒子的寬度 ，width：100%也會影響*/
}
nav {
width: 300px;
height: 40px red;
}
p {
/*因爲p沒有指定寬度，所以會默認和父親一樣寬 塊級元素*/
height: 20px;
background-color: skyblue;
padding-left: 30px; /*此時padding也不會影響盒子的寬度*/
}
</style>
</head>
<body>
<div>123</div>
<nav>
<p>456</p>
</nav>
</body>
</html>
