《彻底弄懂CSS盒子模式(DIV布局快速入门)》由会员分享，可在线阅读，更多相关《彻底弄懂CSS盒子模式(DIV布局快速入门)（13页珍藏版）》请在金锄头文库上搜索。
1、彻底弄懂CSS盒子模式(DIV布局迅速入门)-03-19 08:27 作者： 唐国辉 出处： 天极yesky 责任编辑：龙犊如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页构造，又或者说你想学习网页原则设计，再或者说你的上司要你变化老式的表格排版方式，提高公司竞争力，那么你一定要接触到的一种知识点就是CSS的盒子模式，这就是DIV排版的核心所在，老式的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。由于用这种方式排版的网页代码简洁，更新以便，能兼容更多的浏览器
2、，例如PDA设备也能正常浏览，因此放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找有关信息。理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具有这些属性。CSS盒子模式 这些属性我们可以把它转移到我们平常生活中的盒子（箱子）上来理解，平常生活中所见的盒子也具有这些属性，因此叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者
3、其他抗震的辅料；边框就是盒子自身了；至于边界则阐明盒子摆放的时候的不能所有堆在一起，要留一定空隙保持通风，同步也为了以便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能不小于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子自身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其他东西要保存多大距离。在现实生活中，假设我们在一种广场上，把不同大小和颜
4、色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和构造就类似我们要做的网页版面设计了，如下图：由“盒子”堆出来的网页版面目前对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在背面举例，并延用盒子的概念来解释它。转变我们的思路老式的前台网页设计是这样进行的：根据规定，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop此类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们重要考虑的是页面内容的语义和构造，由于一种强CSS控制的网页，等做好网页后，你还可以轻松的调你想要
5、的网页风格，况且CSS排版的此外一种目的是让代码易读，区块分明，强化代码重用，因此构造很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，由于CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一种很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相称容易，甚至你还可以定制几种风格的CSS文献供客户选择，又或者写一种程序实现动态调用，让网站具有动态变化风格的功能。实现构造与体现分离在真正开始布局实践之前，再来结识一件事构造和体现相分离
6、，这也用CSS布局的特色所在，构造与体现分离后，代码才简洁，更新才以便，这不正是我们学习CSS的目的所在吗？举个例来说P是构造化标签，有P标签的地方表达这是一种段落区块，margin是体现属性，我要让一种段落右缩进2字高，有人会想到加空格，然后不断地加空格，但目前可以给P标签指定一种CSS样式：P text-indent: 2em;，这样成果body内容部分就如下，这没有外加任何体现控制的标签：加进天涯社区有一段时间了，但始终没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来阐明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的协助。如果还要对这个段落加
7、上字体、字号、背景、行距等修饰，直接把相应的CSS加进P样式里就行了，不用像这样来写了：段落内容这个是构造和体现混合一起写的，如果诸多段落有统一构造和体现的话，再这样累加写下去代码就繁冗了。再直接列一段代码加深理解构造和体现相分离：用CSS排版如下是引用片段： 不用CSS排版如下是引用片段： 第一种措施是构造体现相分离，内容部分代码简朴吧，如果尚有更多的图片列表的话，那么第一种CSS布局措施就更有优势，我打个比方你好理解：我在BODY向你简介一种人，我只对你说她是一种人，至于她是一种什么样的人，有多高，是男是女，你去CSS那里查下就懂得。这样我在BODY的工作就简朴了，也就是说BODY的代码就
8、简朴了。如果BODY有一种团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一种元件，这样动画文献就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文献体积小能较快被客户端下载了。用CSS排版减小网页文献体积像上面我做的那个版面，一共分为四个区块，每个区块的框架是同样的，这个框架就是用CSS写出来的，样式写一次，就可以被无多次调用了(用class调用，而不是ID)，只要变化其中的文字内容就可以生成风格统一的众多板块了，它的样式和构造代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：如下是引用片段：（参照范例
9、ex1.html） 前言 正文内容 CSS盒子模式 正文内容 转变思想 正文内容 熟悉环节 正文内容 熟悉工作流程在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不懂得，在内容部分我不能让它再浮现体现控制标签，如：font、color、height、width、align等标签不能再浮现，（简朴说工作前先洗脑，忘掉此前的一惯做法，去接受和使用全新的措施），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几种文字内容块，不是一定要用DIV才叫DIV排版，不是“文字块一文字块二文字块三”，而用“文字块一文字块二文字块三”更合适。用DIV+CSS设计
10、思路是这样的:1.用div来定义语义构造；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有体现属性的标签）。下面人们跟我一起来做一种实例加深对这个环节的理解。先当作果图：CSS排版成果图1. 用div来定义语义构造 目前我要给人们演示的是一种典型的版面分栏构造，即页头、导航栏、内容、版权（如下图），典型版面分栏构造其构造代码如下：如下是引用片段： 上面我们定义了四个盒子，按照我们想要的成果是，我们要让这些盒子等宽，并从下到下整洁排列，然后在整个页面中居中对齐，为了以便控制，我们再把这四个盒子装进一种更大的盒子，这个盒子就是BODY，这样代码就变成:如下是引用片段： 最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同步加上边框，那么它的样式是： 如下是引用片段：body font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0pxauto; height:auto; width:760px;
