多方法解決設置width:100%再設置margin或padding溢出的問題

2019獨角獸企業重金招聘Python工程師標准>>>

當設置了父元素的寬度，子元素設置寬度為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/Renyi-Fan/p/9006084.html

轉載於:https://my.oschina.net/jack088/blog/3042690