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

时间: 2018-12-30阅读: 1022标签: 属性

元素宽高

  • 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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1725

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

css 文本属性有哪些?

css 文本属性有哪些?下面本篇文章给大家介绍一下CSS中各种文本属性。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。text-align:控制文本的对齐方式;text-indent :控制文本首行的缩进,px或%都可;

HTML的poster属性怎么用?

HTML的poster属性主要应用在<video>元素中,用于在视频下载或用户单击播放按钮时显示图像;如果未设置此图像,则会将第一帧视频作为海报图像。

css3的calc属性不生效问题

css3的 calc:计算属性。由于自己做的项目中这个属性不常用到,偶尔用一次还没效果。后来研究了下是因为运算符两边没加空格。

JavaScript删除对象的某个属性的方法

delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其“替代”设置慢100倍 object[key] = undefined,delete 操作符会从某个对象上移除指定属性。成功删除的时候回返回 true,否则返回 false。

intrinsicsize实现图片恒定宽高比的属性

开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。这里假设图片是<img>元素,不是作为background

CSS Display属性的双值写法

目前这个只有Firefox70支持了这一语法,其他的浏览器仍将其当成非法的语法处理,因此生产情况下使用还是为时过早。目前所有的功能都可以用单一值来实现,所以这个新的语法可能会作为别名的形式存在

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

html5全局属性

accesskey设置访问元素的键盘快捷键。class规定元素的类名(classname),contenteditable规定是否可编辑元素的内容。contextmenu 指定一个元素的上下文菜单

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!