盒子模型分析

最新推荐文章于 2025-07-22 00:16:16 发布

最新推荐文章于 2025-07-22 00:16:16 发布 · 128 阅读

文章标签：

我们都知道IE浏览器的盒子模型跟以firefox为代表的标准盒子模型有差异，有差异就会影响我们的设计，首先来看一看他们的盒子到底是什么样的。

首先需要说明的是，如果想看每个浏览器的盒子模型的话，那么我们页面源代码上就不能出现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

否则，各浏览器将会按照W3C标准盒子模型来解析您的代码。

请看代码：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>盒子模型</title> <style type="text/css"> #container{position:static;width:360px;height:360px;background-color:#EEEFFF;} #a{width:300px;height:300px;background-color:#EEEEEE;border:10px solid #111111;padding:10px;margin:10px} #b{width:300px;height:300px;background-color:#999999;}</style> </head> <body> <div id="container"> <div id="a">我是实验的DIV</div> </div> <div id="b">我是参照的DIV</div> </body> </html>

预览效果前说明：

在IE环境下

width:300px,即该DIV的所有边框，内边距的宽度将被包含在width:300px中，除了margin的宽度在300PX以外。好像所有边框，内边距向内凹陷，内容区域缩小。

css宽度公式：width=borderLeft+paddingLeft+content+paddingRight+borderRight(该公式中的width为css语法中的宽度)

元素宽度公式：allwidth=marginLeft+width+marginRight(该公式为该元素整体的宽度)

公式证明：

IE7 盒子模型