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

Moxmi 发布于2019-04-23 11:56 / 803人阅读

摘要：对象脱离常规流，偏移定位是以窗口为参考绝对定位的元素，在，，，属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。例如设置百分比时，子元素继承是父元素乘以百分百之后的具体数值，所以可能会出现重叠现象。

元素宽高

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乘以乘积因子

混合云超融合服务器设置OSS文件被访问时的HTTP头设置属性属性设置批量设置属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1385.html

【CSS深入】设置不同块级流方向时的属性百分比计算

摘要：简言之，块级流方向包含两种一种是水平流，一种是垂直流。对百分比计算的影响首先，先明确这里要讨论的是块级元素的水平流和垂直流对的百分比属性值的计算值的影响。百分比在屏幕自适应是我们常用，但是很多时候某个CSS属性的百分比计算值，并非如我们所想象的那样子。前段时间有位同学分享了一篇关于margin/padding自适应布局的文章，看完后我去w3.org查了下margin和padding百...

Yujiaao 2019-08-28 18:29 评论0 收藏0
04.Android之动画问题

摘要：动画占用大量内存，如何优化使用动画的注意事项有哪些问题这个问题主要出现在帧动画中，当图片数量较多且图片较大时就极易出现，这个在实际开发中要尤其注意，尽量避免使用帧动画。目录介绍 4.0.0.1 Android中有哪几种类型的动画，属性动画和补间动画有何区别？补间动画和属性动画常用的有哪些？ 4.0.0.2 View动画为何不能真正改变View的位置？而属性动画为何可以？属性动画是如...

Muninn 2019-08-16 14:20 评论0 收藏0
YCProgress自定义百分比进度条

摘要：目录介绍本库优势亮点使用介绍圆环百分比进度条直线百分比进度条仿杀毒类型百分比进度条注意要点效果展示其他介绍本库优势亮点圆环百分比进度条简便且小巧，支持设置多种属性。避免开发者使用造成其他问题。返回真正的进度值。目录介绍 1.本库优势亮点 2.使用介绍 2.1 圆环百分比进度条 2.2 直线百分比进度条 2.3 仿杀毒类型百分比进度条 3.注意要点 4.效果展示 5.其他介绍...

Kahn 2019-08-16 13:55 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

mumumu 2019-08-01 16:41 评论0 收藏0