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

相关推荐
小阳睡不醒1 小时前
小白成长之路-部署Zabbix7(二)
android·运维
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
mmoyula2 小时前
【RK3568 PWM 子系统(SG90)驱动开发详解】
android·linux·驱动开发
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
你过来啊你5 小时前
Android用户鉴权实现方案深度分析
android·鉴权
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
涔溪7 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
kerli7 小时前
Android 嵌套滑动设计思想
android·客户端