如何解析两大DIVCSS定位应用

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

创新互联公司主要从事网站设计、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务东湖,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

你对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定位应用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

当前标题:如何解析两大DIVCSS定位应用
网页地址:https://www.cdcxhl.com/article8/pppiip.html

成都网站建设公司_创新互联,为您提供域名注册响应式网站标签优化虚拟主机网页设计公司

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设