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

更新日期: 2018-12-30阅读量: 1259标签: 属性

元素宽高

  • 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

csstext属性的使用_js中的style.cssText用法及特点

cssText 的本质就是设置 HTML 元素的 style 属性值。在某些浏览器中(比如 Chrome),你给他赋什么值,它就返回什么值。在 IE 中则比较痛苦,它会格式化输出、会把属性大写、会改变属性顺序

css3的calc属性不生效问题

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

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

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

CSS文本属性

CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。

vue实用的计算属性小技巧

我们时常会碰到后端要“开始时间” - “结束时间”(分为两个变量存放),但是呢!我们使用的时间选择器的组件又只能绑定一个数组,这个时候,我们传给后端的时候需要将数组拆散

Vue计算属性和侦听属性

一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时

常用的CSS属性

页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:content-box (W3C 标准盒模型),border-box (IE盒模型)

Vue与ref属性与refs的使用

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

React 也能“用上” computed属性

初次见到计算属性一词,是在 Vue 官方文档 《计算属性和侦听器》 一节中,文章中是这样描述计算属性的:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

css3属性: will-change

CPU即中央处理器,它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。GPU即图形处理器,是与处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的,有了它

点击更多...

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