今天在用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,至于那种更好用
见仁见智了。