css布局模型-read.pdf

第 6 章  CSS 布局模型 在多年的表格布局与标准布局之争后， 以 XHTML+CSS 为标准的布局不断得到多数设计师的认 可。标准布局的优势不言而喻，但我们依然能够在网上看见不同的声音和非议。XHTML+CSS 被误 解是可以理解的，想到初学者要驾驭个性各异的浏览器，同时在冰冷的代码环境中，需要极高的热 情和极大的想象力来编写这些如同账目似的样式代码，确实存在不小的难度。 但不可否认，时下 Web 布局技术的快速普及，每位设计师都可以用 CSS 或半 CSS 技术进行网 页布局。网页设计师常常套用现成的 CSS 布局代码，而对其内在的原理却是一知半解或囫囵吞枣， 所实现的  CSS  布局犹如一个不透明的黑盒子，虽然也能够实现预期效果，但最终阻碍了设计师对  CSS 本质的探究和认识。  6.1  关于 CSS 布局 很多设计师对于 CSS 的认识和实践仅停留在技巧层面上，对于 CSS 布局的核心是什么，实现  XHTML 结构的逻辑体系是什么，如此深奥的理论好像只有系统开发师才去思考，读者还需要认真 思考与理解吗？ 实际上要想驾驭 CSS 网页布局技术，这些问题应该想一想，抽象的理论对于思路的梳理具有重 要作用，甚至能够引导你勇闯智慧的迷宫。 所有 CSS 布局技术都应建立在这 4 个最基本的概念之上：盒模型、流动、浮动和定位。千变万 化的技巧应用其实都是这些基本概念在舞动，而且如果理解了核心概念的真谛，那么创建 CSS 布局 实际上就是按图索骥了。  6.1.1  从网友的求帖说起 一天在网上看到这样一个求救帖子：  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­  哪位高手能指点下或给小弟一点 div+css 中的布局、定位的心得？？ 一开始做的时候，我把所有的 div 都用 float 属性定位起来布局，就连 header、content、footer  这样的部分也是，（这样做合理吗？）可是后来发现 CSS 中使用 float 很多时会很烦琐，所以后来 就很少用到一些定位的属性，只是需要的时候才用，可是问题又来了。有时候用到 float 的时候，明 明加了 clear 了还是显示不对……，现在都对定位迷糊了……  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­  浏览下面的跟帖，热心人还真不少，但真正能够点到要害的很少，甚至没有。网友们多从头疼 医头、脚痛治脚的方法给予答复，有些也能够止痛，但不能根治。在论坛中，我们会经常看到这样 的帖子。有些网友主观上是热情、乐于助人的，但客观上由于 自己的认识偏颇，使很多以讹传讹的 第 6 章  CSS布局模型  213  观点、信息在网上飞速传播，着实令人担忧。因为初学者是没有免疫力的，只要觉得有点止痛，就 一概吸收，结果阻碍了对真正滋补营养的汲取。 例如，下面列出两则上面问题的跟帖。 跟帖一：  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­  根据你的页面内容的逻辑关系来结构化你的 html 代码，定位不是必须的，通常情况下只有个别 元素需要特别的定位方式。  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­  问题：空洞说理，没有正面提出解决问题的方法，等于没有说。 跟帖二：  ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­