CSS中Box model是分为两种: W3C标准（标准盒模型） 和 IE标准盒子模型（怪异盒模型）。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。
重要的一个属性是box-sizing:content-box（标准盒模型） || border-box （怪异盒模型）|| inherit（默认是content-box）
标准盒模型
在标准模式下的盒模型，盒子总宽度/高度=width/height+padding+border+margin
怪异模式
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
也即是说 width = 内容区宽度 + padding + border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML>
无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可，若不声明会呈现怪异模式。
网友评论