盒子模型分析

最新推荐文章于 2020-12-29 00:15:32 发布

shishaomeng

最新推荐文章于 2020-12-29 00:15:32 发布

阅读量1.5k

点赞数 1

分类专栏： CSS 文章标签：浏览器 xhtml css div html firefox

本文链接：https://blog.csdn.net/shishaomeng/article/details/4662572

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们都知道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 盒子模型

总结之后得出下图：

IE盒子模型

在FF等标准浏览器环境下

width:300px,只是内容部分的宽度，并不包括内边距，边框，好像从内容区域向外扩展内边距，边框，外边距。

css宽度公式：width=content(该公式中的width为css语法中的宽度)

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

公式证明：

FF盒子模型

在标准环境下

首先在我们的源代码的首行加上如下这行

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

所有公式均按照在火狐浏览器下的计算

效果如下图：

总结：标准的盒子模型如下图所示

BIAOZHUN

shishaomeng

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型分析

我们都知道IE浏览器的盒子模型跟以firefox为代表的标准盒子模型有差异，有差异就会影响我们的设计，首先来看一看他们的盒子到底是什么样的。首先需要说明的是，如果想看每个浏览器的盒子模型的话，那么我们页面源代码上就不能出现否则，各浏览器将会按照W3C标准盒子模型来解析您的代码。请看代码：
复制链接

扫一扫