标准盒模型:
- 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
- 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
怪异盒模型:
- 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度
- 设置的高度 height = 上下 border + 上下 padding + 内容的高度
- 注意:可能会导致内容溢出,需要时再使用
.d4{
width: 100px;
height: 100px;
background-color: orange;
/* 怪异模式 */
box-sizing: border-box;
padding: 10px;
border: 10px solid #000;
}