CSS的盒子模型必知的CSS知识点Word下载.docx

1、实现结构与表现分离在真正开始布局实践之前，再来认识一件事结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P text-indent: 2em;，这样结果body内容部分就如下，这没有外加任何表现控制的标签：加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以

2、实例和图片，相信对初学CSS布局的人会带来一定的帮助。如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：font color=#FF0000 face=宋体段落内容/p这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。再直接列一段代码加深理解结构和表现相分离：用CSS排版以下是引用片段：style type=text/css!- #photoList img height:80;width:100;margin:5px auto; -/stylediv id=photoListimg src=

3、01.jpg /02.jpg03.jpg04.jpg05.jpg/div不用CSS排版 width=100 height=80 align=middle05。jpg第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个

4、元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了（用class调用，而不是ID），只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：* margin:0px; padding:body font-size: 12px;margin: 0px auto;height: auto;width: 805px;.

5、mainBox border: 1px dashed #0099CC; 3px;padding: 0px;float: left; 300px; 192px;.mainBox h5 20px; 179px;color: #FFFFFF; 6px 3px 3px 10px;background-color: #0099CC; 16px;.mainBox p line-height: 1.5em;text-indent: 35px 5px 5px 5px;div class=mainBoxh5前言正文内容CSS盒子模式正文内容 转变思想熟悉步骤熟悉工作流程在真正开始工作之前我们脑海中要形成这样一种

6、思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“文字块一文字块二文字块三”，而用“/body最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：body font-family:Arial,Helvetica,sans-seri

7、f;12px;0pxauto;760px;1pxsolid#006633;页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：#header100px;background-image:url（headPic.gif）;background-repeat:no-repeat;3px导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：#nav25px;14px;list-sty

8、le-type:none;lileft;a #000000;text-decoration:padding-top:4px;display:block;97px;22px;text-align:center;#009966;margin-left:2px;a:hover #FFFFFF;内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：#content740px;1.5em;10px;p2em;h516px;版权栏，给它加个背景，与页头相映，里面文字要自动居中对

9、齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：#footer50px;最后回到样式开头大家会看到这样的样式代码：*这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：styletype=结构代码是这样的：ulliahref=#首页/li文章相册Blog论坛帮助第一段内容理解CSS盒子模式第二段内容关于华升|广告服务华升招聘客服中心QQ留言网站管理会员登录购物车Copyright2006-2008TangGuohui.AllRightsReserved好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。