CSS盒子模型

頁面元素皆為框（盒子）,定義了元素框處理元素内容，内邊距，外邊距以及邊框的計算方式。

圍繞在元素邊框外的空白距離（元素與元素之間的距離）

文法：margin，定義4個方向的外邊距

（1）取值：以px為機關， %占父級元素寬度的%比

正數：margin-left 元素向右移動，margin-top元素向下移動

負數：就是相反方向

取值 auto：自動計算塊級元素的外邊距，對于上下外邊距無效,塊級元素水準居中

margin：value ；定義4個方向的值

margin：v1 v2； v1設定上下，v2設定左右

margin：0 auto：設定塊級元素水準居中

margin：v1 v2 v3；v1設定上，v2設定左右，v3設定下

margin：v1 v2 v3 v4；上右下左

h1~h6、p、body、ol、ul、dl、pre

一般在開發的時候需要重置具有外邊距的元素

方案一：*{margin:0;padding:0} 方案二：參考淘寶

當兩個垂直外邊距相遇時，他們将合并成一個，最終的距離取決于兩個邊距中較大的

行内元素垂直外邊距無效（img）除外

同一行中，一個行内塊設定了垂直邊距，同行其他行内會跟着變化

 在特殊條件下，為子元素設定上外邊距，會作用到父元素

 特殊條件：

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：content-box；預設值，盒子模型計算，div設定的width，height為content的大小

box-sizing：boder-box；div設定的width，height為border外邊距的大小