标准盒模型与怪异盒模型
1、盒子模型(box model)
在HTML中,可以把元素看做盒子,盒子包括:实际内容(content)、内边距(padding)、
边框(border)、外边距(margin),图片如下:
2、标准盒模型与怪异盒模型的区别
-
标准盒模型(W3C盒子模型),设置的width或height是对 实际内容(content)的width或height进行设置,内容周围的border和padding另外设置,即盒子模型的width(height)=设置的content的宽高+padding+border+margin
注:除内容content外,其他为上下左右都有 -
怪异盒模型(IE盒子模型),设置的width或height是对 实际内容(content)+内边距(padding)+边框(border)之和的width和height进行设置的,其盒模型的width(height)=设置的width(height)+外边距margin
**例子:**如下图所示
1、解决两者的兼容问题
可尝试对父元素使用内边距,对子元素使用外边距
2、盒模型的box-sizing属性:
2、盒模型的box-sizing属性:
CSS3新增了一个属性box-sizing: content-box / border-box / inherit,默认值为content-box。如果值为content-box,那元素遵循的是W3C盒模型;如果值为border-box,那元素遵循的是IE盒模型;如果值为inherit,该属性的值应该从父元素继承。