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 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
雨白2 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
kk爱闹3 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景5 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
每次的天空5 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频