利用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 盒子模型
- 大小: 132.3 KB
- 大小: 128.5 KB
分享到：
相关推荐
在前端开发中，布局设计是至关重要的，而“DIV+CSS之弹性盒模型布局”是一种高效且灵活的网页布局方式。这种布局模式充分利用了CSS3中的Flexbox（弹性盒模型）特性，使得开发者可以轻松应对各种复杂的网页布局需求，...
在网页设计领域，"div+css"是一种常见的布局方式，尤其适合初学者作为入门学习的基础。这个名为"div+css_网页-制作"的压缩包很可能是为了教授如何使用HTML中的<div>元素配合CSS（层叠样式表）来构建静态网页。通过...
网页设计与制作中，"DIV+CSS创建网页-盒子模型介绍"是一个至关重要的主题，它涉及到网页布局的基础理论。盒子模型是理解网页元素如何在页面上占据空间的关键概念。在这个模型中，每个HTML元素都被看作是一个具有内容...
3. **Flexbox布局**：灵活的盒子模型，适用于单轴布局，如水平或垂直排列元素。 4. **Grid布局**：适用于二维布局，可以精确控制元素的位置和大小，常用于复杂网页设计。 **六、响应式设计** 随着移动设备的普及，...
这本书提供了30个精心设计的案例，旨在帮助读者掌握如何运用这两种技术来构建高效、响应式和美观的网站。 首先，我们来看Div元素。在网页设计中，Div通常用来创建模块化布局，将页面分割成不同的部分，如头部、主体...
【div+css网页布局】是网页设计中一种广泛采用的技术，用于实现页面的结构化和样式化。Div（Division）是HTML中的一个区块元素，它主要用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则是一种样式表语言...
此教学课件旨在帮助学习者掌握这两种核心技术，以便构建符合现代网页标准的布局和样式。在网页设计领域，DIV+CSS是不可或缺的基础，它们共同构成了网页结构和样式的基石。 **DIV（Division）** 是HTML中的一个通用...
CSS 盒子模型是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。在HTML中，元素分为两种主要类型：块级元素（block-level elements）和内联元素（inline elements），这两种元素在页面布局中扮演着不同...
8. **Flexbox**和**Grid布局**：这两种现代布局模式简化了复杂的布局任务。Flexbox处理一维布局（行或列），而Grid布局则适用于二维布局，可以轻松实现自适应和响应式设计。 9. **预处理器**：如Sass、Less等CSS预...
本资料详细讲解了如何利用这两种技术来构建高效且美观的网页结构。 首先，我们来了解一下什么是DIV和CSS。DIV是HTML中的一个通用容器元素，用于组合其他HTML元素，它可以包含文本、图像、链接等多种内容。CSS（层叠...
本教程系列将深入讲解如何使用这两种技术来创建高效、响应式的网页设计。在现代网页开发中，`DIV`（division）作为HTML中的一个容器元素，常用来组织和划分页面结构，而`CSS`（Cascading Style Sheets）则负责控制...
1. 块级元素与行内元素：理解这两种元素的区别对于构建布局至关重要。块级元素（如Div）默认占据整行，行内元素（如Span）则只占据自身内容的宽度。 2. 盒模型：每个HTML元素都可视为一个盒子，包括内容区域、内...
首先，我们来看两种主要的元素类型：块级元素（block elements）和内联元素（inline elements）。 1. **块级元素**： - 块级元素默认以`display: block`的方式显示，这意味着它们会独占一行，后面的元素会自动换行...
通过学习和分析这些源码，你可以深入理解Div+CSS布局的实现方式，包括如何设置元素的浮动（float）、定位（positioning）、盒模型（box model）、以及如何利用Flexbox或Grid进行响应式布局。同时，你还能掌握如何...
- Flexbox和Grid布局：学习和运用Flexbox弹性盒子模型和Grid布局，这两种现代CSS布局方式能更高效地创建复杂且响应式的网页结构。 4. **模板设计实践**： - 模板结构分析：section_3可能代表了模板的第三部分，这...
《DIV+CSS最经典最易懂教程》是学习网页布局与设计的重要资源，它通过实例讲解，帮助初学者快速掌握WEB标准设计的核心技术。在这个教程中，你会了解到如何利用DIV和CSS来构建清晰、响应式的网页布局，实现高效且美观...