DIV+CSS网页布局的技巧的研究.docVIP

DIV+CSS网页布局的技巧的研究 　　摘 要： 分析并归纳了应用DIV+CSS进行布局的常用方法及技巧，提出常用的六种网页布局形式，分别是：固定宽度的多列布局，完全按百分比布局，左侧按百分比变动、右侧固定宽度布局，右侧按百分比变动、左侧固定宽度布局，两侧按百分比变动、中间固定宽度布局和中间按百分比变动、两侧固定宽度布局。对盒子模型中的填充、边框和边界进行深入分析，对position属性和float属性使用技巧进行总结，以期对网页制作者有所帮助。 　　关键词： CSS； 网页布局； float属性； position属性； 盒子模型 　　中图分类号：TP391 文献标志码：A 文章编号：1006-8228（2015）03-14-04 　　Abstract： This paper analysis the commonly used methods and techniques in the DIV+CSS layout， presents six common forms of Web layout. And analysis of the padding， border and margin of the box model in-depth， the skills of using the position attributes and the float attributes are summarized in order to help Webpage maker. 　　Key words： CSS； Web layout； float attribute； position attribute； box model 　　0 引言 　　Web标准网页由结构、表现和行为三部分组成。结构用来对网页中的信息进行整理，常用的技术有HTML、XHTML和XML；表现用于对已经结构化的信息进行显示上的修饰，包括版式、颜色、大小等，主要技术是CSS；行为是指对整个文档内部的一个模型进行定义及交互行为的编写，主要技术有DOM（文档对象模型）、ECMAScript（JavaScript脚本语言）等。基于WEB标准的网站设计所研究的主要问题是如何使网页的内容与表现分离，这样做的好处有：网站开发效率高，维护简单，信息可以跨平台使用，服务器成本降低，网页解析速度加快，而且可以提供良好的用户体验。CSS从真正意义上实现了网页内容与它的外观相分离。 　　DIV+CSS是目前主流的网页布局技术，本文就使用DIV+CSS进行布局的常用方法及技巧进行分析、总结，以期对网页制作者有所帮助。 　　1 常用的布局形式 　　1.1 固定宽度的多列布局 　　2 常用属性的使用技巧 　　2.1 盒子模型 　　使用CSS布局网页时一个很重要的概念就是盒子模型，只有很好地掌握盒子模型及每个元素的用法，才能真正地控制好页面中的各个元素。所有网页中的元素都可以看作是一个盒子，占据一定的页面空间。一般来说，这些被占据的空间都要比单纯的内容大。网页由许多个盒子通过不同的排列方式（上下，并列，嵌套）堆积而成，这些盒子之间会互相影响，因此，既要理解盒子的内部结构，又要理解盒子之间的相互关系。其中有三个概念非常重要，即填充、边框和边界。盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间的距离，称为边界（margin），默认情况下盒子的边框是无，背景色是透明，所以，我们在默认情况下看不到盒子。 　　填充、边框和边界其属性值可以简写，方法是按照规定的顺序，给出2个、3个或4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框（填充或边界）的属性，后者表示左右边框（填充或边界）的属性；如果给出3个属性值，前者表示上边框（填充或边界）的属性，中间的数值表示左右边框（填充或边界）的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上（top）、右（right）、下（bottom）、左（left）边框（填充或边界）的属性，即顺时针排序。通常简称TRBL。 　　“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。行内元素（inline），这种元素本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围，如strong、a和span等标记。行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性