运用DIV+CSS设计网站布局
作者：袁红霞
来源：《科技资讯》2012年第33期
        摘 要：DIV+CSS是网站标准中常用的术语之一，XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。用DIV盒模型结构给各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。在DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
        关键词：DIV+CSS 选择器 盒子模型
        中图分类号：TP393 文献标识码：A 文章编号：1672-3791（2012）11（c）-0022-01
        DIV用于搭建网站结构、CSS用于创建网站表现，实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构，便于日后维护、协同工作和搜索引擎蜘蛛抓取。
        仔细分析和规划页面结构，得到类似这样的几块：
        标志和站点名称
        主页面内容
        站点导航
        子菜单
        搜索框
        功能区（例如购物车、收银台）
        页脚（版权和有关法律声明）
        我们通常采用DIV元素来将这些结构定义出来，类似这样：
       
       
       
       
       
       
       
        这是一个对内容块的语义说明。DIV容器中，可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素：标题、段落、图片、表格等等。每一个内容块都可以放在页面上的任何地方，再指定这个块颜、字体、边框、背景以及对齐属性等等。
        ID的名称是控制某一内容块的手段，通过给这个内容块套上DIV，并加上唯一的ID，就可以用CSS选择器精确定义每一个页面元素的外观。
        CSS是CascadingStyleSheets（层叠样式表）的缩写。是对web文档添加样式的简单机制，属于表现层的布局语言。
        CSS中有三大类型选择器：基本选择器、复合选择器、特殊选择器。基本选择器又包括
标签选择器、id选择器、类选择器。
        一个HTML页面可以由很多不同的标签组成，CSS标签选择器可以声明哪些标签采用哪种CSS样式。因此说，每一种HTML标签的名称可以作为相应的标签选择器的名称。
        每一个CSS选择器均包含选择器本身、属性和值，其中属性和值可以设置多个，以实现对同一个标签声明多种样式风格。CSS语言对所有属性和值都有严格的要求，如果声明的属性在CSS规范中没有，或某个属性的值不符合该属性的要求，均不能使该CSS语句起作用。若标签选择器一旦声明，那么页面中所有相应标签都会产生变化。
        类选择器的名称可以由用户自定义，属性和值都跟标签选择器一样，必须符合CSS规范。
        ID选择器的使用方法跟class选择器基本相同，不同的地方在于ID选择器只能在html页面中使用一次，所以其针对性更强。html的标签中只需利用ID属性，就可以直接调用CSS中的ID选择器。
        复合选择器是3种基本的选择器通过组合，产生更多种类的选择器，实现更强、更方便
的选择功能，它包括交集选择器、并集选择器和后代选择器。
        CSS盒子模型是CSS控制页面时一个很重要的概念，只有很好的掌握了盒子模型及其中每个元素的用法，才能控制好页面中的各个元素。每个页面中的元素都可以看成是盒子，它们占据着一定的页面空间，这些被占据的空间往往要比单纯的内容大。可以通过调整盒子的边框和距离等参数，调节盒子的位置和大小。
        一个页面由很多盒子组成，盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解。一是要理解一个孤立的盒子的内部结构；二是要理解多个盒子之间的相互关系。
        先来看一个例子，理解盒子的概念。假设，在墙上整齐地排列着4幅画。对于每幅画，都有一个边框，英文是border，每个画框中，画和边框通常都会有一定距离，这个距离称为内边距，英文是padding，各幅画之间通常也会有一定距离，他们之间的距离称为外边距，英文是margin。这些对象实际上就是一个border-padding-margin的模型。这些矩形对象可以统称为盒子，英文是box。了解了盒子之后，还需要理解模型这个概念。
        模型就是对某种事物的本质特性的抽象。模型的种类很多，网页布局中，为了使纷繁复
杂的各个部分合理地组织，专家对它的本质进行研究后，总结了一套完整的、行之有效的原则和规范。这就是盒子模型的由来。
        在CSS中，一个独立的盒子模型由content（内容），border（边框），padding（内边距）和margin（外边距）4个部分组成。一个盒子实际所占有的宽度或高度是由content+padding+ border+margin组成。在CSS中，通过设width和height的值控制内容所占矩形大小，并且对于任何一个盒子，都可以分别设定4个border、content、padding和margin。因此只要利用好这些属性就能够实现各种各样的排版效果。
        盒子并不仅仅是用DIV定义的，事实上，所有的网页元素本质上都是以盒子的形式存在。网页上的各种内容，在人的肉眼看来是文本、图像等，在浏览器看来，就是由许多盒子排列在一起或者相互嵌套。
        在一个网页中有着大量的盒子，他们以各种关系相互影响。为了能够方便的组织盒子有序的排列和布局，CSS规范的制定者进行了深入细致的思考，使得这种方式既有足够的灵活性，以适应各种排版要求，又可能使规则尽可能简单，让浏览器的开发者和网页设计师都能够相对容易地实现。若干种对盒子进行布局的方法，包括浮动属性和定位属性等。
        在标准流中，每一个块级元素都是从一个新行开始显示，而且其后的元素也需另起一行进行显示。当需要横向排列的时候，将会用到FLOAT这个属性，FLOATcss实现三列布局属性的作用就是改变块级元素对象的默认显示方式。如果将FLOAT属性的值设为left或right，元素就会左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子内容的宽度来确定。
        仅知道一些什么是DIV+CSS以及如何应用到实际项目中，还是远远不够的。必须对DIV+CSS中的每个组成部分，逐一学习应用，各个击破，方能发现它们的本质！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。