目錄

• 1.盒子模型的初步瞭解
• 2.盒子模型型別：標準盒子模型和IE盒子模型
  • 盒子模型的計算公式
• 3.標準模式下的盒模型
• 4.怪異模式下的盒模型
• 5.padding詳解
• 6.border詳解
  • 利用border屬性製作三角形
• 7.margin詳解
• 8.margin特性之塌陷問題
• 9.margin特性之合併問題

1.盒子模型的初步瞭解

盒尺寸中的4個盒子 content-box、padding-box、border-box和margin-box分別對應CSS世界中的centent、padding、border、margin屬性，這四個屬性稱為”盒尺寸四大家族”

2.盒子模型型別：標準盒子模型和IE盒子模型

盒模型有兩種，分別是ie盒子模型（IE6以下版本瀏覽器)和標準w3c盒子模型 ，能影響元素的實際大小的只有padding和border值，margin不影響實際大小。

盒子模型的計算公式

標準盒模型計算公式

• 元素的實際寬度 = width + padding-left / right + border -left/right
• 元素的實際高度 = height + padding -top/bottom + border-top/bottom

IE盒模型計算公式

• 元素的實際寬度 = width
• 元素的實際高度 = height

3.標準模式下的盒模型

• 元素的實際寬度 = width + padding-left / right + border -left/right
• 元素的實際高度 = height + padding -top/bottom + border-top/bottom

4.怪異模式下的盒模型

• box-sizing:content-box： 此屬性表現為標準模式下的盒模型

  padding和border不被包含在定義的width和height之內。物件的實際寬度等於設定的width值和border、padding之和，即 ( Element width = width + border + padding )

• box-sizing:border-box：此屬性表現為怪異模式下的盒模型

  padding和border被包含在定義的width和height之內。物件的實際寬度就等於設定的width值，即使定義有border和padding也不會改變物件的實際寬度，即 ( Element width = width )

5.padding詳解

檢索或設定物件四邊的內部邊距

• 如果提供全部四個引數值，將按上、右、下、左的順序作用於四邊（順時針方向）
• 如果只提供一個，將用於全部的四邊
• 如果提供兩個，第一個用於上、下，第二個用於左、右
• 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下
• padding-top:設定物件頂邊的內補白
• padding-bottom: 設定物件底邊的內補白
• padding-left: 設定物件左邊的內補白
• padding-right: 設定物件右邊的內補白

6.border詳解

• border-width: 邊框線的寬度
  • medium： 定義預設厚度的邊框。計算值為3px
  • thin： 定義比預設厚度細的邊框。計算值為1px
  • thick： 定義比預設厚度粗的邊框。計算值為4px
• border-style： 邊框線的樣式
  • none： 無輪廓
  • hidden： 隱藏邊框。IE7及以下尚不支援
  • dotted： 點狀輪廓。IE6下顯示為dashed效果
  • dashed： 虛線輪廓
  • solid： 實線輪廓
• border-color： 邊框線的顏色

利用border屬性製作三角形

實現思路：利用border的三個屬性(寬度，型別，顏色)，繪製出一個正方形，而且這個正方形就是由四個三角形組合而成，然後再保留一個方向的三角形，讓其他方向的顏色透明即可；

.triangle{
     width: 0;
     border-width:200px;
     border-style: solid;
     border-color:darkgoldenrod transparent  transparent  transparent;
}

<div class="triangle"></div>

7.margin詳解

檢索或設定物件四邊的外延邊距

• 如果提供全部四個引數值，將按上、右、下、左的順序- - 作用於四邊（順時針方向）
• 如果只提供一個，將用於全部的四邊
• 如果提供兩個，第一個用於上、下，第二個用於左、右
• 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下
• margin-top: 頂邊的外延邊距
• margin-bottom: 底邊的外延邊距
• margin-left: 左邊的外延邊距
• margin-right: 右邊的外延邊距

小知識：margin: 0 auto; 上下為0 左右為auto 可以實現塊級元素水平居中

8.margin特性之塌陷問題

• 出現場景: 一個父元素裡面巢狀一個子元素，給子元素加margin-top值，想讓子元素和父元素有間距分離的效果，但是不但沒有我們想要的分離的效果，反而傳遞給父元素，出現的情況是整體往下移了；
• 解決辦法:
  1.給父元素新增屬性 overflow： hidden
  2.避開給子元素新增margin-top值，改為給父元素新增屬性padding-top，但是要在父元素的高度上把這個padding-top的值減掉

// 解決方法一：給父元素加overflow：hidden
<style type="text/css">
.black{
    width: 400px;
    height: 400px;
    background: #000;
    overflow: hidden;
}
.red{
    width: 200px;
    height: 200px;
    margin-top:50px;
    background: red;
}
</style>
<div class="black">
    <div class="red"></div>
</div>

// 解決方法二： 給父元素加padding-top
<style type="text/css">
.black{
    width: 400px;
    height: 350px;
    padding-top:50px;
    background: #000;
}
.red{
    width: 200px;
    height: 200px;
    background: red;
}
</style>
<div class="black">
    <div class="red"></div>
</div>

9.margin特性之合併問題

• 出現場景：上下垂直排列的結構，上邊的元素設定margin-bottom；下邊的元素設定margin-top值，這樣會出現margin值的重疊，而且誰的值大，兩者中間的間距就是誰的值；
• 計算規則：正正取大值，正負值相加，負負最負值；
• 解決方法：給設定了margin-top的元素的外邊再巢狀一個div，並且給這個巢狀的div 新增一個屬性 overflow：hidden

<style type="text/css">
.black{
     width: 400px;
     height: 400px;
     background: #000;
     margin-bottom: 40px;
 }
 .red{
     margin-top: 60px;
     width: 200px;
     height: 200px;
     background: red;
 }
 .wrap{
     overflow: hidden;
 }
</style>
<div class="black"></div>
<div class="wrap">
    <div class="red"></div>
</div>