css box边框挤在下面去了,css3 box-sizing: border-box属性解决日常开发遇到的小问题...

input和select宽度不一致

在项目中我们写页面的时候，经常会遇到表单与表单之间的宽度不一致问题，比如下面的input和select，总是input比select长那么一点点，为什么呢？

还有就是input与自定义div下拉框宽度不一致问题

遇到这种情况，大家肯定会想到去调整他们之间的宽度width，然而并没有什么卵用

原因就出在了：input、select默认的样式是不同的，你无法通过直接改变width值去覆盖掉原来的默认样式，所以需要我们用到css3添加一个属性：box-sizing:border-box;

input,select{

box-sizing: border-box;

}

这个时候input和select宽度就一致：

如果是input搭配div就可以直接对div添加属性box-sizing:border-box;效果也是一样：

box-sizing 属性介绍

box-sizing 属性包含两个值content-box，border-box

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

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

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

这里的维度计算为： width = border + padding + 内容的  width， height = border + padding + 内容的 height。

content-box与 border-box区别

1.content-box：padding和border不被包含在定义的width和height之内。

对象的实际宽度=设置的width+padding+border

2. border-box：padding和border被包含在定义的width和height之内。

对象的实际宽度=设置的width(padding和border不会影响实际宽度)