CSS绝对定位和相对定位的百分比计算以及宽高计算

最新推荐文章于 2024-06-01 09:36:59 发布
最新推荐文章于 2024-06-01 09:36:59 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20243873/article/details/126391989
版权
本文探讨CSS中绝对定位和相对定位时，top、right、bottom、left的百分比计算，以及绝对定位元素的宽高如何定义。相对定位依据父元素计算，而绝对定位取决于最近具有定位属性的祖先元素。绝对定位元素的宽度计算，若超过包含块宽度，right值将被忽略。

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

参考文章：relative 和 absolute 元素的百分比定位、CSS进阶——绝对定位元素的宽高是如何定义的

一、设置top、right、bottom、left的值为百分比

如果没有设置top、right、bottom、left，他们默认值是auto，默认是在静态位置

  1. 相对定位relative
    相对定位是按照父盒子的content-box进行计算，不论父盒子是否设置定位，子盒子都按照父盒子content-box来计算
  2. 绝对定位absolute
    绝对定位是按照父盒子的padding-box进行计算，绝对定位元素的包含块是由其最近的position属性设置为relative、absolute或fixed的祖先元素，如果绝对定位元素的所有祖先元素的position属性都没有设置relative、absolute或fixed，则其包含块为初始包含块。

初始包含块不是html元素，也不是body元素，而是当前视口，这一点很容易弄错

二、绝对定位元素宽高计算

以宽度为例，高度同理

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block
left、width、right默认值是auto，margin-left、margin-right默认值是0
如果设置了计算出来的值大于了包含块的宽度，则right被忽略。具体规则参考如下：

1表示设置得有具体值

leftwidthright布局
111① 如果margin-left和margin-right都为auto，此时二者相等，则按照上述方程计算出对应的margin值；如果此时计算出来的margin值为负值，则设置margin-left为0，然后根据方程再计算出margin-right的值。
② 如果margin-left、margin-right中有一个为auto，则按照方程计算出这个值；
③ 如果margin-left、margin-right都设置了值，且导致方程左右不相等，则忽略right值。
autoautoauto把margin-left和margin-right为auto的设置为0；把left设置为静态位置的left值；宽度自适应：margin-right边缘最远到right为0的位置（如果margin-right为0，则取border-right边缘，如果border-right-width也为0，则取padding-right边缘，下同
1autoauto把margin-left和margin-right为auto的设置为0；宽度自适应：margin-right边缘最远到right为0的位置
1autoauto把margin-left和margin-right为auto的设置为0；宽度自适应：margin-right边缘最远到right为0的位置
autoauto1把margin-left和margin-right为auto的设置为0；宽度自适应：margin-left边缘最远到left为0的位置
auto1auto把margin-left和margin-right为auto的设置为0；把left设置为静态位置的left值；
11auto把margin-left和margin-right为auto的设置为0；从左至右按照各属性值布局
auto11把margin-left和margin-right为auto的设置为0；从右到左按照个属性值布局
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1444
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
绝对定位元素与非绝对定位元素的百分比计算的区别？
weixin_47450807的博客
04-08 392
一、写在前面 绝对定位中使用百分比，和非绝对定位使用百分比，之间存在区别，一个是针对padding box，另一个是针对content box。 二、详细解释 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
css定位中的百分比
weixin_30532987的博客
05-26 317
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？ 一、margin，padding的百分比 首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，...
CSS中绝对定位和百分比问题（CSS中的小细节）
最新发布
2301_79858914的博客
06-01 700
在 CSS 中，百分比高度的计算依赖于父元素的高度。如果父元素的高度不明确或由内容动态计算，子元素的百分比高度可能无法正确应用。使用绝对定位可以解决这个问题，因为绝对定位元素的百分比高度相对于最近的已定位祖先元素计算，而且是相对于最近的已定位祖先元素的实际高度（也就是由内容撑开的），即使已定位祖先元素没有显示设置height属性。显式设置父元素高度或使用 Flexbox 和 Grid 等现代布局技术也能有效解决这一问题。
CSS背景图片精确定位
剑胆琴心-.Net 学习笔记
09-17 1509
 大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用background-position: 50% 20px;之所以不使用background-position: center 20px;是因为类似这种
绝对定位元素的百分比margin
weixin_33898233的博客
09-06 418
绝对定位元素的百分比margin是相对于第一个定位元素祖先元素（relative/absolute/fixed）的宽度（width）计算的 橙色的宽度（width）为1000px， 蓝色的宽度（width）为600px， img的margin为10%， margin-left等于1000*10%， margin-top等于1000*10%。 这时图片的margin值只与第一个定位元素的...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上正常显示其定位位置。 首先，我们需要了解常见电脑的分辨率。笔记本电脑通常具有1366*768的分辨率，而台式机则可能为1920*1080或更高。不同分辨率...
HTML+css基础入门学习教程之CSS 相对定位
01-20
CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里，我们将主要探讨相对定位，它是初学者必须掌握的基础概念。 相对定位（Relative Positioning）是一种允许元素在原有位置基础上进行偏移的定位...
CSS网页设计：百分比进行背景图片定位
09-27
总的来说，掌握百分比定位在CSS中的应用对于提升网页设计的动态性和适应性至关重要。它可以实现精确的居中、自适应的偏移，甚至复杂的布局效果。通过熟练运用这一技巧，开发者可以创造出更具吸引力且适应各种屏幕...
CSS相对定位和绝对定位使用百分比的计算逻辑
山水好风光的博客
03-17 2599
需求 页面需要实现自适应布局，因此使用百分比计算 测试 页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试 相对定位 <style> html, body { margin: 0; padding: 0; } #wrapper{ width: 1000px; height: 1000px; border: 1px solid green; position: relative; }
CSS进阶——绝对定位元素的宽高是如何定义的
weixin_33709609的博客
06-05 909
先抛两个小问题： 绝对定位相对于谁来定位？ 大多数人都知道是相对于最近的position设置为relative/absolute/fixed的父元素来定位。那如果所有父元素的position都没有设置上面三个值，那又是相对谁来定位呢？ 包含块是什么？初始包含块又是什么？ 元素A包含元素B，A设置position:relat...
CSS | absolute定位下宽高的百分比设定
MGsniper的博客
01-21 3207
 根据W3C CSS2对CSS1的修改，当子元素使用absolute定位时，宽高设定百分比的参考值不是父元素内容块的宽高，而是父元素padding box的宽高，即内边距+内容块宽高  W3C文档原文如下  **注意：  虽然此处的设定涉及到padding box，但目前padding box已基本废弃，目前为主流浏览器兼容的box-sizing只有content-box和border-box两种...
用百分比加 相对定位，绝对定位，布局PC端实现屏幕自适应
chose_DoIt的博客
05-23 2897
1.用百分比加 相对定位，绝对定位，布局PC端，能最高程度达到自适应 2.最外层用一个DIV container作为 最外层，用相对定位position reletive ，width 100 内部用一个DIV content作为内容容器，用绝对定位 position absolute bottom 0 top 0 left 0 right 0 width 100 heigh...
CSS中背景图像定位中的百分数
2301_76222589的博客
01-13 275
CSS中背景图像定位中的百分数
CSS元素宽高与定位之百分比数值的使用
ph の BLOG
04-29 1237
CSS样式表的宽高与定位 1.父是块级元素div，子也是块级元素div 1.1当父元素的宽高均为固定px，此时子元素宽高百分比相对于其父div <div id="father"> <div class="child"> </div> </div> 考虑以上结构 <style> body { margin: 0...
CSS-定位算法
奶茶控
07-30 670
CSS-定位前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impor
CSS 定位详解
weixin_51341611的博客
03-21 412
display和position。display属性指定网页的布局。和。本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。本文由国内最大的在线教育平台之一赞助。他们现在启动了，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。
html如何用百分比绝对定位,CSS相对定位和绝对定位使用百分比的计算逻辑
weixin_35097945的博客
06-08 1315
需求页面需要实现自适应布局，因此使用百分比计算测试页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试相对定位html, body {margin: 0;padding: 0;}#wrapper{width: 1000px;height: 1000px;border: 1px solid green;position: relative;}#middle{width: 600px;heig...
css样式中的百分比都是相对于谁的？
huangpb的博客
01-04 4043
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值