DIV网页排版入门指南

阅读更多

1 前言

       如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些。

2 盒子模型

       什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。如下图所示：

        这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

3 文档流

文档流：将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素,即为文档流。

div是块级元素，在页面中独占一行，自上而下排列。

每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端。若当前行容不下, 则另起新行再浮动。内联元素也不会独有一行。一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位。然则在IE中浮动元素也存在于文档流中。

4 浮动

4.1 浮动概述

假如某个DIV元素A是浮动的，如果A元素上一个元素也是浮动的，那么A会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤下到下一行。注：靠近页面边缘的一端是前，远离页面边缘的一端是后。）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

标签元素：float	这个规则只能影响使用清除的元素本身，不能影响其他元素。
元素值：none	默认值。
元素值：left	元素向左浮动。
元素值：right	元素向右浮动。
元素值：inherit	从父元素继承float属性。

4.2 浮动特性

编号	特性
1	相邻的浮动元素，left属性最前面的元素，排在最左面。
2	相邻的浮动元素，right属性最前面的元素，排在最右面。
3	成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
4	height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。
5	把添加float的属性的div元素嵌入在一个div中，并给此div添加width和height属性。浏览器宽度缩小时，也不会发生变形。

 

5 清除浮动

5.1 概述

标签元素：clear	该规则只能影响使用清除的元素本身，不能影响其他元素。 该属性的值指出了不允许有浮动对象的边。  这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
元素值：none	表示两边允许有浮动元素。
元素值：left	表示该元素左边不存在浮动元素。
元素值：right	表示该元素右边不存在浮动元素。
元素值：both	表示该元素两边都不存浮动元素。

6 绝对定位

6.1 概述

标签元素	position
元素值：absolute	是生成绝对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（如：relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。

 

6.2 relative与absolute的结合使用

        在网页设计时经常会用到浮动来对页面进行布局，但是浮动所带来的不确定因素却很多（例如：IE浏览器的兼容问题）。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好（relative与absolute相结合来使用）。比如有一个父级DIV标签head，其它下包含多个子标签。首先给head设置relative定位，那么可以看到里面所有的子元素在设置absolute后都会相对head进行定位，而不是相对body定位。这样相对于用浮动来说就简单方便了很多，也不需要担心兼容问题。

7 固定定位

7.1 概述

标签元素	position
元素值：fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

 

8 优势

8.1 实现结构与表现分离

结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就自动缩进两个汉字。

改用CSS排版后，我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

• 图片1.png (35.5 KB)
• 下载次数: 5

• 图片1.png (35.5 KB)
• 下载次数: 8

• 
• 大小: 19.2 KB

• 查看图片附件