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

2. [推荐]利用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;
}

3. 子元素外添加一个div

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