关于一些CSS中改变元素位置的属性的百分比参考对象的总结

最新推荐文章于 2022-10-09 17:27:29 发布
VIP文章 最新推荐文章于 2022-10-09 17:27:29 发布
阅读量311 收藏 1
点赞数 1
分类专栏： 布局样式 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43408077/article/details/119549797
版权

1.写在前面

在写页面CSS过程中不可避免的需要写到一些改变元素位置的属性，例如改变元素外边距、内边距，改变定位元素的偏移等，当这些元素属性设置为一个绝对的数值时，你当然知道它会移动一个绝对的数值的位置；然而当其设置为百分比值时，你是否会思考：这个百分比值是相对于其包含块的大小还是相对于元素自身的大小呢？

本文就一些常用改变元素位置的属性的百分比参考对象给出总结。

2.参考对象

2.1 定位属性
  • top
  • right
  • bottom
  • left

top、left、right、bottom是定位元素属性，非定位元素设置此属性无效。

其中 top、bottom 属性MDN参考如下：
20210808_CSS参考对象1.png

其中 left、right 属性MDN参考如下：
20210808_CSS参考元素2.png

根据图中第四点可知，top、left、right、bottom定位元素属性的百分比值参考对象为其包含块(containing block)的大小，对于 top 和 bottom，相对于包含块的 clientHeight；对于 right 和 leftÿ

最低0.47元/天 解锁文章
背影、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 之 百分比（%）样式属性
weixin_45092437的博客
02-27 3282
​ 这篇博客主要是整理一下，CSS中所有可以使用 % 作为属性值的样式属性，并说明他们的基数取决于什么，有些样式属性的 % 取决于元素本身的属性，有些元素样式的 % 取决于其父元素的属性。整理的可能有遗漏，欢迎大家留言补充。 一、取决于父元素 1、height ​ 如果给子元素的height属性设置为 % ，则其基数取决于父元素的height属性。 2、width ​ 如果给子元素的width属性设置为 % ，则其基数取决于父元素的width属性。 3、padding ​ 如果给子元素的paddin
html+left属性,HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的...
weixin_27729671的博客
06-04 601
本篇教程介绍了HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？top、left是基于父元素的：.parent{position:relative;backgrou...
css中涉及到的百分比
Kratial的博客
10-09 3054
css中涉及到的百分比
css top 定位百分比,position定位，设置top为百分数，如何计算？
weixin_33398033的博客
08-03 997
position定位分别设置为relative,absolute。top,left都设置为100%,理论上说100%应该根据包含快的宽度计算，但实际上的计算值却不同。htmlcss.z1{position: relative;width: 400px;height: 400px;padding: 5px 10px;color: #fff;text-align: right;background: ...
position定位不设置left top 等值，以及position定位的百分比取值
热门推荐
JiM-W 的博客
01-09 1万+
子元素position 定位 百分比问题 基准 父元素是否定位
浅析CSS 属性之中经常出现的百分比
12-13
CSS 的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准，在此整理下： 百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-...
JavaScript改变HTML元素的样式改变CSS及元素属性
10-26
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
CSS clip元素rect属性中各个参数的含义示例介绍
12-01
clip 属性剪裁绝对定位元素 当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 说明： 这个属性用于定义一个剪裁矩形。对于一...
通过设置CSS中的position属性来固定层的位置
09-03
position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置，感兴趣的朋友一起学习吧
CSS中 height/width取值为百分比时参考值 以及 padding/margin(内外边距)设置为百分比时的参考值
qq_37899792的博客
10-22 1458
宽高取值为百分比时的参考值 width 是 基于父元素的 width 计算的值 height 是基于父元素的 height 计算的值 内外边距取值为百分比时的参考值 margin(四个方向：top，right，bottom，left )以及padding(四个方向：top，right，bottom，left )设置的值为百分比的时候， 是相对于最近的父级块级元素的width。 ...
margin之百分比（二）
不怕不聪明，只怕聪明的人比我努力
05-08 647
你可能从没注意过它 在 margin系列之keyword auto 中，说过了 margin 值为 auto 的情况，这次要聊的是值为百分比的情形。 我必须承认这是一个非常基础的知识点，但有一段时间我发现很多人对此有错误的认知。偶尔在面试或者分享的时候，我会问到这个问题，有人会脱口而出的告诉我他对此的感性理解。 或许现在大多数人对此不屑一顾，但我仍想说一说，这样以后就可以不再问类似的问题了。
前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?
sdasadasds的博客
07-28 612
我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...
CSS学习之[定位]
ByeBye(野蛮生长)
04-22 243
定位(position) 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。要爱上它，它可以让我们工作更加轻松。 为什么要用定位 那么定位，最常运用的场景再那里呢？ 小黄色块可以再图片上移动 元素的定位属性 元素的定位属性主要...
abaqus
laughing_heart的博客
07-16 4212
一、特征长度 有两种解释： 定义一：The definition of the characteristic length is based on the element geometry: for beams and trusses we use the integration point length; for shell and planar elements we use the square root of the integration point area; for solid element
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1295
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
css里面的位置属性,CSS中常见的位置(position)属性
weixin_35786759的博客
08-04 138
BZOJ 1692&colon; &lbrack;Usaco2007 Dec&rsqb;队列变换 &lbrack;后缀数组 贪心&rsqb;1692: [Usaco2007 Dec]队列变换 Time Limit:5 SecMemory Limit:64 MBSubmit:1383Solved:582[Submit][St ...XCode日...
CSS的三种定位机制。绝对定位是相对谁？设置百分属性时是相对谁？
woke的博客
09-13 7753
直入主题： CSS定位的三种机制： 一.普通流： position: static 元素框正常生成，默认设置。 position: relative 元素相对于它本来的位置，注意：移动后，在原来的位置会占用一个相同大小的空间。 二.绝对定位： position：absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元...
CSS元素宽高与定位之百分比数值的使用
ph の BLOG
04-29 1155
CSS样式表的宽高与定位 1.父是块级元素div，子也是块级元素div 1.1当父元素的宽高均为固定px，此时子元素宽高百分比相对于其父div <div id="father"> <div class="child"> </div> </div> 考虑以上结构 <style> body { margin: 0...
CSS中position的百分比表示法及绝对定位居中
wayne0902的博客
06-21 1万+
设置了定位position: absolute的盒子，将top设为0%，盒子顶部将会紧挨着父元素（已定位）的顶部，若设为100%，则盒子顶部将会紧挨着父元素底部。 计算公式为：top_percent = 子盒子顶部距父盒子顶部的距离 / 父盒子高度由此可以理解：.element { width: 200px; height: 100px; position: absolut
css中的anim属性可以用来创建动画吗
最新发布
06-09
是的，CSS 中的 `animation` 属性可以用来创建动画效果，通过定义动画的关键帧和一些属性，在元素上应用动画属性，从而实现动画效果。 要创建一个动画，需要定义一个 `@keyframes` 规则，该规则定义了动画的关键帧，即动画的开始状态、结束状态和中间状态。可以在 `@keyframes` 规则中使用百分比或关键字来指定关键帧的位置，然后在 `animation` 属性中引用该 `@keyframes` 规则，并指定一些动画属性，例如持续时间、循环次数、是否反向播放等。 下面是一个简单的示例，用于说明 `animation` 属性的用法： ```html <template> <div> <button @click="animate = !animate">Animate</button> <div :class="{ 'animate': animate }"></div> </div> </template> <script> export default { data() { return { animate: false } } } </script> <style> .animate { width: 100px; height: 100px; background-color: red; animation: pulse 2s linear infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } </style> ``` 在上面的代码中，我们定义了一个 `animate` 变量，用于控制动画的播放状态。然后，我们通过点击按钮来切换 `animate` 变量的值，从而触发 `div` 元素的动画效果。 在样式中，我们定义了一个 `pulse` 的关键帧规则，该规则定义了动画的三个关键帧，分别是动画开始时的状态、动画中间时的状态和动画结束时的状态。然后，在 `div` 元素上应用 `animation` 属性，并引用了 `pulse` 关键帧规则，指定动画持续时间为 2 秒，循环次数为无限，线性变化，即匀速播放。 需要注意的是，`animation` 属性是 CSS3 中的新属性，不同浏览器对其支持程度可能会有所不同，需要进行兼容性处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值