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

元素宽高

  • 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

时间: 2024-10-12 12:40:57

属性设置百分比时的计算参考汇总的相关文章

微信朋友圈评论时被评论状态Item位置计算参考

mListView.setSelectionFromTop(position, y); 利用上述方法设置Item在ListView中的位置.y为Item距离ListView顶端的距离,也就是图中的1: 计算方式:1 = 2 - 3 -4 坐标计算: int[] location = new int[2]; view.getLocationOnScreen(location); view为需要计算坐标的控件:location[0] : x轴坐标 location[1] : y轴坐标 这里计算高度只

Excel计算百分比时分母为0的处理

作者:iamlaosong 实际工作中经常碰到百分比计算,但是,如果分母为0,则单元格显示#DIV/0!,可以用if函数进行判断(直接判断分母,或者用iserror(A1/B1)或isnumber(A1/B1)函数判断计算结果),这样就不会显示#DIV/0!,显示什么,可以根据需要设定,例如: =IF(B1<>0,A1/B1,0)     ' 分母为0时显示0 =IF(B1<>0,A1/B1,1)     ' 分母为0时显示1 =IF(B1<>0,A1/B1,"

css中与高度相关的属性其百分比的设置

<body> <div style="background-color:red;"> <div style="width:50%;height:50%;background-color:green;"></div> </div> </body> 上面父div宽度继承body元素的宽度,子div内容区宽度50%是相对于父div的宽度,但子div内容区高度设为50%却不是相对于父div高度而是相对于

个人经验 - Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑

Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑: 此坑出现的条件: 1.RelativeLayout布局的layout_height属性设置为wrap_content 2.某“居中View”设置为layout_centerX(layout_centerVertical.layout_centerHorizontal.layout_centerInParent) 3.其它View相对于“居中View”做布局 此时坑出现了: 无论

.net MVC 使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 maxJsonLength 属性设置的值

在.net mvc的controller中,方法返回JsonResult,一般我们这么写: [HttpPost] public JsonResult QueryFeature(string url, string whereClause) { string str=""; return Json(str); } 此时如果str过长,就会报“使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 maxJsonLength 属性设置的值

vue框架下,echarts图表外部容器宽度设置为百分比时内容超出容器以及echarts图表自适应的实现方案

在vue.js框架下,创建echarts图表,当图表的外部容器的宽度设置为百分比时,出现图表内容宽度超出其外部容器的情况,几番调试,得解决方案如下: (备注说明:问题产生的具体原因尚不清晰,后面若知晓了再补充,但是初期解决问题阶段一定不要钻牛角,不是一开始就能或者可以知道真理的) 在创建了echart对象之后,就调用一次echart的resize方法,同时,获取图表数据的方法应该是异步的,如果是初期调试模拟也要用setTimeout延迟一下,0秒即OK了. methods: { ...mapAc

使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength 属性设置的值

Type : System.InvalidOperationException, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 Message : 使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错.字符串 的长度超过了为 maxJsonLength 属性设置的值. Source : System.Web.Extensions Help link : Dat

EBS OAF开发中实体对象和视图对象的属性设置器

(版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 源文: Home > Oracle Application Framework Documentation Set, Release 12.2 > Oracle Application Framework Developer's Guide > Chapter 5: Implementing Server-Side Features > Entity Object and Vi

qt之窗口换肤(一个qss的坑:当类属性发现变化时需要重置qss)

1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要    毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户端换肤功能,所以就对qt的qrc做了点儿研究,我是一个实干派(可能有点儿虚),相对于看文档来说.本文开头我就给出了两篇博客,这两篇博客对我理解qrc这个东西有很大的帮助,接下来我就简单分析下我的理解. 首先说明下qrc是qt的东西,而不属于vs,这也很容易证明,那就是vs的工程师不识别qrc文件的,