美文网首页
CSS属性计算

CSS属性计算

作者: tsyeyuanfeng | 来源:发表于2016-05-04 10:54 被阅读140次

一、指定值(Specified Value)

CSS属性的指定值通过以下三个步骤确定:

  1. 如果文档的样式表给该属性指定了一个值,那么该值就是该CSS属性的指定值;
  2. 如果文档的样式表没有为该属性指定任何值,那么该属性会继承父元素对应属性的值(如果有可能的话);
  3. 如果通过以上两种方式都无法确定该属性的值,就会根据CSS规范为该属性应用初始值。

二、计算值(Computed Value)

CSS属性的计算值是根据指定值计算出来的。浏览器首先会处理inheritinitial这两个特殊值,然后根据现有属性值去计算那些需要计算且能够根据现有属性值计算出来的属性的值。需要计算的值一般都是一些相对值,要把它们转化成绝对值,比如em,rem,百分比等;但在这一阶段,并不是所有属性的相对值都能够计算成绝对值的,一些与布局相关的属性,比如with,height,margin-right,text-indent,top等,当它们使用百分比值且参照元素的值也不是绝对值的时候,它们的属性值是无法计算为绝对值的,这个时候该属性的计算值与指定值一样,都是相对值。这些相对值需要等下一步布局确定之后才能转换为绝对值。

三、使用值(Used Value)

使用值是CSS属性经过所有计算之后最终得到的值。
计算任意CSS属性的使用值有三个步骤:

  1. 确定指定值,指定值要么是通过层叠样式表指定,要么是通过继承得到,要么就是默认值;
  2. 根据指定值得到计算值;
  3. 计算布局,这时尺寸为百分比或者auto的属性值会转换成像素px,得到的结果就是使用值。

相关文章

  • calc计算属性的用法

    calc是CSS3中新增的计算属性。 普通的CSS样式时,计算属性的写法如下: Less中,计算属性的写法如下: ...

  • 30秒 学懂 css(二)

    计算属性calc() 函数calc()支持CSS3; 让你的CSS具有计算功能, CSS属性值就是表达式的结果 h...

  • CSS属性计算

    一、指定值(Specified Value) CSS属性的指定值通过以下三个步骤确定: 如果文档的样式表给该属性指...

  • calc的用法

    CSS计算属性(calc):(智能数学运算规则)

  • vue hover绑定

    在计算属性中 在html中 在css中

  • 连字符表示法和驼峰表示法的转换

    在JS中获取CSS属性,我们会使用计算属性 getComputedStyle() window.getComput...

  • h5 开发中遇到的问题

    响应式字体设计 css 计算属性 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度...

  • CSS calc计算属性

    calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margi...

  • css之"计算属性"

    no,no,no,这和vue的计算属性没有一点关系,所以这次介绍的也和vue无关。 相信大家和我一样,在开发中,也...

  • web前端面试题

    1.css有哪些选择符,它们的优先关系计算 CSS 元素选择器CSS 类选择器CSS ID 选择器CSS 属性选择...

网友评论

      本文标题:CSS属性计算

      本文链接:https://www.haomeiwen.com/subject/ncjrrttx.html