当margin用百分号(%)时,数值是以谁为基准?

简介:   今天做了一个demo,自己用原生的js写了一个轮播图,那么问题来了,当你用百分号表示margin-left的时候,他取得百分号的数值是以谁做为基准而取得值呢?子元素和父元素的width都是百分号表示, 比如一个很简单的额例子了,当一个div里面有一个div时,下面我就通过2个简单的demo来解释这个问题 1、如果父元素div大于里面的子元素div,图代码如下:box为父元素

  今天做了一个demo,自己用原生的js写了一个轮播图,那么问题来了,当你用百分号表示margin-left的时候,他取得百分号的数值是以谁做为基准而取得值呢?子元素和父元素的width都是百分号表示,

比如一个很简单的额例子了,当一个div里面有一个div时,下面我就通过2个简单的demo来解释这个问题


1、如果父元素div大于里面的子元素div,图代码如下:box为父元素 ,bos为子

结果如下

可见结果百分号( % )的值是以它的父元素的宽为基准;
2.如果外面的父元素div小与里面的div box为父元素 ,bos为子


先看结果

大家思考一下,为什么我要把margin-left的值设为-60%?
其实这是有原因的,子元素占了父元素的160%;就说明子元素在他父亲的基础上还比他父亲大60%;那么,如果margin-left的取值是以父亲宽为基准,那么上面的结果应该是右边对齐了。结果正是如此,看来我们的结论是正确的,
这句话也可以这么理解:子元素以父亲为基准比他大60%,那么他再以他父亲为基准向左移动60%,那么他们的右边是不是就对齐了
特别注意:margin-top如果用百分号表示,他也是以父元素的为基准的,有兴趣的同学可以亲自测试一下。

目录
相关文章
|
安全 API 数据处理
Android 15革命来袭:64位时代的大门轰然开启,开发者和用户将何去何从?
【8月更文挑战第20天】随着性能提升,Android 15的重大更新引领64位时代,提供更大内存支持、更快执行速度及增强安全性。新版本淘汰32位应用,优化系统库,并改善内存管理。开发者需适应64位开发,面对应用体积增大等挑战,同时享受更高效能。此转变标志着移动应用开发步入新阶段,为用户带来更流畅安全的体验。
761 0
|
7天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
310 130
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
18天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1328 8
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
17天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1404 87