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

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

参考文章：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元素，而是当前视口，这一点很容易弄错

二、绝对定

最低0.47元/天 解锁文章
allencv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1318
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
CSS中绝对定位和百分比问题（CSS中的小细节）
最新发布
2301_79858914的博客
06-01 487
在 CSS 中，百分比高度的计算依赖于父元素的高度。如果父元素的高度不明确或由内容动态计算，子元素的百分比高度可能无法正确应用。使用绝对定位可以解决这个问题，因为绝对定位元素的百分比高度相对于最近的已定位祖先元素计算，而且是相对于最近的已定位祖先元素的实际高度（也就是由内容撑开的），即使已定位祖先元素没有显示设置height属性。显式设置父元素高度或使用 Flexbox 和 Grid 等现代布局技术也能有效解决这一问题。
css定位中的百分比
weixin_30532987的博客
05-26 276
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？ 一、margin，padding的百分比 首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，...
CSS背景图片精确定位
剑胆琴心-.Net 学习笔记
09-17 1448
 大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用background-position: 50% 20px;之所以不使用background-position: center 20px;是因为类似这种
绝对定位元素的百分比margin
weixin_33898233的博客
09-06 382
绝对定位元素的百分比margin是相对于第一个定位元素祖先元素（relative/absolute/fixed）的宽度（width）计算的 橙色的宽度（width）为1000px， 蓝色的宽度（width）为600px， img的margin为10%， margin-left等于1000*10%， margin-top等于1000*10%。 这时图片的margin值只与第一个定位元素的...
CSS相对定位和绝对定位使用百分比的计算逻辑
山水好风光的博客
03-17 2285
需求 页面需要实现自适应布局，因此使用百分比计算 测试 页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试 相对定位 <style> html, body { margin: 0; padding: 0; } #wrapper{ width: 1000px; height: 1000px; border: 1px solid green; position: relative; }
HTML+css基础入门学习教程之CSS 相对定位
01-20
CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里，我们将主要探讨相对定位，它是初学者必须掌握的基础概念。 相对定位（Relative Positioning）是一种允许元素在原有位置基础上进行偏移的定位...
CSS网页设计：百分比进行背景图片定位
09-27
总的来说，掌握百分比定位在CSS中的应用对于提升网页设计的动态性和适应性至关重要。它可以实现精确的居中、自适应的偏移，甚至复杂的布局效果。通过熟练运用这一技巧，开发者可以创造出更具吸引力且适应各种屏幕...
彻底掌握CSS中的percentage百分比值使用
12-13
在示例中，`#box`是相对定位，`#can`是绝对定位，其宽高是`#box`宽高的50%，但当`#can`改为`position: fixed;`，它的父元素就变成了视口，其宽高变为视口的50%。 3. 浮动（float）：元素向左或向右浮动，不影响其他...
面试官提问之CSS如何实现固定宽高比
11-21
对于可替换元素，如`<img>`或`<video>`，它们本身具有像素宽度和高度，因此实现固定宽高比相对简单。例如，我们可以通过设置宽度（或高度）并让另一侧自动调整来保持比例。以下是一个图片例子： ```css .img-...
XML应用开发（软件品牌）-1期 4.10 课堂实践-使用CSS布局属性显示XML文档-元素定位和元素大小.doc
07-13
1. **CSS绝对定位与相对定位**： - **绝对定位**：通过`position: absolute;`，元素将相对于最近的非静态定位祖先元素（即设置了`position`属性且值不为`static`的元素）进行定位。可以使用`top`, `bottom`, `left`...
CSS进阶——绝对定位元素的宽高是如何定义的
weixin_33709609的博客
06-05 831
先抛两个小问题： 绝对定位相对于谁来定位？ 大多数人都知道是相对于最近的position设置为relative/absolute/fixed的父元素来定位。那如果所有父元素的position都没有设置上面三个值，那又是相对谁来定位呢？ 包含块是什么？初始包含块又是什么？ 元素A包含元素B，A设置position:relat...
用百分比加 相对定位，绝对定位，布局PC端实现屏幕自适应
chose_DoIt的博客
05-23 2784
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 205
CSS中背景图像定位中的百分数
绝对定位元素与非绝对定位元素的百分比计算的区别？
weixin_47450807的博客
04-08 324
一、写在前面 绝对定位中使用百分比，和非绝对定位使用百分比，之间存在区别，一个是针对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-定位算法
奶茶控
07-30 374
CSS-定位前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impor
CSS 定位详解
weixin_51341611的博客
03-21 310
display和position。display属性指定网页的布局。和。本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。本文由国内最大的在线教育平台之一赞助。他们现在启动了，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。
html如何用百分比绝对定位,CSS相对定位和绝对定位使用百分比的计算逻辑
weixin_35097945的博客
06-08 1228
需求页面需要实现自适应布局，因此使用百分比计算测试页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试相对定位html, body {margin: 0;padding: 0;}#wrapper{width: 1000px;height: 1000px;border: 1px solid green;position: relative;}#middle{width: 600px;heig...
css绝对定位和相对定位
08-29
### 回答1： CSS中的绝对定位和相对定位是用于控制元素位置的两种常用方法。它们的区别如下： 1. 相对定位 相对定位是指相对于元素原本所在的位置进行定位。它通过使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如，我们可以使用以下代码将一个元素相对于其原本的位置向下移动20个像素： ```css position: relative; top: 20px; ``` 2. 绝对定位 绝对定位是指相对于最近的已定位祖先元素（即指定了 `position` 属性且不为 `static` 的元素）进行定位。如果没有已定位的祖先元素，则相对于文档的 `body` 元素进行定位。和相对定位一样，我们可以使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如，我们可以使用以下代码将一个元素相对于其最近的已定位祖先元素向右移动50个像素： ```css position: absolute; right: 50px; ``` 总的来说，相对定位和绝对定位都是用于控制元素位置的方法，但它们的定位方式有所不同。相对定位是相对于元素原本的位置进行定位，而绝对定位是相对于最近的已定位祖先元素进行定位。 ### 回答2： CSS绝对定位和相对定位是一种CSS布局技术，用于控制元素在网页中的位置。 相对定位是相对于元素原来所在的位置进行定位。通过将元素的position属性设置为relative，元素将会相对于自己原来所在的位置进行移动，移动后的位置由top、right、bottom和left属性来控制。相对定位不会改变文档流中其他元素的位置，所以当一个元素被相对定位后，其他元素仍然按照原来的顺序和位置排列。 绝对定位则是相对于最近的非静态定位的祖先元素（如果不存在则相对于文档的body元素）进行定位。通过将元素的position属性设置为absolute，元素将会脱离文档流，不再占据原来的位置。绝对定位的位置也是由top、right、bottom和left属性来控制。绝对定位会改变其他元素的位置，当一个元素被绝对定位后，其他元素会填补改元素脱离文档流后的空白区域。 相对定位和绝对定位的特点和用途不同。相对定位用于微调元素的位置，通常与其他定位方式（如静态定位或浮动定位）一起使用，达到更灵活的布局效果。绝对定位则更适合创建自定义的布局，可以把元素摆放在页面的任何位置。无论是相对定位还是绝对定位，都可以通过配合使用z-index属性来调整元素的层次顺序，实现不同元素的遮盖效果。 综上所述，CSS绝对定位和相对定位都是布局技术，使用不同的定位原点来实现元素的定位，相对定位相对于元素原来的位置进行定位，而绝对定位则相对于最近的非静态定位的祖先元素进行定位。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值