多方法解决设置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