CSS下盒子模型定位浅析

《CSS下盒子模型定位浅析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS下盒子模型定位浅析邓欢兰慧红（广西教育学院数学与计算机科学系广西南宁邮编：530023）摘要：优秀的网页必须有合理的页面结构，这有赖于页面上各种元素的正确定位，CSS在布局方面有着强大的控制功能，丰富的定位属性提供了灵活的布局方式。本文将从原理上分析CSS各种定位属性在页面布局中的应用。关键词：盒子模型CSS布局定位CSS（CascadingStyleSheet，层叠样式表），是用于控制网页样式并允许将样式与网页内容分离的一种标记性语言，与传统简单的HTML语言相比，CSS代码结构明晰，维护更新简便，尤其CSS对页面布局结构提供更为丰富的格式控制方法，网页开发人

2、员能够轻松的开发更加缤纷多彩的页面效果。盒子模型在CSS网页布局中是个重要的概念，基于盒子模型的布局模式彻底颠覆了传统的表格布局模式，使在Web2.0时代网页布局的理念发生了革命性的改变。如何将盒子模型在页面中合理的定位是布局的关键，也一直被认为是一个难点，在没有深入理解清楚各种定位的原理就轻易的尝试布局，往往会得到一个杂乱页面。因此在进行CSS布局之前，充分的理解盒子模型的概念与各种定位规则的原理就显得十分重要。1.关于盒子模型1.1盒子模型的概念盒子模型的思想是将任何HTML标签都可以看作是一个盒子，这些HTML标签如同盒子一般容纳网页上的各种元素，如：文字、段落

3、、图片等。盒子占据一定的页面空间，一个盒子模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）这4个部分组成，如图1-1所示：图1-1一个盒子模型在页面上的实际宽度或高度是由content+padding+border+margin像素累加而成，可以通过调整它们来控制盒子的大小，在默认样式下，margin、border、padding不可见，盒子只显示其所容纳的content部分。网页开发人员可以通过修改CSS样式重新定义盒子的margin、border、padding样式，从而实现各种各样的排版效果。1.2盒子模型的类

4、型CSS把盒子模型分为两种基本形态：块状元素和内联元素。块状元素可以通过width和height定义高度和宽度，每个块状元素后面隐藏附带有换行符，使块状元素始终占据一行。内联元素没有高度和宽度，定义它的width和height属性无效，它显示的大小只能根据所包含的内容来确定，内敛元素后面不附带换行符，它允许其他内联元素与其位于同一行。2.盒子模型的定位2.1网页默认布局模式在CSS的布局理论中，文档流是盒子模型定位的基础，也是HTML中默认的网页布局模式，在一般状态下，网页中元素的布局都是以此为默认的显示方式，在页面中，块状元素自上而下按顺序动态分布，内联元素在每行中

5、按从左到右的顺序排放，要改变其在网页中的位置，只能修改网页结构中元素的先后排列顺序和分布位置来实现。同时文档流中每个元素都不是一成不变的：当在一个元素前面插入一个新的元素时，这个元素本身及其后面的元素的位置会自然向后流动推移。2.2margin、padding定位margin与padding分别表示盒子模型的外边距与内边距，这两个边距按照顺时针分为上、右、下、左4个方向：margin-top、margin-right、margin-bottom、margin-leftpadding-top、padding-right、padding-bottom、padding-le

6、ft这4个方向可以分别定义样式，也可以统一定义样式。在增加margin、padding的像素值后，盒子模型所包含的内容会因为边距的增加而被挤压发生位移，由此网页开发人员可通过适当调整margin、padding来控制盒子模型在页面的定位。使用margin、padding精确地控制盒子的位置，必须对三种基本的位置排列关系有深入的了解，首先分析两个盒子水平并排的情况，如图2-1所示：图2-1当两个盒子相邻的时候，它们之间的距离为左侧盒子的margin-right加上右侧盒子的margin-left。而当两个盒子垂直排列时，情况就会变得有一些不同，两个盒子之间的距离不再是m

7、argin-bottom与margin-top的和，而是两者中的较大者，如图2-2所示：图2-2除了上面提到的水平排列和垂直排列这两种关系外，还有一种位置关系在CSS排版中也是常见和重要的，这就是父子关系。当一个盒子包含在另一个盒子中间时，便形成了典型的父子关系。其中子块作为父块的content，它们之间的距离是父块的padding与子块的margin的和，如图2-3所示：图2-3以上就是CSS中三种基本的位置排列关系，使用margin、padding进行定位的思想就是通过盒子之间边距的调整和累加而得到新的位置，当前盒子的位置取决于它与周围盒子的边距