css的两种盒模型
我先对两种盒模型做个介绍。
W3C的标准盒模型
在标准的盒子模型中,width指content部分的宽度
IE的盒模型
在IE盒子模型中,width表示content+padding+border这三个部分的宽度
我们可以看出我们上面的使用的默认正是W3C标准盒模型
而这里盒模型的选取更倾向于项目和开发者的习惯,并没有绝对的好坏之分。
box-sizing的使用
如果想要切换盒模型也很简单,这里需要借助css3的box-sizing
属性
box-sizing: content-box
是W3C盒子模型
box-sizing: border-box
是IE盒子模型
box-sizing的默认属性是content-box
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的。
div {
width: 100px;
height: 100px;
background: skyblue;
margin: 0 auto;
border: 1px solid gray;
/*
默认的设置 如果我们添加了 border属性 该容器的大小会发生改变
因为他要优先保证内部的内容所占区域 不变
*/
/*
box-sizing 如果不设置 默认的值 就是
content-box: 优先保证内容的大小 对盒子进行缩放;
border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
*/
box-sizing: border-box;
}