CSS下盒子模型定位浅析.doc

CSS下盒子模型定位浅析邓欢 兰慧红（广西教育学院数学与计算机科学系 广西 南宁 邮编：530023）摘要：优秀的网页必须有合理的页面结构，这有赖于页面上各种元素的正确定位，CSS在布局方面有着强大的控制功能，丰富的定位属性提供了灵活的布局方式。本文将从原理上分析CSS各种定位属性在页面布局中的应用。关键词：盒子模型 CSS布局 定位CSS（Cascading Style Sheet，层叠样式表），是用于控制网页样式并允许将样式与网页内容分离的一种标记性语言，与传统简单的HTML语言相比，CSS代码结构明晰，维护更新简便，尤其CSS对页面布局结构提供更为丰富的格式控制方法，网页开发人员能够轻松的开发更加缤纷多彩的页面效果。盒子模型在CSS网页布局中是个重要的概念，基于盒子模型的布局模式彻底颠覆了传统的表格布局模式，使在Web2.0时代网页布局的理念发生了革命性的改变。如何将盒子模型在页面中合理的定位是布局的关键，也一直被认为是一个难点，在没有深入理解清楚各种定位的原理就轻易的尝试布局，往往会得到一个杂乱页面。因此在进行CSS布局之前，充分的理解盒子模型的概念与各种定位规则的原理就显得十分重要。1.关于盒子模型1.1盒子模型的概念盒子模型的思想是将任何HTML标签都可以看作是一个盒子，这些HTML标签如同盒子一般容纳网页上的各种元素，如：文字、段落、图片等。盒子占据一定的页面空间，一个盒子模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）这4个部分组成，如图1-1所示：图1-1一个盒子模型在页面上的实际宽度或高度是由content+padding+border+margin像素累加而成，可以通过调整它们来控制盒子的大小，在默认样式下，margin、border、padding不可见，盒子只显示其所容纳的content部分。网页开发人员可以通过修改CSS样式重新定义盒子的margin、border、padding样式，从而实现各种各样的排版效果。1.2盒子模型的类型CSS把盒子模型分为两种基本形态：块状元素和内联元素。块状元素可以通过width和height定义高度和宽度，每个块状元素后面隐藏附带有换行符，使块状元素始终占据一行。内联元素没有高度和宽度，定义它的width和height属性无效，它显示的大小只能根据所包含的内容来确定，内敛元素后面不附带换行符，它允许其他内联元素与其位于同一行。2.盒子模型的定位2.1网页默认布局模式在 CSS 的布局理论中，文档流是盒子模型定位的基础，也是HTML中默认的网页布局模式，在一般状态下，网页中元素的布局都是以此为默认的显示方式，在页面中，块状元素自上而下按顺序动态分布，内联元素在每行中按从左到右的顺序排放，要改变其在网页中的位置，只能修改网页结构中元素的先后排列顺序和分布位置来实现。同时文档流中每个元素都不是一成不变的：当在一个元素前面插入一个新的元素时，这个元素本身及其后面的元素的位置会自然向后流动推移。2.2 margin、padding定位margin与padding分别表示盒子模型的外边距与内边距，这两个边距按照顺时针分为上、右、下、左4个方向：margin-top、margin-right、margin-bottom、margin-leftpadding-top、padding-right、padding-bottom、padding-left这4个方向可以分别定义样式，也可以统一定义样式。在增加margin、padding的像素值后，盒子模型所包含的内容会因为边距的增加而被挤压发生位移，由此网页开发人员可通过适当调整margin、padding来控制盒子模型在页面的定位。使用margin、padding精确地控制盒子的位置，必须对三种基本的位置排列关系有深入的了解，首先分析两个盒子水平并排的情况，如图2-1所示：图2-1当两个盒子相邻的时候，它们之间的距离为左侧盒子的margin-right加上右侧盒子的margin-left。而当两个盒子垂直排列时，情况就会变得有一些不同，两个盒子之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者，如图2-2所示：图2-2除了上面提到的水平排列和垂直排列这两种关系外，还有一种位置关系在CSS排版中也是常见和重要的，这就是父子关系。当一个盒子包含在另一个盒子中间时，便形成了典型的父子关系。其中子块作为父块的content，它们之间的距离是父块的padding与子块的margin的和，如图2-3所示：图2-3以上就是CSS中三种基本的位置排列关系，使用margin、padding进行定位的思想就是通过盒子之间边距的调整和累加而得到新的位置，当前盒子的位置取决于它与周围盒子的边距，简单地说就是依靠增加边距把盒子往外/里挤。按照这种模式定位的盒子模型遵循文档流的特点，盒子彼此之间的定位是种相互依存的关系。这种定位方法的优点是简单、快捷，但缺点也是显而易见的，当新增，删除或修改页面布局中某个盒子时，当前盒子周围的盒子位置会发生改变，从而影响整个页面的布局结构。2.3 float定位float即是浮动定位，其语法规则是：float : left |right。网页开发人员可以通过可以通过CSS定义盒子向左或向右浮动。其中left表示盒子向左浮动，原本位于下方的文档流向浮动元素的右边，right表示盒子向右浮动，原本位于下方的文档流向浮动元素的左边。如图2-4所示：图2-4默认情况下，div层和段落标签p均属于块状元素，在文档流中会单独占据一行。为了实现环绕效果，现在对div层赋予float：left的属性，使其向左浮动，位于下方的文字流向div层的右侧，通过这个方式，文字能够很好的利用空间，实现各种排版效果。这种特性在网页排版中经常用来制作图片环绕或者首字放大的效果，通过float对图片下沉或首字下沉进行控制，并且使用标签对图片或首字设置单独样式，达到突出显示的效果，如图2-5：图2-52.4 position定位在CSS页面排版中，绝对定位和相对定位是被广泛运用的定位概念，这两个概念是由定位属性position衍生出来的。position从字面理解就是指定位置，即盒子相对于父级元素的位置和相对于它自身应该在的位置。position不能单独设置，必须还要配合top、right、bottom和left这4个属性（以下简称TRBL），分别表示的是盒子的各个边界离父级元素的距离，或各个边界离原来位置的距离。position自身一共有4个值，分别为static、fixed、absolute和relative。其中static为默认值，它表示盒子保持在原本在的位置上，即该值没有任何移动效果。除此之外的其它三个值都能给盒子模型产生不同的定位，实现丰富的排版效果。2.4.1 fixed定位fixed是固定定位，被赋予position:fixed的元素会脱离文档流而固定在页面的某个位置，如图2-6所示：图2-6在上图中定义了一个div层，赋予其fixed定位，同时添加top、left值与边界拉开距离，被赋予position：fixed的盒子脱离文档流浮于页面的上方，页面内容从其下方穿过。盒子的位置除了与TRBL的值有关外，不再受页面任何元素的影响，这种定位甚至在窗口缩放或滚动网页时，盒子的位置也不会有任何改变，用户体验的感觉就像盒子已经固定在浏览器中。2.4.2 absolute定位absolute就是position中绝对定位的参数。被赋予这个定位属性的盒子会从文档流中脱离，以父级盒子左上角为参照物根据TRBL的值产生位移，周围的文档流会自动填充盒子位移后留下的空白，下面通过比较定位前与定位后的两种状态来分析相对定位的效果。首先为未定位的初始效果，在页面添加3个5050px的div层，如图2-5所示：图2-5现在对box2设置绝对定位属性：#box2 position: absolute;left: 40px;top: 30px;保存预览，可以得到如下效果，如图2-6所示：图2-6从前后两种状态可以看出，绝对定位的box2脱离了文档流后根据当前的父级元素页面的左上角进行位移，原本排在下方的box3自动填补box2位移后留下的空间。在绝对定位中，HTML页面是包含所有盒子的默认父级元素，这种带有包含关系的父级元素在CSS布局中称之为包含块。body标签是整个页面中最大的包含块，绝对定位的盒子在默认情况下都是以body标签，也就是页面的左上角为参照物根据TRBL的值进行位移的。当然，如果所有的元素的绝对定位都是参照默认包含块进行位移的话，这会对整个页面布局造成很多不便，同时也会增加代码的复杂度。W3C也注意到了这个问题，他们在CSS 2.0中引入了自定义包含块的语法。接下来我们在刚才3个盒子的基础上添加一个新盒子box4，将其定义为包含块，如图2-7所示：图2-7在这个实例中，可以看到绝对定位的box2现在是参照新的包含块box4的左上角进行位移。新增的box4除了被赋予了居中对齐外，还被定义成了包含块。代码如下：#box4 margin: 0 auto;position: relative;其中margin: 0 auto;是将盒子居中对齐；position: relative;是将当前的div层定义为包含块。position的作用不光是提供定位，被声明这个属性的盒子会被定义为包含块，嵌套在其中的其它绝对定位的盒子会参照新的包含块发生位移。通过自定义包含块，网页开发人员可以灵活设置绝对定位的坐标原点和它的参考值，这样的绝对定位方式打破了盒子的固有排列顺序，给复杂的布局带来方便。2.4.3 relative定位relative定位其实就是相对定位，相对定位的最大特点就是在定位的时候，盒子是以原来位置为参照物根据TRBL的值产生位移，盒子原来的位置继续占用页面空间，周围的文档流不会自动填充盒子位移后留下的空白。下面通过比较定位前与定位后的两种状态来分析相对定位的效果。首先为未定位的初始效果，在页面添加3个5050px的div层，如图2-5所示：图2-5现在对box2设置相对定位属性：#box2 position: relative;left: 40px;top: 30px;保存预览，可以得到如下效果，如图2-6所示：图2-6从效果图可以看到，相对定位的方式没有脱离文档流，box2以它的原始位置为参照物产生了位移，原来占据的位置并没有腾空，依然占用页面空间。元素偏移后留下的空白仍然影响着页面文档流的位置排列。鉴于 “留空”这个特点，在页面布局中position: relative;单独使用情况比较少，一般是与绝对定位相互结合形成混合定位，利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。参考文献：1朱印宏.CSS商业网站布局之道M.北京：清华大学出版社，20072