width100%,设置padding或border溢出解决方法

问题场景:

.box {
  width: 100px;
  height: 100px;
  background: red;
}
.bd {
  width: 100%;
  padding: 10px;
  background: black;

}
<div class="box">
    <div class="bd"></div>
</div>

如上结构,子元素将会溢出

解决方法:

父元素设置padding
例:
  <div class="box" style="padding-right: 20px;">
    <div class="bd"></div>
 </div>
使用CSS3:
加入box-sizing:border-box;属性即可解决