广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >DIV中absolute与relative属性如何使用
  • 948
分享到

DIV中absolute与relative属性如何使用

2024-04-02 19:04:59 948人浏览 薄情痞子
摘要

DIV中absolute与relative属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。DIV absolute与relati

DIV中absolute与relative属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

DIV absolute与relative简单用法

很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

Absolute,CSS中的写法是:position:absolute;他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

DIV中absolute与relative属性如何使用

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

Relative,CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

DIV中absolute与relative属性如何使用

关于DIV中absolute与relative属性如何使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网node.js频道了解更多相关知识。

--结束END--

本文标题: DIV中absolute与relative属性如何使用

本文链接: https://www.lsjlt.com/news/72763.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • DIV中absolute与relative属性如何使用
    DIV中absolute与relative属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。DIV absolute与relati...
    99+
    2022-10-19
  • CSS属性relative与absolute的作用是什么
    CSS属性relative和absolute用于控制元素的定位。relative:相对定位,元素的位置相对于其正常位置进行定位。使用...
    99+
    2023-09-22
    css
  • 如何理解CSS position属性中absolute和relative的应用
    这期内容当中小编将会给大家带来有关如何理解CSS position属性中absolute和relative的应用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望...
    99+
    2022-10-19
  • CSS 中如何使用absolute绝对定位属性
    CSS 中如何使用absolute绝对定位属性,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。CSS absolute属性设置为绝对定位的元...
    99+
    2022-10-19
  • DIV中Scroll属性如何使用
    DIV中Scroll属性如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。DIV Scroll属性DIV Scroll属性...
    99+
    2022-10-19
  • DIV中Layout属性如何使用
    这期内容当中小编将会给大家带来有关DIV中Layout属性如何使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。DIV布局(Layout)属性:在以前的HTML里,元素的...
    99+
    2022-10-19
  • DIV中如何使用布局属性
    DIV中如何使用布局属性,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。DIV绝对位置属性:绝对位置属性有四个属性:top、ri...
    99+
    2022-10-19
  • CSS如何使用relative属性实现相对定位
    这篇文章主要介绍“CSS如何使用relative属性实现相对定位”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS如何使用relative属性实现相对定位”文章能帮助大家解决问题。CSS rela...
    99+
    2023-07-04
  • CSS中怎么使用relative属性实现相对定位
    这期内容当中小编将会给大家带来有关CSS中怎么使用relative属性实现相对定位,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。CSS relative相对定位设置为相对...
    99+
    2022-10-19
  • css中怎么使用position absolute属性设置相对于父元素
    本篇文章为大家展示了css中怎么使用position absolute属性设置相对于父元素,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。有时候我们需要在父元素的容器内设置相对的绝对位置要做到这一点需...
    99+
    2023-06-08
  • DIV+CSS中min-height属性的使用方法
    这篇文章主要讲解了“DIV+CSS中min-height属性的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV+CSS中min-height属性...
    99+
    2022-10-19
  • 如何使用CSS的overflow属性防止float撑开div
    这篇文章主要介绍了如何使用CSS的overflow属性防止float撑开div,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。许多应征前端工程师的人,在面试时都会被问到这类fl...
    99+
    2023-06-08
  • css中怎么使用border属性与display属性
    这篇文章主要介绍css中怎么使用border属性与display属性,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css中如何使用border属性与display属性 bord...
    99+
    2022-10-19
  • 如何利用margin属性将一个div水平居中
    这篇文章主要介绍“如何利用margin属性将一个div水平居中”,在日常操作中,相信很多人在如何利用margin属性将一个div水平居中问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • 如何理解DIV中display和visibility属性差别
    如何理解DIV中display和visibility属性差别,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。向大家描述一下DIV中displ...
    99+
    2022-10-19
  • 如何使用CSS浮动属性实现DIV各种对齐
    这篇文章主要为大家展示了“如何使用CSS浮动属性实现DIV各种对齐”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS浮动属性实现DIV各种对齐”这篇文...
    99+
    2022-10-19
  • 怎么用CSS定位属性实现Html中DIV层叠与悬浮
    这篇文章主要介绍“怎么用CSS定位属性实现Html中DIV层叠与悬浮”,在日常操作中,相信很多人在怎么用CSS定位属性实现Html中DIV层叠与悬浮问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • 如何用Table-cell属性让div实现定位
    本篇内容介绍了“如何用Table-cell属性让div实现定位”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2022-10-19
  • 如何解决div style属性中设置其border无效
    这篇文章主要介绍“如何解决div style属性中设置其border无效”,在日常操作中,相信很多人在如何解决div style属性中设置其border无效问题上存在疑惑,小编查阅了各式资料,整理出简单好用...
    99+
    2022-10-19
  • 如何理解HTML5中的标准属性与自定义属性
    这篇文章将为大家详细讲解有关如何理解HTML5中的标准属性与自定义属性,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。正如 HTML5 语法中所阐述的,元素可...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作