CSS盒子模型定位方式的研究与应用
摘要：在web标准设计模式下，div+css布局方式与传统的表格排版相比有了本质的区别，实现了样式与内容的分离，而且使网页代码简洁，维护方便。css定位是其应用的难点，下面对css盒模型常用的几种定位方式进行研究和应用分析。
关键词：盒子模型；css布局；定位
中图分类号：tp393.092文献标识码：a文章编号：1007-9599 (2013) 06-0000-02
级联样式表简称为css，还被称为风格样式表，由名字中我们就可以看出，它是用来进行网页风格设计的。如果将其和传统的html相比较看来，css可以对网页中的各个目标的位置排版进行精确的控制和管理，其精确的控制管理程度可以达到像素级别，css可以对网页目标的模型样式进行编辑和管理，除此之外，还可以进行初步的交互设计工作，功能比较的丰富多样，也比较的强大，css是当今最令人满意的表现设计语言。
1盒子模型
1.1关于盒子模型的简单叙述
盒子模型是说我们可以将各种html标签都看成一个个的盒子，这些html标签可以发挥盒子的功能，将网页上的不同元素装入其中，就像是汉字、符号、等等，除此之外，还能够嵌套另一个css盒子。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图1-1所示。
图1-1我们能够将其看成现实生活中上方开口的普通小盒子，然后从盒子的正上方向下看盒子，我们可以将边框当作盒子的厚度，我们将盒子的填充物看作具有良好防震功能的塑料泡沫，边界和内容就更好理解了，我们将边界当作盒子需要取出时所留下的空间，内容就当作这个虚拟小盒子能够装载物体的空间就可以了，这样的理解和比喻比较的直白，可以让人们产生很好的立体思维。如此看来，盒子模型在具体的页面中占据的宽度就是左边界+左边框+左填充+内容+右填充+右边框+右边界几部分共同构成的，但是在css中width所代表的宽度则没有这么的复杂，它只是代表了盒子中内容部分的宽度。
1.2盒子模型的类型
盒子模型呈现两种排列形态：块级元素和内联元素。块级元素可以通过height和width定义高度和宽度，默认占据一行，相当于在它之前和之后各插入了一个换行。内联元素显示的大小
css实现三列布局
只根据它包含的内容来确定，定义它的height和width无效，内联元素后面没有换行符，允许其他内联元素与之同一行。可以用css的display：inline将块级元素转变为内联元素，也可以用display：block将内联元素转变为块元素。
2盒子模型的定位
2.1网页默认的布局方式
文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是html中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。
2.2浮动（float）
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。
且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。该属性值有inherit|none|left|right四种取值，其中none为默认值，也就是标准流通常的显示状态；inherit将会从祖先元素获取float值，left或right，表示当前标签会向其父容器标签的左侧或右侧靠拢。
2.3position定位
页面布局使用最多的是相对定位（relative）和绝对定位（absolute）。
2.3.1相对定位（relative）
这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
首先为未定位的效果，在页面添加三个100*100像素的div，如图2-1所示。
现在对box2设置相对定位属性
#box2{background：#f36；height：100px；width：100px；position：relative；left：30px；top：50px；}
保存预览得如下效果，如图2-2所示。
可见，box3并没有上移，且box2覆盖了box3部分内容。
2.3.2绝对定位（absolute）
这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果。
在图2-1的基础上，对box2进行设置
#box2{background：#f36；height：100px；width：100px；position：absolute；left：30px；top：50px；}
保存预览如图2-3所示。
图2-1 图2-2图2-3
从前后两种状态可以看出，绝对定位的box2脱离了文档流后根据当前父元素（页面的左上角）进行移位，原来排在下面的box3 自动填补box2位移后留下的空间。需要注意的是绝对定位在选择参照物进行偏移时存在下列两种情况：1）如果不存在已定位的父元素，则以浏览器的页面边框，即body元素为参照物。2）以最近的已定位的父元素作为参照物。将父元素设定为相对定位，则它包含子块的绝对定位偏移将以它为参照物。
3结束语
css中常用的布局方式有浮动定位、相对定位、绝对定位。应用的时候一般是多种结合使用。在实际的布局过程中，用的最多的是相对定位与绝对定位相结合，即对整体框架或者外部容器使用相对定位，然后在内部使用精确定位页面元素的绝对定位方式[3]。另一种常见的定位方式是浮动定位和清除浮动相结合。只有理解并熟练掌握css的各种定位机制，才能随心所欲的进行web标准布局。
参考文献：
[1]曾顺.精通css+div:网页样式与布局[m].北京:人民邮电出版社,2012.

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