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

最新推荐文章于 2024-06-01 09:36:59 发布
最新推荐文章于 2024-06-01 09:36:59 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： CSS2 文章标签： absolute 百分比 paddingbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36145914/article/details/86571324
版权

文章目录

W3C定义

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

验证

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

   <div class="
最低0.47元/天 解锁文章
MGsniper
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面试官提问之CSS如何实现固定宽高比
11-21
由于垂直方向的内边距百分比是基于元素的宽度计算，我们可以将元素高度设置为0，然后通过`padding-bottom`来设定元素的宽高比。例如，要实现4:3的宽高比： ```css .wrapper { width: 40vw; } .intrinsic-aspect-...
css position属性为absolute时其百分值的计算
12-14
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何相对于其周围环境定位。当`position`属性设置为`absolute`时，元素将脱离正常的文档流，并且其位置是相对于最近的一个非`static`定位的祖先元素...
小技巧：absolute 元素的宽度问题
热门推荐
ISaiSai的专栏
05-11 2万+
当元素设置了  absolute  后，默认就不是100%的宽度了，而是内容多宽就是多宽 如果希望absolute 以后的元素依然和父容器一样是的100% 宽度 有两个方法： 1.直接设置 width:100% 2.设置left:0px   right:0px; demo如下： div style="width:1190px; height: 300px;
绝对定位后元素的宽高如果用百分比表示的计算方法
weixin_30762087的博客
04-09 369
.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中绝对定位和百分比问题（CSS中的小细节）
最新发布
2301_79858914的博客
06-01 473
在 CSS 中，百分比高度的计算依赖于父元素的高度。如果父元素的高度不明确或由内容动态计算，子元素的百分比高度可能无法正确应用。使用绝对定位可以解决这个问题，因为绝对定位元素的百分比高度相对于最近的已定位祖先元素计算，而且是相对于最近的已定位祖先元素的实际高度（也就是由内容撑开的），即使已定位祖先元素没有显示设置height属性。显式设置父元素高度或使用 Flexbox 和 Grid 等现代布局技术也能有效解决这一问题。
css中position为absolute时的宽高为百分比时的参考对象问题
weixin_30656145的博客
06-30 223
　　当position为absolue时候，其中的相对宽高是相对它参考的元素来进行计算并进行位置渲染的，并不是相对他的父元素。除了ie6-浏览器以外，ie6是相对于父元素进行宽高的计算，以上都只是宽高的计算参考不同，但是相对定位是的参考点还是position为非static的元素。如果父标签宽高为0则ie6继续上父级元素宽高，并且ie6无法同时设置bottom和top、left和right。 测...
Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
weixin_35598854的博客
06-15 346
一般元素在页面所占的空间包括：magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时，却是不同的结果。demo用如下小demo测试：.container{position: relative;margin: 100px auto;padding: 20px;height: 100px...
元素absolute定位后，高宽如何计算?
风海生
07-23 2601
当元素absolute定位后，他的高宽默认为多少？ 如果不写width, height，他们的值都默认为0；   设置width: 100%;height:100%后，宽度会如何计算? 设置width: 100%; height: 100%; 后，他们的值会继承自它相对于定位的那个祖先元素     其本身的padding，margin还有用吗吗？ margin，padding仍然是有效...
编程语言详解css绝对定位对元素宽度的影响
10-29 1455
编程语言详解css绝对定位对元素宽度的影响 一、问题来源 自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度p#main并不是我理想中六张图片宽度的总和，原来是我没有显式设置这个容器p#main的宽度。但是问题来了，没有显式地设置容器宽度，大家可能就会
css实现一个元素高度固定宽度按比例显示效果
09-22
通过设置`.video_box`的高度和子元素的宽高百分比，我们可以确保视频元素在任何屏幕尺寸下都能保持其原始的纵横比，从而提供良好的用户体验。这种方法在响应式设计中特别有用，可以确保在不同设备上内容的显示效果...
CSS常用样式简单的总结包括定位、显示等属性
12-13
- `width`和`height`属性用于设定元素的宽度和高度，可以通过设置百分比、像素等单位来精确控制。 - `clip`属性定义了元素的可视区域，`rect()`函数用于指定剪裁的四个边界，`auto`表示不剪裁。 - `overflow`属性...
course_css样式_
10-02
定位（positioning）使我们能够精确控制元素在页面上的位置，如static、relative、absolute、fixed等。流体布局（responsive design）则利用百分比和媒体查询实现不同设备上的适配性。 此外，CSS3引入了许多新的...
css百分比定位和百分比尺寸
qq_26879821的博客
08-12 835
百分比尺寸 子元素没有设置定位或定位为relative，则是百分比尺寸是相对于其父元素 子元素设置了绝对定位，则百分比尺寸是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 百分比定位： 只有设置了定位的（relative,absolute,fixed）的元素才有left,top等属性。 子元素relative定位：百分比定位和百分比尺寸都是相对于父元素，无论父元素有没有定位 子元素absolute定位：百分比定位和百分比尺寸都是相对于最近的定位了的祖先元素，如果没有则相对于视窗。 总结 可以按照有
css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例
lingliu0824的博客
09-20 3361
前端写样式时我们为了满足自适应通常会使用百分比来设置元素的宽高间距等，只有明确的知道设置百分比是相对哪个元素的哪个属性而言的才能正确的得到期望的效果。 说在前面，包含块的W3C解释 1.width:相对包含块（父元素）的width width定义为50%即为父元素宽度的50%，有时候我们可能会定义width为100%，但是发现实际上该元素的宽度是被其子元素的宽度撑大了，这时候就需要注意其父元素是不是设置了width,如果没有就会出现这种情况。 注意：如果设置宽度为百分比的元素同时设置了position:
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
前端代码小白的日常博客
11-30 2485
在解释这个问题之前，首先了解position的五个元素定位类型。
fixed,absolute 布局使用width:100%超出屏幕宽度
qq_32255883的博客
04-10 774
在使用fixed,absolute 布局时，再使用width:100%，最终的实际宽度等于全屏宽度，若还有padding， 宽度再加上两边的pading值，设置margin值不影响其宽度。 这一点跟流中的元素表现有所不同。
absolute定位宽高尺寸继承
weixin_43926275的博客
06-10 2120
当需要设计元素叠加效果时，常常会用掉position:absolute属性。有经验的人告诉我们，使用position:absolute时，最好将其父元素设置成position:relative。那么如果没有设置会发生什么奇怪的事情呢？ <div class="parents"> <div class="children"> </div> </div> 创建两个div，为了便于区分，将父元素背景设置为黑色，子元素
absolute 元素的百分比宽高
ISaiSai的专栏
12-29 2935
absolute 元素的百分比宽高  是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body） 相对应的数值为  自身区域＋ padding 的区域总和 DEMO: style="width:100px;height: 0px;padding-bottom:100px;background-color: gray;position:
absolute和relative元素 设置百分比宽高的差异
qq_40194129的博客
09-26 1103
一般元素在页面所占的空间包括：magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时，却是不同的结果。 demo 　　用如下小demo测试： &lt;aside class="container"&gt; &lt;div class="test"&gt; ...
CSS样式的高级应用
07-17
在CSS中，我们可以使用position属性来设置元素的定位方式，常见的定位方式有相对定位、绝对定位和固定定位。相对定位是相对于元素在正常文档流中的位置进行偏移，可以通过top、right、bottom和left属性来控制偏移的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值