关于CSS3 的 box-sizing属性

前言

在实际开发中经常盒模型的大小推算失误导致的页面错乱问题,有了box-sizing属性之后,你就不用再担心啦。因此就以案例来说明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变化了 -.-