就因欠一分錢，阿里雲把我資料全刪了...
一、什麼叫框模型
頁面元素皆為框（盒子）,定義了元素框處理元素內容，內邊距，外邊距以及邊框的計算方式。
二、外邊距
圍繞在元素邊框外的空白距離（元素與元素之間的距離）
語法：margin，定義4個方向的外邊距
1、單邊定義：margin-top/right/bottom/left
（1）取值：以px為單位， %佔父級元素寬度的%比
正數：margin-left 元素向右移動，margin-top元素向下移動
負數：就是相反方向
取值 auto：自動計算塊級元素的外邊距，對於上下外邊距無效,塊級元素水平居中
2、簡寫方式
margin：value ；定義4個方向的值
margin：v1 v2； v1設定上下，v2設定左右
margin：0 auto：設定塊級元素水平居中
margin：v1 v2 v3；v1設定上，v2設定左右，v3設定下
margin：v1 v2 v3 v4；上右下左
3、自帶外邊距的元素
h1~h6、p、body、ol、ul、dl、pre
一般在開發的時候需要重置具有外邊距的元素
方案一：*{margin:0;padding:0}
方案二：參考淘寶
4、外邊距的特殊效果
（1）外邊距合併
當兩個垂直外邊距相遇時，他們將合併成一個，最終的距離取決於兩個邊距中較大的
(2)行內元素對外邊距的表現
行內元素垂直外邊距無效（img）除外
（3）行內塊對外邊距的表現
同一行中，一個行內塊設定了垂直邊距，同行其他行內會跟著變化
(4)外邊距溢位
在特殊條件下，為子元素設定上外邊距，會作用到父元素
特殊條件：
1.父元素上邊框
2.為第一個子元素設定上外邊框，任何一個 都會造成外邊框溢位
解決方法：
為父元素新增邊框，弊端：影響了父元素的實際高度
為父元素新增內邊距，弊端 了父元素的實際高度
在父元素的 第一個子元素位置，新增一個空的table
佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜尋大全https://55wd.com
三、內邊距
不會影響其他元素，但是會影響自己的佔地尺寸，視覺上感覺大小發生變化
語法：
padding：value ；設定4個方向的內邊距
padding：v1 v2；v1設定上下，v2設定左右
padding：v1 v2 v3；v1設定上，v2設定左右，v3設定下
padding：v1 v2 v3 v4；設定上右下左
單方向設定：padding-top/right/bottom/left
box-sizing屬性，設定框模型的計算方式
box-sizing：content-box；預設值，盒子模型計算，div設定的width，height為content的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>box-sizing：boder-box；div設定的width，height為border外邊距的大小
<style>
#d1{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>