属性设置百分比时的计算参考汇总

世上唯一不能复制的是时间,唯一不能重演的是人生,唯一不劳而获的是年龄。该怎么走,过什么样的生活,全凭自己的选择和努力。人生很贵,请别浪费!与智者为伍,与良善者同行。属性设置百分比时的计算参考汇总,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.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乘以乘积因子

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/229224.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!