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

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标签，因此各版块应采用表示“块”、“分区”含义的标签进行