absolute 元素的百分比宽高

最新推荐文章于 2024-06-01 09:36:59 发布

ISaiSai

最新推荐文章于 2024-06-01 09:36:59 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/ISaiSai/article/details/50428777

CSS 专栏收录该内容

94 篇文章

订阅专栏

本文详细解释了HTML/CSS中绝对布局元素的百分比宽高是如何基于其最近的父级元素计算的，通过一个具体示例演示了如何设置元素的宽度、高度、边距等属性，并利用相对单位实现布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

absolute 元素的百分比宽高是相对于其最近的父级别的absolute／relative 元素来计算的（如没有则对body）

相对应的数值为自身区域＋ padding 的区域总和

DEMO:

<div style="width:100px;height: 0px;padding-bottom:100px;background-color: gray;position: relative;">
    <div style="position: absolute; background-color: yellow; width:100%;height: 100%;;"></div>
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ISaiSai

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS | absolute定位下宽高的百分比设定

MGsniper的博客

01-21

3216

根据W3C CSS2对CSS1的修改，当子元素使用absolute定位时，宽高设定百分比的参考值不是父元素内容块的宽高，而是父元素padding box的宽高，即内边距+内容块宽高 W3C文档原文如下 **注意：虽然此处的设定涉及到padding box，但目前padding box已基本废弃，目前为主流浏览器兼容的box-sizing只有content-box和border-box两种...

如何使元素宽高自适应并使宽高比保持不变

qq_40409571的博客

02-22

1339

背景：在我们开发的过程中，我们很经常有碰到这样的需求，要让某个dom元素随着窗口宽度/高度的变化自适应改变其宽度 / 高度，并且始终保持一个固定的宽高比。我们先看看最终的方案：padding-bottom实现普通元素固定宽高比。首先，我们先明确两个结论： 1.绝对定位元素的大小是由top、right、 bottom、 left四个属性决定的，这四个属性是相对于绝对定位元素的包含块来定位的。 2.垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的。下面我们通过借助padding-bott

参与评论您还未登录，请先登录后发表或查看评论

CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？

woke的博客

09-13

7908

直入主题： CSS定位的三种机制：一.普通流： position: static 元素框正常生成，默认设置。 position: relative 元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。二.绝对定位： position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元...

CSS定位-6.3绝对定位-position: absolute；--是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位--好好看6，7例子

qq_44280574的博客

09-01

845

1.什么是绝对定位（1.）是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位【好好理解这句话】即，【绝对定位，是相对于，已经定位的父元素进行定位的，就是，它会从它的父元素一点一点往上层去找，（如果它的父元素的定位属性是除了position:static 之外的其他的呢，它就以它的父元素作为参考点；如果它的父元素就是普普通通的static，那么它就继续往上找，如果都不是，就找到了body这一块，也

CSS——在css position 定位中， relative 和 absolute 的关系

weixin_63456913的博客

02-02

796

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。2、在父元素（也就是大盒子box）没有position属性时，子元素（红色盒子）是以屏幕为参照物进行位置的定位的；

【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效

前端代码小白的日常博客

11-30

2949

在解释这个问题之前，首先了解position的五个元素定位类型。

css样式中的百分比都是相对于谁的？

huangpb的博客

01-04

4095

1. 绝对定位的 top、left position: absolute; top: 50%; left: 50%; top 和 left 的百分比是分别根据它相对的祖先元素的高度和宽度来计算的。 2. 固定定位的 top、left position: fixed; top: 50%; left: 50%; top 和 left 的百分比是分别根据浏览器视口的高度和宽度来计算的。 3. translateY transform: translateY(-50%); translateY

元素的宽高设置为100%，元素的宽高百分比是参照谁的

07-10

当元素的宽高设置为100%时，它是相于其包含块的宽度来...需要注意的是，百分比宽高的计算可能会受到其他样式规则和盒模型的影响，如内边距、边框等。因此，在设置元素的宽高时，需要综合考虑其他样式规则和布局需求。

已知父元素宽高且所有父元素宽高皆为百分比，父元素宽高会根据屏幕大小变化宽高比例，css如何设置2个子元素使得每个子元素宽高相等为一个正方形，且2个正方形子元素的宽高都不会超过父元素的宽高，兼容所有浏览器，达到最大兼容适配

最新发布

12-11

在CSS中，为了实现这种布局，你可以使用相对单位如`vw`...在这个例子中，`.child`将会占据父元素宽度的一半，并保持与父元素的宽高比例一致，不会超出父元素的范围。这种方法兼容大多数现代浏览器，包括IE9及以上版本。

实现DOM等比例宽高

03-29

"实现DOM等比例宽高"这个话题主要关注如何让DOM元素在宽度改变时，高度能自动按比例调整，保持原有的纵横比，避免因宽高不匹配导致的元素变形。这个问题在处理图片、视频或自定义内容区域时尤其重要。首先，我们...

css position属性为absolute时其百分值的计算

12-14

当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的。首先我们必须知道： 1、[百分比的参照][1]：根据包含块计算百分值（1）元素的margin/padding/left/right/width参照包含块的width来计算；（2）要计算 height /top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0。 2、[确定包含块][2]：确定一个元

div：如何解决相对宽度和绝对宽度冲突

yunduanaoligei的博客

10-12

344

今天分享下”div：如何解决相对宽度和绝对宽度冲突“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。相对宽度和绝对宽度冲突时的div解决方法摘要：一般我们在使用绝对宽度时会使用px，相对宽度时会使用%，但是要是同时使用绝对宽度和相对宽度时该怎么办呢？我们通过一道例题来讲解今天的内容： 1.完成图片上的题目要求 2.尝试提供这样一种方案，使得宽度与屏幕等宽，布局大体与1类似，并且保证你无论怎么调整浏览器的宽度，都可

元素absolute定位后，高宽如何计算?

风海生

07-23

2703

当元素absolute定位后，他的高宽默认为多少？如果不写width, height，他们的值都默认为0；设置width: 100%;height:100%后，宽度会如何计算? 设置width: 100%; height: 100%; 后，他们的值会继承自它相对于定位的那个祖先元素其本身的padding，margin还有用吗吗？ margin，padding仍然是有效...

relative 和 absolute 元素的百分比定位

weixin_33693070的博客

06-14

694

有人住高楼，有人在深沟，有人光万丈，有人一身锈，世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。 ——电影《怦然心动》 relative/absolute 元素都支持 top/right/bottom/left 属性定位。 relative 元素是相对自身定位的；absolute 元素是相对于最近的 position 属性值不是 static（也就是 fixed, a...

position定位不设置left top 等值，以及position定位的百分比取值