解决div宽度设置width:100%后再设置padding或margin超出父元素的办法

前言：

有时候我们需要子div和父div一样宽（高），但是需要设置一定边距时，如果子元素使用width:100%在设置padding或margin的话，就会出现溢出问题。

HTML 

<div class="parent">
    <div class="child"></div>
</div>

CSS

使用width:100%加margin

.parent {
   width: 500px;
   height: 200px;
   background-color: rgba(243, 200, 6, 0.932);
   border: 10px solid #0cd6fa;
}
.child {
   width: 100%;
   height: 200px;
   margin: 20px;
   background-color: pink;
}

效果：

现在父div的大小是520*220，因为需要加上border。子div大小是500*200，但是很显然不是我们想要的效果，发生了溢出。

CSS

使用width:100%加padding

.parent {
    margin: 100px auto;
    width: 500px;
    height: 200px;
    background-color: rgba(243, 200, 6, 0.932);
    border: 10px solid #0cd6fa;
}
.child {
    width: 100%;
    height: 200px;
    padding: 20px;
    background-color: pink;
}

 效果：

现在父div的大小是520*220，因为需要加上border。子div大小是540*240，因为加上了padding，但是很显然不是我们想要的效果，同样发生了溢出。

 

解决办法： 

法一：给父div设置padding

但是这样设置的话弊端就是padding也会加在父div的宽高中

 .parent {
      width: 500px;
      height: 200px;
      padding: 20px;
      background-color: rgba(243, 200, 6, 0.932);
      border: 10px solid #0cd6fa;
    }

法二：利用css3中的box-sizing
box-sizing：content-box | border-box | inherit;

（1）content-box 

宽度和高度分别应用到元素的内容框，即在宽度和高度之外绘制元素的内边距和边框，最终元素的宽高要加上padding和margin。改变原宽高。

（2）border-box 

为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。不改变原宽高。

（3）inherit 

规定应从父元素继承 box-sizing 属性的值。

在这里我们使用的是content-box，代码如下：

.parent {
      width: 500px;
      height: 200px;
      padding: 20px;
      background-color: rgba(243, 200, 6, 0.932);
      border: 10px solid #0cd6fa;
      box-sizing: content-box;
    }
.child {
      width: 100%;
      height: 200px;
      background-color: pink;
    }

总结：

在给元素设置padding、border时，是会默认加在元素的宽高上的，可以使用box-sizing的content-box属性更改设置，使padding、border不会改变元素设置的大小，而是缩小内容的width。