属性设置百分比时的计算参考汇总
元素宽高
- 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乘以乘积因子
来自：https://www.cnblogs.com/shapeY/p/10199256.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
