CSS box-sizing属性到底改变的是什么？

前言

我们都知道box-sizing 属性可以限制元素的宽、高，使其‘内敛’。那么你知道box-sizing 属性都有哪些值吗？对应的值都代表着那些含义吗？下面我就带大家来了解一下。

盒模型

想要理解box-sizing 属性，首先我们得先了解一下盒模型的结构。

一个盒模型是由四个‘内在盒子’构成的。

它们由内到外依次是content box、padding box、border box 和 margin box。

结构图如下图所示：

看到这我想大家也就明白一大半了，没错:

这些盒子分别对应 content、padding、border 和 margin 属性。

box-sizing属性

box-sizing属性实际上改变的就是width（height）属性作用在哪个盒子上。

例如：某个元素设为box-sizing: border-box;就代表着width属性作用在border box盒子上。

padding box盒子和border box 盒子包含在border box盒子中，所以我们再添加padding和border的时候宽度也不会增加，表现为‘内敛’。

未设置box-sizing属性时，其默认值是box-sizing: content-box;

也就是说，在默认情况下，width 是作用在 content box 上的，所以我们再设置padding和border的时候，宽度会增加。

box-sizing属性的值

box-sizing属性的值理论上可以有以下这些写法：

    .box1 { 
        box-sizing: content-box; 
    } 
    .box2 { 
        box-sizing: padding-box; 
    } 
    .box3 { 
        box-sizing: border-box; 
    } 
    .box4 { 
        box-sizing: margin-box; 
    } 
1
2
3
4
5
6
7
8
9
10
11
12

而实际上，支持情况确实这样的：

     /* 默认值 */ 
    .box1 { 
        box-sizing: content-box; 
    }
    /* Firefox 曾经支持 */ 
    .box2 { 
        box-sizing: padding-box; 
    } 
    /* 全线支持 */
    .box3 { 
        box-sizing: border-box; 
    }  
    /* 从未支持过 */
    .box4 { 
        box-sizing: margin-box; 
    } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

box-sizing: padding-box;和box-sizing: margin-box;因为使用场景有限，所以并不支持使用.

其中box-sizing: padding-box;仅 Firefox 浏览器曾经支持，从版本 50 开始也不支持了。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！