CSS盒模型之 CSS3 box-sizing属性

今天在用bootstrap做下拉菜单的时候发现个诡异问题，用bootstrap3设置宽度跟用bootstrap2不一样，用boostrap3的时候宽度要加上padding的值

觉得很诡异，于是换了个浏览器火狐打开firebug调试了一下，发现了两个的盒模型基准不一样，于是上网查了一下，学习了一下css的box-sizing属性，顺便又温习了一下css的盒模型。

box-sizing有两个值一个是content-box，另一个是border-box。默认使用的是content-box

border-box与content-box有什么不同？

.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}

当box-sizing的值为content-box时，盒模型如下图所示



盒子总宽度/高度=width/height+padding+border+margin

当box-sizing的值为border-box时，盒模型如下图所示



盒子总宽度/高度=width/height+margin

也就是说当box-sizing的值为border-box时，width,height包含了content,padding和border,至于那种更好用

见仁见智了。