css样式的百分比相对于谁

1.相对于父级宽度的:

max-widthmin-widthwidthleftrighttext-indentpaddingmargingrid-template-columnsgrid-auto-columnscolumn-gap 等;

  元素宽高比保持16:9例如video,可通过padding实现
 .video-box{
    width:100% //宽度为父元素宽度
    padding-top:56.25%; //可以使的高度为父元素宽度的56.25%,从而使盒子比例始终保持16:9
  }
2.相对于父级高度的:

max-heightmin-heightheighttopbottomgrid-template-rowsgrid-auto-rowsrow-gap 等;

3.相对于主轴长度的:

flex-basis

4.相对于继承字号的:

font-size

5.相对于自身字号的:

line-height

6.相对于自身宽高的:

border-radiusbackground-sizeborder-image-widthtransform: translate()transform-originzoomclip-path 等;

7.相对于行高的:

vertical-align

8.特殊算法的:

background-position (方向长度 / 该方向除背景图之外部分总长度)、border-image-slice (相对于图片尺寸)、filter 系列函数等;

如果自身设置 position: absolute,“父级”指:Boring:破坏文档流的div高度设为百分比是相对谁而言的?
如果 position: fixed,“父级”指视口(父级不存在 transform 为非 none 值的情况下)。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容