頁面元素皆為框（盒子）,定義了元素框處理元素內容，內邊距，外邊距以及邊框的計算方式。
圍繞在元素邊框外的空白距離（元素與元素之間的距離）
語法：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
一般在開發的時候需要重置具有外邊距的元素
（1）外邊距合併
當兩個垂直外邊距相遇時，他們將合併成乙個，最終的距離取決於兩個邊距中較大的
(2)行內元素對外邊距的表現
行內元素垂直外邊距無效（img）除外
（3）行內塊對外邊距的表現
同一行中，乙個行內塊設定了垂直邊距，同行其他行內會跟著變化
(4)外邊距溢位
在特殊條件下，為子元素設定上外邊距，會作用到父元素
特殊條件：
1.父元素上邊框解決方法：2.為第乙個子元素設定上外邊框，任何乙個 都會造成外邊框溢位
為父元素新增邊框，弊端：影響了父元素的實際高度為父元素新增內邊距，弊端 了父元素的實際高度
在父元素的 第乙個子元素位置，新增乙個空的table
不會影響其他元素，但是會影響自己的占地尺寸，視覺上感覺大小發生變化
語法：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的大小
web前端入門到實戰 CSS多級選單
這是乙個相當炫的功能，讓網頁看起來像桌面程式，如window的開始選單。實現原理基本和純css相簿差不多，但要注意的事項比較多，讓我們一步步來吧。先來乙個非常簡單的一級選單與懸停效果。結構很熟悉吧，就是把原來放的地方換成文字而已。我還特意標出來了。接著下來的表現層 非常簡單。menu menu li...
web前端入門到實戰 css實現的骨架屏方案
通過偽元素實現骨架樣式，通過操作樣式實現骨架和頁面的動態切換 通過after偽元素生成骨架樣式，並通過absolute覆蓋到實際元素上 skt loading 下面這部分都是自定義的，看需求修改 not not round after not not before before badge keyf...
web前端入門到實戰 CSS三欄布局的5種方法詳解
題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應.這是一道經典的面試題，下面記錄了css布局的5種方法。1.這是三欄布局的浮動解決方案 2.這是三欄布局的浮動解決方案 3.這是三欄布局的浮動解決方案 4.這是三欄布局的浮動解決方案 5.這是三欄布局的浮動解決方案 6....