css布局模型.pdf

《css布局模型.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第6章CSS布局模型在多年的表格布局与标准布局之争后，以 XHTML+CSS为标准的布局不断得到多数设计师的认可。标准布局的优势不言而喻，但我们依然能够在网上看见不同的声音和非议。XHTML+CSS被误解是可以理解的，想到初学者要驾驭个性各异的浏览器，同时在冰冷的代码环境中，需要极高的热情和极大的想象力来编写这些如同账目似的样式代码，确实存在不小的难度。但不可否认，时下Web 布局技术的快速普及，每位设计师都可以用 CSS或半 CSS技术进行网页布局。网页设计师常常套用现成的 CSS布局代码，而对其内在的原理却是一知半解或囫囵吞枣，所实现的CSS布

2、局犹如一个不透明的黑盒子，虽然也能够实现预期效果，但最终阻碍了设计师对CSS本质的探究和认识。6.1关于 CSS布局很多设计师对于CSS的认识和实践仅停留在技巧层面上，对于CSS布局的核心是什么，实现XHTML 结构的逻辑体系是什么，如此深奥的理论好像只有系统开发师才去思考，读者还需要认真思考与理解吗？实际上要想驾驭 CSS网页布局技术，这些问题应该想一想，抽象的理论对于思路的梳理具有重要作用，甚至能够引导你勇闯智慧的迷宫。所有 CSS布局技术都应建立在这4 个最基本的概念之上：盒模型、流动、浮动和定位。千变万化的技巧应用其实都是这些基本概念在舞动

3、，而且如果理解了核心概念的真谛，那么创建 CSS布局实际上就是按图索骥了。6.1.1从网友的求帖说起一天在网上看到这样一个求救帖子：哪位高手能指点下或给小弟一点 div+css 中的布局、定位的心得？？一开始做的时候，我把所有的div 都用float 属性定位起来布局，就连header、content、footer这样的部分也是，（这样做合理吗？）可是后来发现CSS中使用float 很多时会很烦琐，所以后来就很少用到一些定位的属性，只是需要的时候才用，可是问题又来了。有时候用到 float 的时候，明明加了 clear了还是显示不对……，现在都对定

4、位迷糊了……浏览下面的跟帖，热心人还真不少，但真正能够点到要害的很少，甚至没有。网友们多从头疼医头、脚痛治脚的方法给予答复，有些也能够止痛，但不能根治。在论坛中，我们会经常看到这样的帖子。有些网友主观上是热情、乐于助人的，但客观上由于自己的认识偏颇，使很多以讹传讹的第6章CSS布局模型213 观点、信息在网上飞速传播，着实令人担忧。因为初学者是没有免疫力的，只要觉得有点止痛，就一概吸收，结果阻碍了对真正滋补营养的汲取。例如，下面列出两则上面问题的跟帖。跟帖一：根据你的页面内容的逻辑关系来结构化你的 html 代码，定位不是必须的，通常情况下只有个别

5、元素需要特别的定位方式。问题：空洞说理，没有正面提出解决问题的方法，等于没有说。跟帖二：呵呵，float 是指把容器当作流来看待了，如果一行可以同时显示多个 div，那么后面的 div就会贴上去。占用前面那一个 div未占据的空间了。默认的情况下是 div display:block显示为块，它会占据一行内所有可以占用的空间。如果定义了高度就占用制定高度的空间了。clear就是用来清除左边或右边的流的了。至于布局就老老实实用1000x600 这样划分一个布局出来就是了。不要想这么多，呵呵，把问题简化。问题：把float 看作流是对CSS布局的误解。

6、流是什么？流是网页文档自然流动而衍生出来的一种布局模式，float 虽然也可以流动，但它的本质是浮动，浮动犹如空中漂浮的白云，而流动更像地面上依势而下的流水，不能简单地把流动与浮动混淆起来，否则布局非出问题不可。6.1.2关于盒模型补充在深入学习 CSS布局之前，读者必须透彻理解什么是盒模型。关于盒模型基础，我们在第 4章中曾做过专题研究，依然比较模糊的读者可以返回再阅读一下。下面就几个容易模糊或误解的地方再强调一下。lmargin 总是透明的，padding 也是透明的，但padding 受背景影响，能够显示背景色或背景图像，所以部分初学者会误认

7、为补白不透明。lborder不透明，这是因为实线边框的遮盖。当你定义虚线或点线边框时，在部分浏览器中可以看到被边框遮盖的背景。盒模型背景可以深入到 padding和 border区域，但部分浏览器不支持 border区域背景显示，如 IE 和 Netscape浏览器。lmargin可以定义负值，但 border和 padding不支持负值。lmargin、border和padding 都是可选的，它们默认值为0。我们可以单独定义一边或统一定义盒子四边的属性值。l如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义borderstyle 属性

8、为可见样式。l每一个盒子所占页面区域的宽度和高度等于margin 外沿的宽度和高度。盒子的大小并不总214 CSS商业网站