关于CSS3 box-sizing属性的详细案例讲解

关于 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之后 宽度和高度为 394px
  
  总结:
  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 值之后，对元素设置内边距和边框不会影响元素的宽高。也就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

此时元素的宽度 = 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变化了 -.-