當設定了父元素的寬度，子元素設定寬度為100%後再在加上子元素上新增padding或margin值就會溢位。舉個例子：

<!-- 示例 -->

<!-- html -->
<div class="parent">
    <div class="child"></div>
</div>

<!-- css -->
.parent {
    width: 500px;
    height: 50px;
    background-color: green;
    border: 1px solid #E74D4D;
}
.child {
    width: 100%;
    height: 30px;
    margin: 20px;
    background-color: pink;
}

 

示例

這是因為設定了width: 100%;後已經將父元素佔滿，再新增margin值就會溢位（預設溢位值為左側的margin值）

解決方法：

1. 父元素設定padding

<!-- 弊端是增加了parent佔用的寬度 -->
.parent {
      width: 500px;
      height: 50px;
      padding: 20px;
      background-color: green;
      border: 1px solid #E74D4D;
}
.child {
      width: 100%;
      height: 30px;
      background-color: pink;
}
 

1. [ 推薦 ]利用css3中的box-sizing: border-box; 屬性解釋連結
   設定他以後，相當於以怪異模式解析，border和padding全會在你設定的寬度內部。

.parent {
      width: 500px;
      height: 50px;
      padding:20px;
      background-color: green;
      border: 1px solid #E74D4D;
      box-sizing: border-box;
}
.child {
      width: 100%;
      height: 30px;
      background-color: pink;
}
 

1. 子元素外新增一個div

<div class="parent">
      <div class="child2">    <!-- 設定margin: 20px; -->
          <div class="child"></div>
      </div>
</div>

** end **

下面是彩蛋。。。

我在舉這個例子的時候發現了一個css hack（針對不同的瀏覽器/不同版本寫相應的CSS code的過程）：父元素與子元素之間的margin-top問題。
html程式碼

<div class="box1"> 
    <div class="box2"></div> 
</div>

css樣式

.box1{height:200px;width:200px;background:gray;} 
.box2{height:100px;width:100px;background:gold;margin-top:50px;} 

結果

示例

父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子元素和父元素的邊距則沒有發生變化。

解決方法：

1. 修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
2. 為父元素新增overflow：hidden；樣式即可（完美）
3. 為父元素或者子元素宣告浮動（float：left；可用）
4. 為父元素新增border（border:1px solid transparent可用）
5. 為父元素或者子元素宣告絕對定位

ps：

子元素設定margin-top後，父元素跟隨下移的問題

https://www.cnblogs.com/bluey/p/6417922.html

css中hack是什麼

https://www.cnblogs.com/Ren