欢迎来到天天文库
浏览记录
ID:52474339
大小:1022.91 KB
页数:3页
时间:2020-03-28
《Position属性在CSS布局中的应用.pdf》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、跨木棣镝·应用技术与研究Position属性在CSS布局中的应用蒋昀昕(福建卫生职业技术学院公共基础部,福建福州350101)[摘要]本文在基于盒子模型的基础上简单介绍了css布局概念,对比分析了css中Position属性的四个属性值,并通过具体的网页布局实例进一步说明Position属性中的绝对定位和相对定位在CSS布局中的应用。[关键词]CSS布局;定位;盒子模型;标准文档流中图分类号:TP393.092文献标识码:A文章编号:1008.6609(2016)10—0058-031引言随着Web技术的不断发展,如何设计和布局网页以使
2、网站能更好地运行,逐渐成为网站设计开发人员广泛关注的话题。常用的网页布局方法主要有三种:表格布局、CSS布局、框架布局。本文在基于CSS盒模型布局的基础上,阐述了Position属性的概念,并通过具体的网页布局实例说明如何利用定位属性进行页面布局。2CSS布局简介CSS的布局排版是一种新的排版理念,完全有别于传统的排版习惯。首先它将页面从整体上进行
3、格布局的时候,在设计的最开始阶段,就要确定页面的布局形式。由于使用表格来进行布局,一旦确定下来就无法再更改了,因此有极大的缺陷。使用CSS布局则完全不同,设计者首先考虑的不是如何分割网页,而是从网页内容的逻辑关系出发,区分出内容的层次和重要性。然后根据逻辑关系,把网页的内容使用div或其它适当的HTML标记组织好,再考虑网页的形式如何与内容相适应。盒子模型是CSS布局页面时一个很重要的概念。在使用CSS布局时,所有页面中的元素都看成是一个盒子,占据着一定的页面空间。一个页面由很多这样的盒子组成,如何定位这些盒子是CSS布局的一个重点。C
4、SS布局的核心是Position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素或者另一个元素甚至浏览器窗口本身的位置。3Position属性概念Position属性的含义是用来指定页面中块的位置,即块相对于其父块的位置和相对于它自身应该在的位置。该属性有4个值:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。Static是属性的默认值,也就是该盒子按照标准流进行布
5、局。(1)静态定位:在静态定位情况下,每个元素都处在常规文档流中[21。如图I所示,这是一个简单标准流方式的两层盒子。父层中包含两个子层,所有的块级元素都是静态定位。在默认的静态定位下,块级元素在页面中自上而下堆叠起来。要想突破静态定位提供的这种按顺序布局元素的方式,必须把盒子的Position属性设置为其它三个值。媾。8洱1鳓豳豳隧霾蕊霪豳圈暖麓黧图圈圜氍圈霹图l静态定位(2)相对定位:使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。使用相对定位时,除了将Position属性设置为
6、relative之外,还需要指定一定的偏移量,可以通过left、right、top以及bottom四个方向来设定。如图2所示,将Box一1设置为相对定位,同时设置上、左偏移量为30px。与前面静态定位的图相比,Box.1的位置以自身为基准向上和向左各偏移了30px,而Box.2的位置没有任何变化,好像Box.1还在作者简介:蒋昀昕(1984一),女,安徽合肥人,硕士,讲师,研究方向为优化算法。.58.嗨苯探辅·应用技术与研究原来位置上。所以,使用相对定位的盒子,会相对于它在原本的位置,通过偏移指定的距离,到达新的位置,并且对父级盒子和兄
7、弟盒子都没有影响。图2相对定位(3)绝对定位:使用相对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如图3所示,左图的父级元素定位属性设置为relative,Box..2偏移量设置为向上、向右偏移各30px。因此,Box.2以父级元素为基准,从左上角开始向下和向左各移动30px。右图的父级元素定位属性为static,Box.2偏移量设置为上、右偏移为0,此时Box-.2以浏览器窗口作为定位基准。所以,绝对定位的块级元素,如果没有已经定位的祖先元素,则以浏览器窗口为基准定位。“已经定位”指的是Position属性
8、被设置为除了static以外的任意一种方式,那么该元素就被定义为已经定位的元素。“最近”是指在一个节点的所有祖先节点中,找出所有“已经定位”的元素中距离该节点最近的一个节点。绝对定位的盒子从标准流中脱离,这
此文档下载收益归作者所有