昨天说到HTML和CSS基础知识，今天继续说，说到网页设计、html和css大家一定会想到一个经典的排版方式：DIV+CSS排版，下面小慕就具体说一下div+css盒模型的组成

css盒模型的组成

介绍DIV+CSS排版之前还要说一下表格排版，表格排版是比较简单的，这里只是提一下，就不怎么说了，相信只要接触过的人员不要学习很快就会掌握了。

回到DIV+CSS盒模型排版，我们昨天介绍的前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子(box)呢？所谓盒子，很容易想到空间问题，当然页面是平面的我们只需要考虑平面的内容。先说说盒子有什么吧，当我们俯瞰一个盒子时就会发现这些：盒子材质的厚度、内置的什么物品所占空间、内部放置物品与盒子内边的空隙大小、还有盒子与盒子之间的间距等等，再说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)等，这和我们常见的盒子其实是一个概念，这些CSS盒子模式都具备这些属性，看下图的盒子模型。

如上图所示：可以想象一下，边框相当于我们俯瞰盒子时的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫或间距，边界呢相当于在这个盒子周围要留出一定的空间，以方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方以至于出现网页排版时出现网页错位、内容溢出等等现象。同样道理盒子模型的高度也是同样道理，这里就不多说了。

上边提到的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

今天就说这么多吧，后边就是具体排版操作内容了，额，对了小慕再给大家说说如何才能把网页设计学习好吧。

初学者怎样学习网页设计和DIV+CSS排版

1、多了解一些html里的标签知识和css基础，要知道什么地方用什么标签，什么效果要用到怎样的属性，初学者可以先用dreamweaver软件进行界面排版，想要个什么效果先用可视化排出来，然后打开代码经过修改增删时效果的改变来研究每个标签和属性代码的功能和效果，逐步掌握，不需要死记硬背。小慕本人就比较讨厌死记硬背的方式，所以咱英语是差到家了，哈哈，扯远了。嗯，关键就是在实践中学习，要善于利用软件，这就是小慕在学习标签和属性时用的方法，可能小慕我记忆力差吧，只能用这个笨方法，好吧，那些记忆力好的可以死记的哈，别和我打嘴官司，嘻嘻。

2、学习布局的时候可以先用表格布局，可以用DW软件可视化排版，然后研究代码，当觉得标签及其属性掌握的差不多了，在使用div+css盒子模型进行排版，切勿眼高手低，当然如果你是大神就另当别论了，额，小慕太自恋了，大神也不会来看俺这种小白写的内容啊。好了，无论你是什么程度的神，请不要吐槽小慕，小慕只有这个水平了，大家多担待。

3、学会改变设计观念，我们使用表格排版时肯定会优先考虑网页的外观、颜色、字体及布局等所有页面表现上的内容。而DIV+CSS不同在于DIV等标签不再是页面上的表现形式而是一个页面结构，这里实现其页面上的表现形式的变成了CSS样式表，这就是实现了结构与外观表象分离出来的效果，以加快网页加载的速度。当我们使用DIV+CSS排版布局的时候要知道外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页是以简化代码、加快显示速度为目的的，也就是用户体验。

4、最后不得不说的一点：多动手、多实践、勤动脑，还有坚持不懈不要怕麻烦。无论学习什么这都是不变的真理。正所谓实践出真知，在设计中学习，在学习中进步，善于变换思路，别让你的大脑生锈了，不能一棵树上吊死，更不能一条路走到黑。额，这个貌似与坚持有矛盾呢，其实吧你要学会了选择，就不觉得了，不是常说条条大路通罗马嘛，就是这个道理，坚持目标和坚持道路不是一个概念，只要你别走到那条会走到天黑的死路就是了。

额，小慕要疯了，最讨厌这些哲学问题了，头疼，反正今天就这些了，发现小慕原来还是有去研究哲学的潜力的，欣慰。

附：上边忘了说一点，DW软件的下载地址：小慕这里提供的是8.0的老版本，需要新版本的自行百度下载。

DW软件的下载地址 http://www.amuker.com/zyfx/219.html 这里是8.0版本的。

---

转载请注明本文标题和链接：《HTML和CSS基础知识简介二》