CSS3之border-sizing属性功能get！

今天在进行文本框样式编写的过程中遇到一个问题：当我将input元素的宽度定义为 width:100%; 之后，如果再增加 padding 或者 border 则文本框会溢出父容器，是向外扩张的。

解决方法：

加入box-sizing:border-box;即可实现想要的效果。

box-sizing属性原理：

一般默认的盒子模型是box-sizing:content-box;

• content-box
  这是box-sizing的默认属性值，即在CSS中定义的宽度和高度就对应到元素的内容框，元素的内边距和边框都是在CSS中定义的宽度和高度之外绘制的。这也就是为什么一开始我设置元素宽高之后再加入内边距和边框元素就会溢出父容器。

• border-box
  该属性值在CSS中为元素设定的宽度和高度就决定了元素的边框盒，即元素是在已经设定好的宽度和高度之内进行内边距和边框的绘制，CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度。

总结

• box-sizing设为content-box时，元素css对应的宽高只包含元素的内容不包含padding和border；box-sizing设为border-box时，元素css对应的宽高包含元素的内容、padding和border三部分。