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

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

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

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

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

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

.child{
	width: calc(100% - 30px) ;
	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;
}