`

彻底弄懂CSS盒子模式之一

 
阅读更多

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、 height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来 实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“<div>文 字块一</div><div>文字块二</div><div>文字块三</div>”，而 用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>” 更合适。

用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片 等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：


CSS排版结果图

演示地址：css2.html

用div来定义语义结构

现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图）


典型版面分栏结构

其结构代码如下：

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

最后回到样式开头大家会看到这样的样式代码：

* {
margin: 0px;
padding: 0px;
}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>

结构代码是这样的：

<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p> 关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright &copy;2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>

好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^

本文完全为个人原创作品，转摘请注明作者，作者：唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处

经典论坛讨论 ：
http://bbs.blueidea.com/thread-2727499-1-1.html

本文链接：http://www.blueidea.com/tech/web/2007/4545.asp 　

分享到：
| 彻底弄懂CSS盒子模式之一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    彻底弄懂CSS盒模型

    【彻底弄懂CSS盒模型】 CSS盒模型是前端开发中至关重要的概念，它定义了网页元素如何占据空间和相互布局。CSS盒模型由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型...

    推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页

    而CSS布局以其代码简洁、维护方便、兼容性强等特点逐渐成为网页设计的标准方法之一。其中，CSS盒子模型作为CSS布局的基础，对于理解和掌握CSS布局至关重要。 #### 二、CSS盒子模型概述 **CSS盒子模型**是用于描述...

    弄懂CSS盒子模式 DIV布局详解（不容错过）（带源码）

    本篇文章将深入解析CSS盒子模型，并通过实例探讨如何使用div布局，帮助你彻底掌握这一核心技术。 首先，我们需要理解CSS盒子模型的基本构成。每个HTML元素在CSS中都被视为一个矩形的“盒子”，它包含四个部分：内容...

    彻底弄懂CSS盒子模式系列教程集合

    ### CSS盒子模式详解 #### 一、引言与概述 CSS盒子模型是Web前端开发中的一个核心概念，它定义了元素在网页上如何占据空间以及元素间的相互作用方式。掌握CSS盒子模型对于创建布局合理、视觉效果良好的网页至关...

    很不错的CSS学习资料，让你彻底轻松弄懂CSS

    【标题】：“很不错的CSS学习资料，让你彻底轻松弄懂CSS” 这是一份精心整理的CSS学习资源，旨在帮助学习者全面理解并掌握CSS（层叠样式表）这一重要的前端技术。CSS是网页设计和开发不可或缺的部分，它负责定义...

    CSS盒子模式(DIV布局快速入门)

    CSS盒子模式是网页布局的基础，尤其对于使用CSS（层叠样式表）进行页面设计和开发而言，至关重要。在传统表格布局中，网页内容是通过表格和嵌套表格来定位的，而CSS布局则是通过定义不同大小和嵌套的“盒子”（即...

    CSS盒子模式(DIV布局快速入门)[收集].pdf

    CSS 盒子模式是CSS 中最核心的概念之一，它是 DIV 排版的基础，也是网页标准设计的关键所在。通过使用 CSS 盒子模式，可以实现网页的快速布局，提高企业竞争力，并且可以使代码简洁、更新方便，兼容更多的浏览器。 ...

    彻底弄懂CSS盒模型 Box Model

    【彻底弄懂CSS盒模型 Box Model】 在网页设计中，CSS盒模型是理解网页布局的基础。这个模型描述了网页元素如何占用空间并与其他元素交互。盒模型包括四个关键部分：内容（content）、内填充（padding）、边框...

    CSS盒子模型教程PPT课件.pptx

    CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念，...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    本文将深入探讨"CSS权威指南"、"css彻底设计研究"、"HTML5和CSS3实战"以及"HTML5与CSS3设计模式"这四个主题中的关键知识点，帮助读者掌握这些领域的核心概念。 首先，"CSS权威指南"是一本经典教程，它全面地介绍了...

    CSS中的盒子模型（图片）

    其中，盒子模型（Box Model）是CSS布局的基础，它定义了元素如何占据空间并与其他元素交互。接下来，我们将深入探讨这个重要概念。 首先，盒子模型描述了一个HTML元素在页面上占用的空间，包括元素的内容区域...

    CSS+DIV-盒子模型示例.zip

    盒子模型是CSS布局的核心概念，它将每个HTML元素视为一个具有边距（margin）、边框（border）、内填充（padding）和实际内容的矩形盒子。 1. **盒子模型的概念** - **内容（Content）**：这是元素的实际文本或图像...

    CSS盒子模型PPT教学课件.pptx

    CSS 盒子模型是 CSS 的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。在网页设计中，每个 HTML 元素都可以看作是一个装了东西的盒子，这个盒子由元素的内容、填充、边框和边界组成。 CSS 盒子...

    Css盒子模型入门指导

    CSS 盒子模型是网页设计中的核心概念，尤其对于使用CSS进行布局的初学者而言，理解和掌握盒子模型至关重要。在传统的HTML布局中，表格被广泛用于网页内容的排版，但随着网页技术的发展，CSS（层叠样式表）的引入带来...

    css彻底设计研究css.pdf+源码

    CSS设计彻底研究是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。需要的朋友们...

    CSS下盒子模型定位浅析.pdf

    【CSS盒子模型定位浅析】 CSS（层叠样式表）是一种强大的样式控制工具，它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距...

    css盒子模型-京东快报

    IE6及更早版本采用了不同的盒子模型（称为"怪异模式"），其中元素的宽度和高度会包含内边距和边框。为了避免这种兼容性问题，可以使用`box-sizing`属性来统一盒子模型，例如`box-sizing: border-box;`会让元素的总...

    tytttta#CSS-learning#五CSS盒子模型1

    1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用

    21.4 CSS 盒子模型

    在CSS世界中，盒子模型（Box Model）是一个至关重要的概念，它定义了元素在网页布局中的行为方式。这个模型描述了HTML元素所占用的空间，包括元素的内容、内边距（padding）、边框（border）以及外边距（margin）。...

    day05（CSS03-盒子模型）v1.0.pdf

    CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中，每个标签都是一个盒子，通过盒子的视角可以更方便地进行布局。 一、CSS三大特性 CSS有三个基本特性：继承...

Magicbox
Global site tag (gtag.js) - Google Analytics