盒子模型總結

時間 2019-11-09

標籤盒子模型總結欄目 CSS 简体版

原文原文鏈接

1、盒子模型的概念

什麼是盒子模型，盒子模型其實就是CSS網頁佈局中的一種佈局方式，宛如一個盒子，其中包括內容（Content）、內邊距（Padding）、邊框（Border）、外邊距（Margin），以下圖： html

2、盒子模型的六種屬性

Margin:外邊距，盒子外邊距與邊框之間的距離，分上右下左；
Border:盒子的邊框大小，分上下左右；
Padding:內邊距（補白），盒子的邊框與內容之間的距離，分上下左右；
Width:盒子內容的寬度；
Height:盒子內容的高度；
Background:盒子的背景，默認填充內容、Padding與Border
複製代碼

盒子的寬度=Margin-left+Border-left+Padding-left+Width+Padding-right+Border-right+Margin-right瀏覽器

盒子的高度=Margin-top+Border-top+Padding-top+Height+Padding-bottom+Border-bottom+Margin-bottombash

3、盒子模型須要注意的幾點

對於塊級標籤，六大屬性均適用，而對於行內標籤來講，height與width並不適用，且Margin與Padding只能在水平方向上有效，垂直方向無效
塊級標籤具備貪婪性，若是未設置寬度，則會佔據整個頁面；行內標籤則具備懶惰性，寬度取決於內容大小
因爲瀏覽器會自行設置元素的Margin與Padding值，因此通常咱們會自行設置一個Reset.less，來覆蓋瀏覽器默認值

<!--Reset.less-->
*{
    margin:0;
    padding:0
}
複製代碼

4、 CSS邊距重疊（塌陷）

知足前提：塊級標籤與垂直方向less

父子元素之間的重疊：父元素的margin-top與第一個子元素的margin-top重疊或父元素的margin-bottom與最後一個子元素的margin-bottom重疊（取大優先）佈局

解決方法：1.父元素設置border-top或border-bottom,不想用則可以使邊框透明
          2.父元素設置padding-top或padding-bottom
          3.將父元素設置成行內塊標籤
複製代碼

兄弟元素之間的重疊：上盒子的margin-bottom與下盒子的margin-top之間的重疊（取大優先）ui

解決方法：1.將一方設置成行內塊標籤
          2.將下盒子設置浮動（浮動不會塌陷)
複製代碼

5、簡單實現小三角案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding:0}
    div{
        width: 0;
        border: 20px solid transparent;
        border-top:20px solid black; 
    }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>
複製代碼

效果以下：spa