css3属性box-sizing:border-box 用法解析

柔情只为你懂 2021-07-04 23:40 371阅读 0赞

响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。  
假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（`margins`）.假设所有的列都需要`4%`的外边距，我们需要为所有的外边距保留`20%`（`4%*5（5列）=20%`）的占宽比；然后我们从总宽比（`100%`）里面减去`20%`，得到的就是所有列实际占的总宽比。所以每一列的占宽比即`16%`（`80% /5`）。下面是一个详细的图表：  
![在这里插入图片描述][20200326231654404.png]

相应的CSS代码如下：

.column{  
       width:16%; 
       margin: 2% 2%;
       float: left;
       background: #03a8d2;  
    }

对应的界面是：  
![在这里插入图片描述][20200326231738319.png]  
当我们给每一列添加一个`2px`的边框时，问题出现了，如下图，最后一列被挤到下面去了。  
![在这里插入图片描述][20200326231805403.png]  
解决方案当然应该是：在之前的计算中我们应该考虑到边框（`border`），但是我们怎么去做呢？结论是，我们不能用百分比去设置`border`边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给`border`的空间也会是一个变化的值，也就是说当页面宽度变化时，`border`的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！

解决方案  
设置CSS的`box-sizing`属性值为“`border-box`”，这样就会把`borders`和`padding`全都包含在定义的宽高里面。这就意味着一个带有`2px`边框的`200px`的`div`仍然宽度是`200px`!!是不是很神奇呢？

.column{  
        width: 16%; 
        margin: 2% 2%; 
        float: left; 
        background:#03a8d2; 
        border: 2px solid black; 
        box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
    }

![在这里插入图片描述][20200326232027679.png]  
即使我们加上`padding`，也同样可以正常显示：  
![在这里插入图片描述][2020032623204816.png]  
浏览器兼容性问题：  
兼容性和上面的一样，除了IE需要8以上的版本，其他浏览器均可兼容，同时这个方法不会出现上面提到的阴影问题。

--------------------

## CSS中`box-sizing: border-box;`的作用 ##

`box-sizing` 属性可以被用来调整这些表现:

`content-box` 是默认值。如果你设置一个元素的宽为`100px`，那么这个元素的内容区会有`100px`宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

`border-box` 告诉浏览器去理解你设置的边框和内边距的值是包含在`width`内的。也就是说，如果你将一个元素的`width`设为`100px`,那么这`100px`会包含其它的`border`和`padding`，内容区的实际宽度会是`width`减去`border + padding`的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

`border-box` `width` 和 `height` 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 `Quirks`模式时`Internet Explorer`使用的盒模型。注意，填充和边框将在盒子内 , 例如, `.box {width: 350px; border: 10px solid black;}` 导致在浏览器中呈现的宽度为`350px`的盒子。内容框不能为负，并且被分配到`0`，使得不可能使用`border-box`使元素消失。  
这里的维度计算为： `width = border + padding + 内容的width`， `height = border + padding + 内容的 height`。

[20200326231654404.png]: /images/20210704/ca563746347a4cae81ba87dda839b187.png
[20200326231738319.png]: /images/20210704/9d38bea24b8440b08dd6a5a787e591e0.png
[20200326231805403.png]: /images/20210704/8124f8ae52284cd2ba9389657006aef8.png
[20200326232027679.png]: /images/20210704/95fe074f598c4a9d8427bdd361291e8f.png
[2020032623204816.png]: /images/20210704/31f3e6a2dc824286a62056535333b40f.png