CSS复习之标准盒模型与怪异盒模型
盒模型一般包含 content(内容)、padding(内边距)、border(边框)、margin(外边距)。
标准盒模型指的是W3C标准下的盒模型,而怪异盒模型指的是IE下的盒模型,也可以通过设置 box-sizing 属性来改变盒模型,border-box 为怪异盒模型,border-content 为标准盒模型。
差异如下:
标准盒模型下设置的高宽就是 content 高宽,也就是说设置 padding border margin 都会把盒子往外撑大。
.box{
width: 200px;
height: 200px;
background: orange;
margin: 10px;
padding: 10px;
border: 1px solid blueviolet;
}
而怪异盒模型下设置的高宽是 content + padding + border 的高宽,只有 margin 会把盒子往外撑大,而修改 padding 和 border 会压缩内容。
将上面的盒子转换为怪异盒模型:
.box{
width: 200px;
height: 200px;
background: orange;
margin: 10px;
padding: 10px;
border: 1px solid blueviolet;
box-sizing: border-box; /* 转换为怪异盒模型 */
}