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

总结

position: static (默认值)、relative 时

子元素的width、height 百分比相对于父元素的width、height
子元素的margin、padding 四个方向值百分比相对于父元素的width

子元素 position: relative

子元素的 top、bottom 百分比相对于父元素的height
子元素的 left、right 百分比相对于父元素的width

子元素 position: absolute

子元素的width、height 百分比相对于父级最近的不是 static 定位的元素的width、height
子元素的margin、padding 四个方向值百分比相对于父级最近的不是 static 定位的元素的width
子元素的 top、bottom 百分比相对于父级最近的不是 static 定位的元素的height
子元素的 left、right 百分比相对于父级最近的不是 static 定位的元素的width

子元素 position: fixed

子元素的width、height 百分比相对于浏览器窗口的width、height
子元素的margin、padding 百分比相对于浏览器窗口的width
子元素的 top、bottom 百分比相对于浏览器窗口的height
子元素的 left、right 百分比相对于浏览器窗口的width

子元素的width、height 百分比相对于谁?

子元素 position: static (默认值)

子元素的width、height 百分比相对于第一个父元素的width、height

子元素 position: relative

子元素的width、height 百分比相对于第一个父元素的width、height (和position: static一致)

第一个父元素是 positon: static
第一个父元素是 positon: absolute

提示:样式 .son 元素中的百分比下面会讲

子元素 position: absolute

子元素的width、height 百分比相对于父级最近的不是 static 定位元素的width、height

1

子元素 position: fixed

子元素的width、height 百分比相对于浏览器窗口的width、height

子元素的 margin、padding 百分比相对于谁?

子元素 position: static (默认值)

子元素的margin、padding 百分比相对于父元素的width

padding 的四个方向示例

margin 的四个方向示例

11111111111111111111111111111111111111111111

子元素 position: relative

子元素的margin、padding 百分比相对于父元素的width

子元素 position: absolute

子元素的margin、padding 百分比相对于父级最近的不是 static 定位的元素的width

子元素 position: fixed

子元素的margin、padding 百分比相对于浏览器窗口的width

子元素的 top、right、bottom、left 百分比相对于谁?

子元素 position: relative

子元素的 top、bottom 百分比相对于父元素的height
子元素的 left、right 百分比相对于父元素的width

子元素 position: absolute

子元素的 top、bottom 百分比相对于父级最近的不是 static 定位的元素的height
子元素的 left、right 百分比相对于父级最近的不是 static 定位的元素的width

子元素 position: fixed

子元素的 top、bottom 百分比相对于浏览器窗口的height
子元素的 left、right 百分比相对于浏览器窗口的width

子元素的 font-size 百分比相对于谁?

子元素 font-size 的百分比相对于html中父元素的 font-size。和当前元素或父元素是否定位无关

子元素的 line-height 百分比相对于谁?

子元素 line-height 的百分比相对于当前元素的 font-size

border-radius、translate、background-size 相对于自身的 width

相关推荐
假装多好12329 分钟前
android三方调试几个常用命令
android·1024程序员节·三方,gms
侧耳42931 分钟前
android11禁止安装apk
android·java·1024程序员节
W.Buffer33 分钟前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
JohnnyDeng942 小时前
ArkTs-Android 与 ArkTS (HarmonyOS) 存储目录全面对比
android·harmonyos·arkts·1024程序员节
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心2 小时前
CSS 样式用法大全
前端·css·1024程序员节
皓月Code2 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
MoonBit月兔2 小时前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
2501_915918412 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview