关于 CSS3的box-sizing 属性还可以参考W3school
box-sizing属性的语法
和其他css属性一样，该属性有三个可取的值，具体语法：
box-sizing: content-box|border-box|inherit;
以下案例都是基于固定宽高的容器为例。
content-box（默认）
box-sizing 属性的默认值就是 content-box。
实例：
<ul class="box">
<li class="box-item content-box"></li>
<li class="box-item border-box"></li>
<li class="box-item inherit"></li>
</ul>
.box {
background: #737373;
height: 500px;
padding: 20px;
display: flex;
}
.box-item {
background: white;
list-style: none;
width: 350px; /*注意！ 固定宽高*/
height: 350px;
margin: 40px auto;
}
.content-box {
box-sizing: content-box;
/*注意！ padding: 20px; */
/* border: 2px solid red; */
background: burlywood;
}
以上运行结果为：
- 设置
padding和border之前 宽度和高度为350px
padding 和 border之前
设置padding和border之后 宽度和高度为394px
padding 和 border之后
总结:
box-sizing值为content-box时候，元素的padding和border属性的值会在元素的宽度和高度属性基础上绘制元素的内边距和边框
此时元素的宽度 = width + padding + border （高度同理）
border-box (重点)
Element-UI 组件库就大量的使用了 border-box 值。
继以上案例。针对第二的li，调整其样式为:
.border-box {
box-sizing: border-box;
border: 2px solid red;
padding: 20px;
background: darkorange;
}
border-box ：padding 和 border之后
总结：
设置为
border-box 值之后，对元素设置内边距和边框不会影响元素的宽高。也就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
此时元素的宽度 = width （高度同理）
inherit
从父元素继承 box-sizing 属性的值，若未设置，默认为 content-box，在此就不赘述了。
完整代码
<template>
<ul class="box">
<li class="box-item content-box"></li>
<li class="box-item border-box"></li>
<li class="box-item inherit"></li>
</ul>
</template>
<style scoped>
.box {
background: #737373;
height: 500px;
padding: 20px;
display: flex;
}
.box-item {
background: white;
list-style: none;
width: 350px;
height: 350px;
margin: 40px auto;
}
.content-box {
box-sizing: content-box;
padding: 20px;
border: 2px solid red;
background: burlywood;
}
.border-box {
box-sizing: border-box;
padding: 20px;
border: 2px solid red;
background: darkorange;
}
.inherit {
box-sizing: inherit;
}
</style>
以上就是 box-sizing属性的取值以及属性值之间的区别。
对于固定宽高的元素设置 box-sizing： border-box之后，再也不用担心元素的宽高随padding变化了。
