padding和border宽度导致子元素超过父元素的解决方法

在 CSS 盒子模型的默认定义里，对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。

如对child container赋予如下的css，最终的样式将会变成这样。

.child{
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}

为了让子元素被完全包在父元素中，可以这样修改代码。

但如果每一层都要这样，岂不是过于麻烦。为了简单方便解决这个问题，就要用到css中一个叫‘box-sizing’的属性，‘box-sizing’有content-box和border-box两个值，一般的盒子模型默认是content-box，所以我们只要将子组件的box-sizing改为宽度包含border和padding的border-box就可以了。

.child{
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}

👋 感谢您的观看！