CSS盒子模型在网页布局中的应用研究

摘要：网页设计使用table表格布局、或iframe布局网页缺点越来越明显，使用“DIV+CSS”架构能够做到真正使到网页结构和表现分离，使后期维护更方便。

关键词：CSS；DIV；盒子模型；页面布局

中图分类号：TP393文献标识码：A文章编号：1007-9599 (2012) 06-0000-02

CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表。W3C的构想是HTML标签只表示内容结构，即只表示“这是一个段落”，“这是一个标题”，“这是一个项目列表”等含义，而不具有任何样式；而这些“段落”、“标题”等内容的字体、字号、演示、显示位置等样式完全由CSS来指定，从而实现结构与样式的分离。

一、CSS盒子模型内部结构

在日常生活中，对盒子最熟悉不过了。所有矩形的东西包括画架、显示器、窗户、房子等都可以视作盒子，而网页上的CSS盒子可以形象比喻跟日常生活中的盒子一样。网页上的每个html元素都是CSS盒子，这些元素跟生活中的盒子般具有内容（content）、填充（padding）、边框（border）和盒子之间的边界（margin）特性，如图1所示。

图1 盒子模型

模型是现实生活中某些事物本质特性的一种抽象，CSS盒子模型就是建立在这种特性后所形成的对网页设计定位与布局的一套原则和规范，因而产生了CSS盒子模型。如图2所示

图2 CSS2.0盒子模型层次3D示意图

从CSS盒子模型图分析：内容就是盒子里装的东西；而填充就是盒子与这些东西的空隙；边框就是盒子本身了；至于边界就是与其他盒子芝间的空隙。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子。否则东西装不下或者盒子被撑坏，而CSS盒子具有弹性．里面的东西大过盒子本身时会自动适度变大。

盒子模型中主要包括外边距、边框、内边距以及元素内容的宽高，CSS盒子模型特定的内部结构有其独特的空间距离等属性，属性值的大小直接影响聊页面的排版效果，每个部分都有四个方向的属性值，分别为：

（一）外边距（margin}

外边距、或者称为边界（margin）位于盒子边框外，是与其他盒子之间的距离，外边距根据上、右、下、左四个方向，可细分为上外边距（margin-top）、右外边距（margin-right）、下外边距（margin-bottom）、左外边距（margin-left），而且一般采用“px”来标示，并按上、右、下、左的顺序来标注。

（二）边框（border）

边框比外边界稍复杂些，除四个边外，边框又细分为边框颜色、边框宽度、边框样式（实线、虚线等）三个方面的属性，完整的属性表述如下：

修饰属性包括：边框颜色（broder-color）、边框宽度（broder-width）、边框样式，其中边框样式（broder-style）取值有：none为默认值，无边框；solid为实线；dashed为虚线。

标示方向的属性包括：上边框（broder-tip）、右边框（broder-right）、下边框（broder-bottom）、左边框（broder-left），其中直接标示border表示在一个声明中统一设置四个方向的边框属性。

（三）内边距（padding）

边框确定以后，一般需要设置边框与内容之间的距离，以便精确控制内容在盒子中的位置，与border最明显的区别在于：padding并非实体，而是透明留白，所以并没有修饰属性，四个方向的内边距可以一次设置，也可以四边分别设置，顺序按顺时针方向，这点与margin相同，padding不允许取负值。

（四）宽高及实际占位

通过对以上三点学习，对于某个页面元素，我们可以得出以下结论：元素的实际占位尺寸=元素尺寸+填充+边距。这个结论按照纵横可分为以下两种情况：元素的实际占位高度=height属性+上下填充高度+上下边距高度；元素的实际占位宽度=width属性+左右填充宽度+左右边框宽度。

二、CSS盒子模型在页面布局中的应用

页面的布局类似于报纸的排版，通过将报纸的版面规划为几个版块，最终达到美观、大方的目的，结合W3C提倡的结构与样式分离的思想、所以页面布局的思路是：先对页面进行版面划分并使用XHTML描述结构，然后使用CSS样式描述各个版块的位置、尺寸等样式，CSS具体的描述方法是：将各版块看作一个盒子，利用盒子属性描述各版块的尺寸、外边距、内边距等CSS样式，而位置方面一般由浏览器自动控制，不用设置。根据W3C提倡的语义化思想，即要求尽量使用表示相关含义的HTML标签，因此各版块应采用表示“块”、“分区”含义的标签进行描述，因此，这种布局也称为“DIV+CSS”布局、或“层布局”，但其实质上是遵守W3C结构和样式分离以及语义化的思想。

三、CSS盒子模型在页面布局中的应用案例

利用盒子模型制作如图3所示网页。

图3 盒子模型应用案例

实现上述网页部分代码如下：

#container{width：730px； margin：0px auto 0px auto；}

.nav{width：100%；height：112px；background：url('../images/bg.gif') no-repeat；}

.nav ul li.welcome{width：230px；font：normal 12px/36px 宋体；color：#000；}

.nav ul li{float：left；width：64px；

font：bold 14px/36px 宋体；text- align：center；color：#fff；}

#header .nav ul li a{color：#fff；}

#header .nav ul li a：hover {color：#ff7300；}

.nav ul li.curmenu{width：100px；color：#046ac7； background：url('../images/bg.gif') 0px -112px no-repeat；}

.nav form{margin：55px 0px 0px 20px；}

.nav form input {float：left；height：25px；line-height：27px；}

.spot_content{margin-right：10px；}

.content .index{margin：10px 0px 15px 0px；height：30px；font：normal 12px/31px 宋体；

color：#304562；border-bottom：1px #afcaf7 solid； background：#fff url('../images/bg.gif') -305px -121px no-repeat；}

.content .index a{color：#304562；}

.content .index span{font：normal 14px arial；}

.content_list{float：left；width：353px；padding-top：10px；}

.content_list h1{padding：0px 13px；width：326px；height：34px；font：bold 14px/34px arial；color：#000； background：url('../images/bg.gif') 0px -170px no-repeat；}

.content_list li.dashed{border-top：1px #ccc dashed；

margin-top：6px；padding-top：6px；}

四、结语

盒子模型是CSS控制页面的一个很重要的概念，在CSS的高级应用中，诸如布局应用、浮动等均离不开盒子模型及相关的盒子属性，因为它是页面布局的基础。只有掌握好盒子模型及其每个元素的用法，才能控制好网页的各个元素，使得页面变得千变万化、美轮美奂。

参考文献：

[1]邓欢,兰慧红.CSS下盒子模型定位浅析[J].广西教育学院学报,2010,6

[2]张丽姿.用DIV+CSS实现立体圆角边框效果[J].忻州师范学院学报,2010,6

[3]赵慧.CSS中的margin属性研究[J].电脑知识与技术,2009,12

[4]梁小芳.高级Web标准-CSS盒子模型研究[J].电脑知识与技术,2009,21

[5]车元媛.基于DIV+CSS的网页布局技术应用[J].电脑知识与技术,2011,9

[6]北京阿博泰克北大青鸟信息技术有限公司.ACCP软件开发初级程序员-使用HTML语言和CSS开发商业站点[M].北京:科学技术文献出版社,2011

[作者简介]张瑞（1983-），女，河南沈丘县人，周口职业技术学院助讲，研究方向：动画设计；楚书来（1982-），男，河南沈丘县人，周口职业技术学院讲师，研究方向：软件工程与网络。