移动WEB开发布局中的-box-sizing:border-box

要想清楚这个属性的作用，首先要理解盒子模型

盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）

可以把每一个容器，比如div，都看做是一个盒子模型

比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;

这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）

相当于一个元素的实际宽高是由：　padding + border + content 组成

1、没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高

2、加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里

盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

标准盒子模型，一般浏览器也都默认为标准盒子模型。即：box-sizing:content-box

怪异盒子模型，一般根据实际项目需要自行设置。即：box-sizing:border-box

响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。

解决方案当然应该是：在之前的计算中我们应该考虑到边框（border），但是我们怎么去做呢？结论是，我们不能用百分比去设置border边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给border的空间也会是一个变化的值，也就是说当页面宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！

解决方案

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

盒子回顾基础

        （1）框属性的基本规范：

            文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下：

即width=content

            ①width和height设置内容框（content box）的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容，以及表示镶嵌子元素的其他框；

            ②padding表示一个CSS框内边距--这一层位于内容框的外边缘与边界的内边缘之间；

            ③border即CSS框的边界是一个分割层，位于内边距的外边缘以及外边距的内边缘之间；

            ④margin即外边距代表CSS框周围的外部区域。

（2）运用box-sizing:border-box属性下，框模型的变化

 即width=content+padding+border(此时，当div的宽度为50%时，而border和padding为px时，那么content会随着实际的宽度进行自动缩放；)