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

相关推荐
在逃的吗喽17 小时前
Vue3新变化
前端·javascript·vue.js
2501_9159090618 小时前
iOS 应用上架全流程解析,苹果应用发布步骤、ipa 上传工具、TestFlight 测试与 App Store 审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
路上^_^18 小时前
安卓基础组件024-fagment
android
Demoncode_y18 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
Never_Satisfied18 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied18 小时前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
ljt272496066118 小时前
Compose笔记(五十一)--rememberTextMeasurer
android·笔记·android jetpack
岁月宁静19 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
阿蓝85819 小时前
Android代码架构
android
liaojuajun21 小时前
可视化地图
开发语言·javascript·ecmascript