盒模型：
每個html元素都可以看做成一個盒模型。
1.一個盒子的特點。（border，padding，內容區域）
2.盒子與盒子之前的關係（margin）
盒子的結構：
1.content（內容區域）：展示文字跟圖片的
2.padding（內邊距）：內容與邊框線的距離
3.border（邊框）：元素的邊框
4.margin（外邊距）：元素與元素之間的距離（兄弟元素，父子級關係元素）
content知識點：
1.width：內容的寬度
2.height 內容的高度
3.overflow 當內容超出規定的寬高後的處理
三個值：hidden(超出部分隱藏)
scroll(在水平跟垂直方向產生滾動條)
元素的寬高計算
元素的高度=border-top + padding-top + height + padding-bottom + border-bottom
元素的寬度=border-left + padding-left + width + padding-right + border-right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
/*padding可以導致元素的寬高增加 margin就不會
瀏覽器默認自帶margin和padding值 用通配選擇器設置爲0*/
*{
margin: 0px ;
padding: 0px ;
}
.div1{
width: 100px;
height: 50px;
background: red;
margin-bottom: 100px;
border: 20px solid blue;
}
.div2{
width: 100px;
height: 50px;
background: aqua;
}
</style>
</head>
<body><p class="p1"><span style="white-space:pre"> </span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div1"</span>>我是div1</<span class="s1">div</span>></p><p class="p1"><span> </span><span> </span><<span class="s1">div </span><span class="s2">class</span><span class="s3">=</span><span class="s4">"div2"</span>>我是div2</<span class="s1">div</span>></p><p class="p2"><span> </span><span> </span><span> </span> </p><p class="p3"><span class="s1"><span> </span></</span>body<span class="s1">></span></p><p class="p3"><span class="s1"></</span>html<span class="s1">></span></p>
