温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何解析两大DIV CSS定位应用

发布时间:2021-11-17 17:53:29 来源:亿速云 阅读:147 作者:柒染 栏目:web开发

这篇文章给大家介绍如何解析两大DIV CSS定位应用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

你对DIV CSS定位的概念是否熟悉,这里向大家描述一下绝对定位和相对定位的用法,在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点。

DIV CSS定位

和大家重点讨论一下DIV CSS定位之绝对定位和相对定位,在用DIV CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措。

绝对定位:

DIV CSS定位中绝对定位属性将是网虫们打开幸福之门的钥匙:

H4{position:absolute;left:100px;top:43px} 

这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。注意这里***设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。

左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。

你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图像、QUICKTIME电影等等。

相对定位:

DIV CSS定位中绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。DIV CSS定位中相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例:

I{position:relative;left:40px;top:10px} 

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。DIV CSS定位中相对定位单元出现在普通的静态定位单元的行间,定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位,则文字的显示位置将恢复正常。使用相对定位时要小心,否则容易将页面弄得非常乱。

除了DIV CSS定位中相对定位和绝对定位,你还可以使用static(静止)参数值。Static是position特性的缺省值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。也就是说,除了边距特性,或通过使用float特性来浮动单元可影响单元的定位外,其它均不可以。

关于如何解析两大DIV CSS定位应用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI