属性设置百分比时的计算参考汇总
Posted shapey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了属性设置百分比时的计算参考汇总相关的知识,希望对你有一定的参考价值。
元素宽高
width
,min-width
,max-width
等元素宽度设置百分比,以包含块的宽度为标准进行计算;height
,min-height
,max-height
等元素宽度设置百分比,以包含块的高度为标准进行计算;
内外边距
margin
,padding
设置百分比时,在默认(水平)书写模式下,以包含块的宽度为标准进行计算,其他情况以包含块的高度进行计算。所以正常情况下,margin-top,padding-top 等垂直方向上的内外边距也都是以包含块的宽度进行计算的
定位
left
,right
是以包含块的宽度为标准进行计算的;top
,bottom
是以包含块的高度为标准进行计算的;
需要注意这里的包含块是和设置的position
有关的:
absolute
:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素(position非static的元素),如果没有定位的祖先元素,则一直回溯到body元素。fixed
:对象脱离常规流,偏移定位是以窗口为参考
绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。
字体
font-size
设置百分比时,以父元素的字体大小的标准进行计算
行高
line-height
设置为百分比是,以自身字体大小为标准进行计算
边框圆角
border-radius
使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度
平移变换
translate()
即:translatex()
,translatey()
使用百分比定义,分别是以自身的宽度和高度进行计算
注意
注意:只有计算值是可以继承的。所以,即使一个百分比值用于父属性,一个真正的值,比如具体像素宽度
例如line-height
设置百分比时,子元素继承是父元素乘以百分百之后的具体数值,所以可能会出现重叠现象。而设置为乘积因子就不会出现这种情况,子元素的行高为自身的font-size
乘以乘积因子
以上是关于属性设置百分比时的计算参考汇总的主要内容,如果未能解决你的问题,请参考以下文章
Android 屏幕适配屏幕适配通用解决方案 ⑥ ( 约束布局 ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 )
Android 屏幕适配屏幕适配通用解决方案 ⑥ ( 约束布局 ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 )