margin-top的值为%,是相对于谁的百分比

以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中,但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现,margin-top的%值是相对于父元素的宽度的。

也可以改变布局:writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。

用top:50%,配合transform:translateY(-50%)就没有这个问题,可以完美的实现垂直居中。

转载于:https://www.cnblogs.com/coconutGirl/p/10303854.html

CSS中的margin-top属性是用来设置元素顶部外边距的 需要注意的是,margin-top属性只会影响元素顶部的外边距,如果需要同时控制元素的上、右、下、左四个方向的外边距,可以使用margin属性或分别设置margin-top、margin-right、margin-bottom和margin-left属性。外边距是指元素与相邻元素之间的空间,通过设置margin-top属性,可以控制元素顶部与上方元素之间的间距。上述代码中,分别按顺序设置了上、右、下、左四个方向的外边距值,可以通过调整这四个值的顺序和大小来控制元素的外边距。希望以上解释对您有所帮助! 阅读详情

相关推荐

Android Studio中把llama.cpp编译Android .so

本文介绍了一个在Android Studio中集成llama.cpp的最小Demo实现方案,通过JNI将llama.cpp编译为Android.so库,实现本地加载GGUF模型进行文本生成。文章详细说明了项目结构配置(SDK≥30,NDK≥28)、CMake编译设置、Kotlin-JNI-C++的完整调用链实现,以及模型文件部署方式。该Demo采用每次请求新建上下文的简化设计,包含加载模型、生成文本、资源释放等核心功能,并提供了错误排查建议。项目舍弃了上下文保持等复杂功能以确保稳定性,适合作为端侧大语言模型

Zhang Phil 519

margin-top:3%,这个百分数是相对于谁的?

相对于父元素的width 是的你没有看错,是width,不是height padding和margin无论left还是right还是top还是bottom都是相对于父元素的width的  

dongdaxiaopenyou的博客 1680

基于STM32F427的模拟SSI协议绝对式编码器位置反馈通信

基于STM32F427的模拟SSI协议绝对式编码器位置反馈通信

xeke997的博客 6064

css中子元素的百分比到底相对于谁?

css中子元素的百分比到底相对于谁

刘运召的博客 1387

深水区探秘:小红书App x-s参数逆向与高并发爬虫实战(2026版)

在移动互联网的碎片化时代,小红书凭借其“社区+电商”的独特模式,积累了超过3亿月活用户。其内容生态覆盖了从美妆、穿搭到旅行、数码等几乎所有垂直领域。对于数据分析师、市场研究员以及AI算法工程师而言,小红书平台蕴含的价值是巨大的——无论是热门趋势洞察、KOL画像分析,还是多模态图文数据的采集。然而,想要高效、稳定地获取小红书App的公开数据,却并非易事。与Web端相比,小红书App的防护体系堪称“铜墙铁壁”。其核心的反爬机制建立在动态混淆的加密参数之上,尤其是请求头中的X-SX-T以及X-S-Common。

2201_76125261的博客 265

YOLO26改进105:全网首发--使用BiFPN改进特征金字塔网络

YOLOv6 v3.0在目标检测领域实现重大突破,通过改进网络架构和训练方案显著提升性能。该版本在COCO数据集上展现出优越表现:YOLOv6-N达到37.5% AP/1187 FPS,YOLOv6-S实现45.0% AP/484 FPS,均超越同类检测器。大模型YOLOv6-M/L分别达到50.0%/52.8% AP,L6版本更创下实时检测新纪录。关键技术包括RepVGGBlock、BiFusion等新型模块,通过多分支融合和高效重参数化设计提升性能。研究团队已验证各改进模块有效性,代码已开源。

AIcurator的博客 95

margin 和 padding使用百分比 % 是相对于哪个尺寸?

相对于父盒子的宽度,值得注意的是以 top 和 bottom 为后缀的也是相对于父盒子的宽度,而不是父盒子的高度。

weixin_45731789的博客 689

芯擎SEC1000芯片参数详细介绍

随着龙鹰一号的不断进化和应用,未来的智能座舱将不仅仅是显示和控制的集成,更是人与车之间的一种默契和无缝交互的体现。在汽车行业迈向智能化和电动化的浪潮中,座舱已不仅仅是一个驾驶者的操作空间,而是逐渐演变为一个集娱乐、信息、控制于一体的智能交互平台。今天的汽车不仅需要强劲的动力和炫酷的外观,更需要一颗强大而智能的“心脏”来支撑复杂的座舱体验和安全驾驶需求。想象一下,未来的汽车不再仅仅是交通工具,它将成为你的移动私人管家,了解你的习惯,甚至提前预测你的需求。让我们一起走进龙鹰一号的世界,探索智能座舱的无限可能!

weixin_43199439的博客 1724

关于margin的数值是百分比,参照对象

备份

超胆孤侠 3568

SerDes系列之码间干扰的概念

码间干扰出现在传输介质或者元器件的带宽小于所发送的信号带宽时,从时域角度来看,传输路径的带宽限制会使发送信号的上升沿的变化速率变慢,有可能对信号造成高频衰减,并影响到实际数字逻辑电平的转换时序。

一只豌豆象的博客 3467

Unity零基础到进阶 | Unity 探针系统深度解析:光照探针、反射探针与相关技术

在 Unity 渲染管线中,探针(Probe) 是一类通过预计算或实时采样来捕捉空间光照信息的核心组件。它们弥补了传统静态光照贴图和实时光源各自的局限性,是实现高质量、高性能全局光照效果的关键工具。 本文将系统介绍光照探针(Light Probe)和反射探针(Reflection Probe)的作用与用法,分析二者之间的协同关系,并延伸介绍自适应探针体积(APV)、光照探针代理体(LPPV)、探针体积等进阶技术。

努力前行,总会成为自己心中的那道光 1万+

margin-top的百分比是相对父元素的哪个值

文章目录前言验证结论 前言 在W3School网站上看到关于CSS margin-top 属性的介绍,里面有这么一段: 红框里面的这句话有点毛病啊,从下面给出的例子来看,明显不对。 这个是给出的例子,很明显偏移量不是父元素高度的25% 验证 <html> <head> <style type="text/css"> .parent { width:400...

wml00000的博客 1423

题解:洛谷 P14357 [CSP-J 2025] 拼数

等知名刷题平台精心挑选而来,并结合各平台提供的算法标签和难度等级进行了系统分类。题目涵盖了从基础到进阶的多种算法和数据结构,旨在为不同阶段的编程学习者提供一条清晰、平稳的学习提升路径。小 R 想知道,在他所有能拼成的正整数中,最大的是多少。你需要帮助小 R 求出他能拼成的正整数的最大值。小 X 给了小 R 一个字符串。输出一行一个正整数,表示小 R 能拼成的正整数的最大值。中的任意多个数字,按任意顺序拼成一个正整数。,表示小 X 给小 R 的字符串。#普及-# #其他排序#洛谷:[P14357。

团爸讲算法 1394

css3 margin-top:% 百分比以谁为标准的问题

<!DOCTYPE html> <html> <head> <title>定位</title> <style> *{ margin:0px; padding:0px; } .container{ ...

赤贯妖星 3380

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

margin设置百分比

margin设置百分比是基于父容器的宽度,所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例: &lt;style&gt; .fu { width: 400px; height: 300px; background: blue; overflow: hidden; } ...

qq_35134066的博客 4117

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

反常识,margin-top的百分比竟然是相对于父元素的宽度!

<下方内容引用自网络>【因遇到此问题,故将其抄录在此】 css margin 的值是百分百的时候,其值是基于父元素的宽度来计算的,并非是自身的宽度,padding 百分比的取值也是一样的, css height 的高度百分比是按其父元素的高度来计算的 <!DOCTYPE html> <html lang="en"> <head> <me...

info_china的博客 2255

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

margin-top/bottom,padding-top/bottom百分比取值的问题

一、 1.margin-top/bottom,padding-top/bottom设置为百分比时,取值为父元素宽度的百分比。 2.如果想要取父元素高度的百分比,在父元素上添加代码: writing-mode: vertical-lr; 二、 关于为什么为W3C规定,margin和padding的取值是按照width来计算。 主要有两种说法, 1.避免高度计算的循环依赖; 2.统一基准 1.关于第一种说法: (1)当父元素高度不固定,需要依靠子元素撑开时,计算父元素高度时回去寻找子元素高度与子元素的ma.

九日的博客 1184

(转)当margin-top、padding-top的值为百分比时是如何计算的?

本文链接:https://blog.youkuaiyun.com/qq_27437967/article/details/72625900问题:当margin-top、padding-top的值是百分比时,分别是如何计算的? A 相对父级元素的height,相对自身的height B 相对最近父级块级元素的height,相对自身的height C 相对父级元素的width,相对自身的width D ...

weixin_38169798的博客 236

CSS篇:彻底搞懂CSS百分比边距:margin-top和padding-top的计算原理

理解CSS百分比边距的计算原理,可以帮助我们避免很多布局上的困惑,也能让我们更精准地控制页面元素的空间关系。记住这个简单的规则:在CSS中,垂直方向的百分比边距(margin/padding-top/bottom)都是基于包含块的宽度计算的。

欢迎来到我的前端博客!这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例,帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者,这个博客都适合你。 1610

常见样式问题三、margin、padding百分比

1、margin百分比介绍可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)。如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小...

c11073138的博客 889

详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)

文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距,该属性有多个值: 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...

IT_Helianthus的博客 9443

在 CSS 中,绝大多数百分比(如 width, padding, top, left)都是相对于父容器计算的。

结论修正"在 CSS 中,绝大多数百分比是相对于父容器计算的,但是垂直方向的padding和margin奇葩地参考父容器的【宽度】。transform参考的是【元素自身】。fixed定位参考的是【视口】。避坑指令做垂直间距时:如果你想让上下留白是父元素高度的 10%,不要写(它会按宽度算)。请使用vh单位,或者用 JS 计算,或者给父元素设固定高。做居中时:别忘了transform是按自身算的,这是实现完美的top: 50%;left: 50%;的关键。做响应式视频/卡片:可以利用。

长风破浪会有时的博客 403

关于margin与padding设置百分比的问题

margin 与 padding 设置为百分比 之前一直认为 margin-top 和 margin-bottom 设置百分比以父容器的高度计算,而 margin-left 和 margin-right 设置百分比以父容器的宽度计算,直到今天群里一个群友问 boostrap 中的栅格系统是如何设置 margin-top 百分比以宽度计算的? 原因是他发现设置的 margin: 10%...

境界线上的地平线 1215

元素竖向的百分比设定是相对于容器的宽度or高度

相对于父元素宽度的: [max/min-]width、left、right、padding、margin 等; 相对于父元素高度的: [max/min-]height、top、bottom 等; 相对于继承字号的: font-size 等; 相对于自身字号的: line-height 等; 相对于自身宽高的: border-radius、background-si

oiu1010110的博客 3042
上一篇: vue动态改变对象的值
下一篇: css预处理器的实际优点:
abc589721
博客等级 码龄11年 1粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值