1. 程式人生 > >多方法解決設定width:100%再設定margin或padding溢位的問題

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

當設定了父元素的寬度,子元素設定寬度為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; 屬性解釋連結
    設定他以後,相當於以怪異模式解析,borderpadding全會在你設定的寬度內部。
.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