利用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 盒子模型
相关推荐
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
掌握CSS的盒子模型对于网页设计至关重要，它可以帮助我们精确控制元素的尺寸和间距，实现复杂的网页布局。通过这个示例压缩包，学习者可以系统地学习并实践盒子模型的各个组成部分，提升布局设计能力。
在CSS中存在两种主要的盒子模型：IE盒子模型（又称为怪异盒子模型）和标准W3C盒子模型。这两种模型对于元素的尺寸计算方式有所不同，了解这些差异对于确保网页在不同浏览器中的一致性显示至关重要。 #### 二、标准...
CSS有两种盒子模型：IE盒子模型（也称怪异盒子模型）和标准盒子模型。默认情况下，现代浏览器使用标准盒子模型，其中元素的总宽度和高度由内容宽度+边框+内边距+外边距组成。而在IE6及以下版本中，元素宽度仅包含...
在网页设计与开发中，CSS（层叠样式表）扮演着至关重要的角色，其中CSS盒子模型是理解布局和元素尺寸计算的关键概念。本资料将深入探讨CSS盒子模型，帮助你掌握这一核心知识。 **一、基本概念** CSS盒子模型，又称...
在CSS3中，还引入了盒模型的两种模式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...
了解盒子模型后，我们还需要关注盒模型的两种类型：标准盒模型（W3C Box Model）和IE盒模型（IE Box Model，又称怪异盒模型）。在标准盒模型中，元素的总宽度和高度仅由内容宽度和高度加上内边距和边框决定，而在IE...
CSS盒子模型是CSS布局的基础，理解和掌握它对于网页设计至关重要。"京东快报"可能是一个项目或者课程，涉及到使用CSS来构建符合京东风格的页面布局。在这里，我们将深入探讨CSS盒子模型及其在实际应用中的运用。 **...
在实际应用中，CSS的盒子模型和结构与表现分离的理念不仅简化了网页设计的流程，还提高了网页的可访问性和适应性，使得网站能够适应不同设备和屏幕尺寸。因此，深入理解和熟练掌握CSS盒子模型是每个前端开发者必备的...
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
CSS 盒子模型 CSS 盒子模型是 CSS 的基石之一，它指定元素...在 CSS 盒子模型中，掌握盒子模型的组成部分、计算公式和边框的交汇效果是非常重要的。同时，理解填充 padding 属性也可以帮助我们更好地设计网页布局。
在CSS3中，盒子模型有两种类型：标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。默认情况下，大多数浏览器使用W3C盒模型，其中元素的总宽度和高度由内容区域+内边距+边框决定。而IE盒模型则将边框和内边距包含在...
本文将详细介绍CSS盒子模型的基本概念、组成部分及其两种不同的表现形式：标准W3C盒子模型与IE盒子模型。 #### 二、CSS盒子模型概述 CSS盒子模型是基于矩形的概念来描述页面元素布局的。每个HTML元素都可以被视为...
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
内容概要：本文详细讲解了 CSS 盒子模型的各项关键概念及其具体属性的设置方法，覆盖从内容宽度到高度、内外边距（padding）、边界（border）、外边距（margin），还涉及到盒模odel-radius 和 text-shadow 属性的...
总的来说，“Day05-CSS布局-盒子模型”涵盖了网页设计中布局的基本概念，掌握了这些知识，开发者就能够更好地控制元素的外观和位置，从而创建出美观且功能完善的网页。通过实践和不断学习，开发者可以进一步掌握更...
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
盒模型有两种主要类型：W3C标准盒模型和IE盒模型（或称怪异盒模型）。 1. **W3C标准盒模型**：内容区域的宽度和高度不包括内边距和边框，外边距则会影响元素与其他元素的相对位置。 2. **IE盒模型**：内容区域的...