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

最新推荐文章于 2024-03-28 15:13:48 发布
原创 最新推荐文章于 2024-03-28 15:13:48 发布 · 3.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#absolute #百分比 #paddingbox

本文详细探讨了CSS中absolute定位时，元素宽高设定为百分比的依据，根据W3C规范，这个百分比是相对于其第一个非static祖先元素的padding box。通过实例验证，当祖先元素position设为relative时，百分比宽高以此为基准，而取消relative后，参考对象变为初始包含块。

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

文章目录

W3C定义

 据W3C文档，当子元素使用absolute定位时，宽高设定百分比的参考量是其第一个非static祖先元素的padding box宽高，即width/height + padding
在这里插入图片描述

验证

示例如下：
在这里插入图片描述

   <div class="container">
        <div class
最低0.47元/天 解锁文章

200万优质内容无限畅学
CSS绝对定位和相对定位的百分比计算以及宽高计算
qq_20243873的博客
08-18 2186
css定位设置百分比值的计算方式、绝对定位的宽高计算方式
面试官提问之CSS如何实现固定宽高比
11-21
由于垂直方向的内边距百分比是基于元素的宽度计算，我们可以将元素高度设置为0，然后通过`padding-bottom`来设定元素的宽高比。例如，要实现4:3的宽高比： ```css .wrapper { width: 40vw; } .intrinsic-aspect-...
绝对定位后元素的宽高如果用百分比表示的计算方法
weixin_30762087的博客
04-09 423
.big{ padding-right: 100px; padding-bottom: 100px; width: 0; height: 0; background: yellow; margin-top: 100px; margin-left: 100px;}.inner { width: 50%; height: 50%; background: black; } 正常情况下inn...
css中position为absolute时的宽高为百分比时的参考对象问题
weixin_30656145的博客
06-30 272
　　当position为absolue时候，其中的相对宽高是相对它参考的元素来进行计算并进行位置渲染的，并不是相对他的父元素。除了ie6-浏览器以外，ie6是相对于父元素进行宽高的计算，以上都只是宽高的计算参考不同，但是相对定位是的参考点还是position为非static的元素。如果父标签宽高为0则ie6继续上父级元素宽高，并且ie6无法同时设置bottom和top、left和right。 测...
Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
weixin_35598854的博客
06-15 420
一般元素在页面所占的空间包括：magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时，却是不同的结果。demo用如下小demo测试：.container{position: relative;margin: 100px auto;padding: 20px;height: 100px...
小技巧：absolute 元素的宽度问题
热门推荐
ISaiSai的专栏
05-11 2万+
当元素设置了  absolute  后，默认就不是100%的宽度了，而是内容多宽就是多宽 如果希望absolute 以后的元素依然和父容器一样是的100% 宽度 有两个方法： 1.直接设置 width:100% 2.设置left:0px   right:0px; demo如下： div style="width:1190px; height: 300px;
css position属性为absolute时其百分值的计算
12-14
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何相对于其周围环境定位。当`position`属性设置为`absolute`时，元素将脱离正常的文档流，并且其位置是相对于最近的一个非`static`定位的祖先元素...
css实现一个元素高度固定宽度按比例显示效果
09-22
通过设置`.video_box`的高度和子元素的宽高百分比，我们可以确保视频元素在任何屏幕尺寸下都能保持其原始的纵横比，从而提供良好的用户体验。这种方法在响应式设计中特别有用，可以确保在不同设备上内容的显示效果...
CSS常用样式简单的总结包括定位、显示等属性
12-13
- `width`和`height`属性用于设定元素的宽度和高度，可以通过设置百分比、像素等单位来精确控制。 - `clip`属性定义了元素的可视区域，`rect()`函数用于指定剪裁的四个边界，`auto`表示不剪裁。 - `overflow`属性...
CSS 如何将子元素宽度填充满父元素剩余宽度
最新发布
lth002的博客
03-28 1973
【代码】CSS 如何将子元素宽度填充满父元素剩余宽度。
元素absolute定位后，高宽如何计算?
风海生
07-23 2703
当元素absolute定位后，他的高宽默认为多少？ 如果不写width, height，他们的值都默认为0；   设置width: 100%;height:100%后，宽度会如何计算? 设置width: 100%; height: 100%; 后，他们的值会继承自它相对于定位的那个祖先元素     其本身的padding，margin还有用吗吗？ margin，padding仍然是有效...
编程语言详解css绝对定位对元素宽度的影响
10-29 1628
编程语言详解css绝对定位对元素宽度的影响 一、问题来源 自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度p#main并不是我理想中六张图片宽度的总和，原来是我没有显式设置这个容器p#main的宽度。但是问题来了，没有显式地设置容器宽度，大家可能就会
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
前端代码小白的日常博客
11-30 2956
在解释这个问题之前，首先了解position的五个元素定位类型。
css百分比定位和百分比尺寸
qq_26879821的博客
08-12 925
百分比尺寸 子元素没有设置定位或定位为relative，则是百分比尺寸是相对于其父元素 子元素设置了绝对定位，则百分比尺寸是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 百分比定位： 只有设置了定位的（relative,absolute,fixed）的元素才有left,top等属性。 子元素relative定位：百分比定位和百分比尺寸都是相对于父元素，无论父元素有没有定位 子元素absolute定位：百分比定位和百分比尺寸都是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 总结 可以按照有
absolute 元素的百分比宽高
ISaiSai的专栏
12-29 3067
absolute 元素的百分比宽高  是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body） 相对应的数值为  自身区域＋ padding 的区域总和 DEMO: style="width:100px;height: 0px;padding-bottom:100px;background-color: gray;position:
定位（定位模式和边偏移）
qq_52301431的博客
03-31 3028
定位 （1）为什么要定位？ 第一幅图：红色的小方块可以在图片上移动。 第二幅图：左右箭头可以切换图片 （3）头部悬浮不动 （2）元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分 边偏移 边偏移属性 描述 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 top 顶端偏移量，定义元素相对于其父元素上边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧.
css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例
lingliu0824的博客
09-20 4512
前端写样式时我们为了满足自适应通常会使用百分比来设置元素的宽高间距等，只有明确的知道设置百分比是相对哪个元素的哪个属性而言的才能正确的得到期望的效果。 说在前面，包含块的W3C解释 1.width:相对包含块（父元素）的width width定义为50%即为父元素宽度的50%，有时候我们可能会定义width为100%，但是发现实际上该元素的宽度是被其子元素的宽度撑大了，这时候就需要注意其父元素是不是设置了width,如果没有就会出现这种情况。 注意：如果设置宽度为百分比的元素同时设置了position:
fixed,absolute 布局使用width:100%超出屏幕宽度
qq_32255883的博客
04-10 976
在使用fixed,absolute 布局时，再使用width:100%，最终的实际宽度等于全屏宽度，若还有padding， 宽度再加上两边的pading值，设置margin值不影响其宽度。 这一点跟流中的元素表现有所不同。
absolute定位宽高尺寸继承
weixin_43926275的博客
06-10 2707
当需要设计元素叠加效果时，常常会用掉position:absolute属性。有经验的人告诉我们，使用position:absolute时，最好将其父元素设置成position:relative。那么如果没有设置会发生什么奇怪的事情呢？ <div class="parents"> <div class="children"> </div> </div> 创建两个div，为了便于区分，将父元素背景设置为黑色，子元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值