box-sizing属性(CSS设置)
box-sizing属性(CSS设置)
浏览器广泛支撑HTML5和CSS3，许多CSS3新特点在前端布局中有很大的运用价值。
box-sizing是前端经典的“盒子模型”，包含外边距（margin）、边框（border）、内边距（padding）、内容（content）四个特点，这些加起来便是一个完整的元素。
但盒子模型又分为规范w3c盒模型和IE盒模型。
那这有什么区别呢？
从上图能够看到规范w3c盒子模型的范围包含margin、border、padding、content，其内容content宽度不包含padding、margin、border等部分，也便是说这个盒模型实践占用页面的宽高是内容宽高加上其他部分的宽高，即：
总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
而在IE盒子模型中，内容content的宽度包含了border和pading，这个盒模型实践占用页面的宽高是内容宽高加上外边距的宽高，即：
总宽度=margin-left+width+margin-right
在现在盛行前端布局中，前端工程师默许的页面布局是采用规范的w3c盒子模型（需要在页面html声明处加上doctype声明），告知浏览器按照规范盒模型的方式进行烘托页面。
这个时分会出现一个问题，便是元素的宽高包含了实践内容的宽高加上内外边距以及边框的宽高，如果咱们想调一下内边距padding或许边框border的尺度，那么整个元素的实践尺度就会产生变化，跟着而来的便是布局乱掉，可谓是牵一发而动全身。
但css3改变了这一现状，在CSS3中引入了box-sizing特点,它能够允许改变默许的CSS盒模型对元素宽高的核算方式。
box-sizing简介
box-sizing特点包含content-box（default），border-box。
1、content-box，border和padding不核算入width之内
2、border-box，border和padding核算入width之内（竟然是IE盒子模型规范）
留意：ie8+浏览器支撑content-box和border-box;
所以各位看官理解了吧，如果咱们运用了box-sizing：border特点后，你页面一切元素的宽高就会跟着你设置的width、height而固定，无论你再怎么折腾padding、border，整个元素的尺度是不会有任何变化的，只是实践内容content的尺度会跟着被紧缩拉伸。这样的全体布局就稳定了许多，不再见因为某一个元素的边框微调而产生坍塌。
虽然IE在我们的眼里是一个奇葩的存在，而ie盒模型规范也跟w3c盒模型规范有出入，但笔者个人认为在盒模型上，ie盒模型更加合理化。因为常规的布局思维是定好全体的宽高之后，里面元素的全体尺度会确认下来，后边才是考虑这个元素的内边距以及边框，如果已经确认好了大体的布局，再去微调边框而导致了全体布局的坍塌，这显然是不科学的，所以这也是极力推重前端布局运用box-sizing：border;的原因。
但是一个严酷的显示便是IE8以下的浏览器对css3是不支撑的，所以box-sizing：border;特点在ie8以下的浏览器中是无效的，这可能是影响此css元素盛行的严重原因，不知道什么时分业内才能同仇敌慨，一起抵制IE8以下浏览器，还咱们前端人员一片净土。
如果你的项目不需要考虑ie6/ie7的用户，那么请大胆的运用box-sizing：border;相信它会让你的前端布局灵敏许多，记住在cssreset（款式重置）的时分就加上它，一劳永逸....
作品标签： CSS
优秀作品：
最新作品：
