下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、绝对定位和相对定位(absolute与relative)绝对定位和相对定位很多朋友问absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRB
2、L,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。 一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。Relative,CSS中的写法是:position:relative; 他的意思是相对定位,他是参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元
3、素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。 有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。如何使DIV层水平居中问题的一点解释之前解决层居中的方法是先用div套一层,将text-align设为center,然后里面层的margin-left和margin-right设为auto,即可居中。body text-align: center; div margin-right: auto; margin-left: auto; 无意中发现text-align的设置在这里
4、是没有作用的,text-align只对inline element(内联元素的解释请参阅前一篇)起作用,在这里只需要将margin-left和margin-right设置成auto,并且给要居中的层的width赋一个确定的值就可以达到居中的效果。div margin-right: auto; margin-left: auto;width:200px; 下面分情况分析:全部都设为具体值,则margin-right被自动设为auto以满足条件方式 当它们之中只有一个被设为auto时:比如margin-left:auto; margin-right:100px; width:100px; ,这时margin-left会被拉伸至满足条件,其它类似当有两个被设为auto时:(a)如果是两个margin被设为auto,则margin-left与margin-right长度相同,这就产生了居中的效果; (b)如果width和某一个margin设为auto,则这个ma
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 手机买卖合同模板格式模板
- 耐克赞助合同模板
- 单体药店转让货品合同模板
- 2024南平市商品房买卖合同备案信息表
- 2024一次性现场劳务服务合同
- 经销商冬储合同模板
- 古建亭子拆除安装合同模板
- 酒店水电维修工程合同范本
- 学校购买扫把杂物合同范本
- 苏教版二年级下册脱式计算题100道及答案
- 中班语言活动《秋姑娘》
- 《疫苗管理法》法律法规解读课件
- 货车租赁协议常模板(2篇)
- 高水平电子商务专业群建设方案
- 2023年04月重庆市铜梁区度公开遴选(选聘)工作人员笔试参考题库含答案解析
- 科学教师职称评审说课稿模板
- 施工临时用电配电箱标准做法
- 初中语文-朱子家训教学设计学情分析教材分析课后反思
- 临床重点专科人才培养和人才梯队建设规划
- 《上海市奉贤区小区机动车停放管理工作调查报告》4300字
- 城乡居民大病保险理赔实务和操作流程
评论
0/150
提交评论