所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距margin,边框border,填充padding,和实际内容content。
下面的图片说明了盒子模型(Box Model):
css盒子模型有两种,一种是W3C盒模型也就是标准模型,另一种是IE盒模型,如下图表示:
标准模型:
IE盒模型:
由图可知:
**W3C标准模型:width = content(内容)**默认浏览器会使用标准模型。
元素总宽度 = width + 2 * padding (内边距)+ 2 * border(边框)+ 2 * margin(边距)
IE模型: width = content(内容) + 2 * padding (内边距)+ 2 * border(边框)
元素总宽度 = width + 2 * margin(边距)
css两种盒子模型的设置方法如下:
/*标准模型*/
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;