什么是盒模型
CSS盒模型是CSS技术所使用的一种思维模型,在HTML页面中的所有元素都可以看成是一个盒子。它包括 实际内容、内边距、外边距和边框 四个部分。
盒模型包含的属性
盒模型中主要的属性就5个:width、height、padding、border、margin。
盒模型的类型
1.标准盒模型
元素总宽度 = content + margin + padding + border
即:内容的width + margin(左右) + padding(左右) + border(左右)
2.IE盒子模型(怪异盒模型)
元素总宽度 = content + margin
即内容的width + margin(左右)(这里的width包含了padding(左右)和border(左右)的值)
控制盒模型的模式
在不设置的情况下,默认为 标准盒模型。
标准盒模型:box-sizing: content-box;
IE模型:box-sizing: border-box;