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

最新推荐文章于 2023-10-25 10:00:41 发布
最新推荐文章于 2023-10-25 10:00:41 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20243873/article/details/126391989
版权

参考文章：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；从右到左按照个属性值布局
allencv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {    width: 100px;    height: 100px;    margin: 5 auto;    color: #fff;    background: #000; } .aa, .bb, .cc, .dd, .ee {    top: 10px;    left: 10px;    width: 10px;    height: 10px;    overflow: hidden;    background: #F90; } .b, .d, .e {positi
div+css相对定位和绝对定位用法实例详解
09-25
在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，下面的教程能让你更深入地了解CSS定位属性
CSS网页布局教程:绝对定位和相对定位
12-07
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！ 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。
css 相对定位 绝对定位 浮动 分析
09-25
W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
css中background-position:的属性值为百分比时的用法
kbx8916的博客
12-06 1231
如果定位用的是百分比话，算法比较特殊。我举个例子： background:#FFF url(image) no-repeat fixed 50% -30%; 这个时候图片应该在容器的什么位置呢,算法公式如下：  图片左顶点距容器左顶点的坐标位置为  x：（容器的宽度-图片的宽度）x 50%  y：（容器的高度-图片的高度）x（-30%）  得到的结果应用坐标
一看就懂，关于HTML5里面的定位 （position ）相对定位，绝对定位，固定定位 ，粘性定位；有图有对比 值得你的信赖（一个在千锋逆战班奋斗的年轻人）
vipdidi的博客
02-23 3076
*HTML5 定位## position:static(默认值)没有定位 position:relative(相对定位) position:absolute(绝对定位) Position:fixed(固定定位) position:sticky(粘性定位)（css3新增兼容不好） 作用 A.在正常情况下.可以让一个元素覆盖在另一个元素上面 B.可可以移动一个元素的位置 C.可以固定某个容器在浏览...
CSS流式布局（百分比布局）和圣杯布局
最新发布
weixin_69146952的博客
10-25 344
流式布局，就是百分比布局，也称非固定像素布局，是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度。通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。给父元素设置相对定位，左侧和右侧设置绝对定位，值为0，父元素的左右侧padding值为相应的宽度值。给左侧设置浮动：float：left，右侧设置超出隐藏：overflow：hidden。给父元素设置相对定位，左侧padding值设置为他的宽度值，左侧绝对定位，值为0。2.使用position定位实现。
CSS相对定位和绝对定位使用百分比的计算逻辑
山水好风光的博客
03-17 2170
需求 页面需要实现自适应布局，因此使用百分比计算 测试 页面主要使用相对定位和绝对定位，主要从这2方面进行比对测试 相对定位 <style> html, body { margin: 0; padding: 0; } #wrapper{ width: 1000px; height: 1000px; border: 1px solid green; position: relative; }
css中涉及到的百分比
Kratial的博客
10-09 3039
css中涉及到的百分比
设置了fixed之后，height:100%可以生效
憧憬，思考，奋斗，飞翔
05-22 559
设置了fixed之后，height:100%可以生效
css height %百分比不生效的解决办法
weixin_44383533的博客
03-06 875
如果父亲盒子没有 relative香对定位 那么会逐层想上查找直到 html/body 再根据html的高度进行计算（我们可以利用绝对定位/相对定位来 跳跃父层关系 ）flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。可以看到 son的高度沾满了半块屏幕 这是因为 absolute定为都是根据拥有relative的高度宽度计算的。如下图所示 father根据html的10%的高度 而son又根据father的50%的高度。
CSS的单位及css3的calc()及line-height百分比
hsany330的专栏
08-07 857
说在前面的话 阳历2014年已经离我们远去，2015年接踵而来。祝大家新年快乐！在新的一年，我将有新的蜕变！这是2015年的第一篇文章，写一篇关于css的单位的文章吧！ 单位介绍 说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的
css定位的百分比的算法,关于css position定位 top百分比的问题
weixin_34207925的博客
08-03 376
css设置绝对定位后 top,bottom,设置百分比定位是按父元素的高度来计算的，同样left,right,设置百分比定位是按父元素的宽度度来计算的.box{ background: #66E6FF; width: 100%; height:400px; position: relative; margin: 0 auto; }.pox{ background: #f0f; width:100...
CSS_定位_宽高自适应下
ysj94s7的博客
01-13 1755
和宽高自适应下 1.定位的基础属性，属性值 2.定位的特殊情况 1）绝对定位在兄弟关系中的演示效果 都添加定位（兄弟元素）====相对，绝对，固定 默认的是后面的把前面的遮盖住===产生效果===层级效果 如何调整层级顺序呢： z-index属性 取值为纯数值，不带任何的单位，只...
css布局之高度自适应
weixin_43743956的博客
01-05 483
方法一：利用绝对定位 一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的。 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;met
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1292
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
前端代码小白的日常博客
11-30 2371
在解释这个问题之前，首先了解position的五个元素定位类型。
CSS中背景图像定位中的百分数
2301_76222589的博客
01-13 192
CSS中背景图像定位中的百分数
css top 定位百分比,position定位，设置top为百分数，如何计算？
weixin_33398033的博客
08-03 994
position定位分别设置为relative,absolute。top,left都设置为100%,理论上说100%应该根据包含快的宽度计算，但实际上的计算值却不同。htmlcss.z1{position: relative;width: 400px;height: 400px;padding: 5px 10px;color: #fff;text-align: right;background: ...
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、付费专栏及课程。

余额充值