利用CSS来布局页面布局DIV有点逻辑性!
重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!
最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的!

盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，

先来看看我们熟悉的标准盒子模型：

　　从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。　

　

　　从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

　　例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

　　那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jQuery 做的例子来证实一下。

　　代码1：

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

　　上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。

　　代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准W3C盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

　　代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

　　所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型

IE、W3C两种CSS盒子模型的更多相关文章

  1. CSS盒子模型图

    下面这张图,是W3C标准的CSS盒子模型: 由上图可以清楚的看出各个部分的CSS属性.

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  5. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

  6. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  7. [HTML/CSS]盒子模型，块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  8. 我给女朋友讲编程CSS系列(4) CSS盒子模型

    什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school ...

  9. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

随机推荐

  1. poj2891 Strange Way to Express Integers poj1006 Biorhythms 同余方程组

    怎样求同余方程组?如: \[\begin{cases} x \equiv a_1 \pmod {m_1} \\ x \equiv a_2 \pmod {m_2} \\ \cdots \\ x \equ ...

  2. HDU 5242 利用树链剖分思想进行贪心

    题目大意: 在给定带权值节点的树上从1开始不回头走到某个底端点后得到所有经过的点的权值后,这些点权值修改为0,到达底部后重新回到1,继续走,问走k次,最多能得到多少权值之和 这其实就是相当于每一次都走 ...

  3. POJ 2478 欧拉函数打表的运用

    http://poj.org/problem?id=2478 此题只是用简单的欧拉函数求每一个数的互质数的值会超时,因为要求很多数据的欧拉函数值,所以选用欧拉函数打表法. PS:因为最后得到的结果会很 ...

  4. 【模板】manacher算法

    传送门 某篇好文章 #include <cstdio> #include <cstring> #define N 22200000 #define min(x, y) ((x) ...

  5. [luoguP2513] [HAOI2009]逆序对数列（DP）

    传送门 f[i][j]表示前i个数,逆序对数为j的答案 则DP方程为: f[1][0] = 1; for(i = 2; i <= n; i++) for(j = 0; j <= m; j+ ...

  6. POJ1450：Gridland 【杂题】

    题目大意:先给出了TSP的背景,然后给出一个n*m的单位格点的图,图中除边缘上的点与八个方向的点有边连接,距离为欧拉距离,求从左上角出发的TSP 思路:从水题列表中看到的题,但看一开始给出的backg ...

  7. Codeforces 892 D.Gluttony

    D. Gluttony time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  8. hdu 分类

    HDU分类 http://www.cnblogs.com/ACMan/archive/2012/05/26/2519550.html#2667329 努力A完.方便自己系统A题 不断更新中...... ...

  9. rabbitmq management Login Failed

    默认用户guest 只允许localhost登录. so... 我们自己建立用户 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rab ...

  10. OC-Xcode中导入runtime框架，函数参数没有提示的处理方法

    在了解runtime时,如果自己编写runtime代码,需要先导入头文件: #import <objc/message.h> 之后,例如了解runtime的消息机制时,调用objc_msg ...