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

CSS 实现子容器的高度等于宽度的一半

通过 padding-bottom 实现。注意子元素需要设置 heigth: 0，否则内容会撑开子元素的高度。

实现一个三角形

拓展

从其他博客中看到的面试题
1：页面中有一个元素A，请实现以下需求：

1. 元素A在页面内水平、垂直居中；
2. 元素A距离页面左右的间距为10px，元素A的宽度随页面宽度变大而变大；
3. 设置元素A的高度始终为宽度的一半；

解决思路：

1. 通过 flex 实现水平垂直居中
2. 通过 padding-bottom 实现高度始终为宽度的一半
3. 需要注意，高度设置时需要处理元素A距离页面左右间距的10px