CSS属性计算

一、指定值(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,得到的结果就是使用值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果。例子: ht...
    冰麟轻武阅读 1,113评论 0 0
  • 书摘:如果圣灵像葡萄藤一样在我里面生长,喜乐便有如串串葡萄从枝条上垂挂而下。喜乐不属于这个世界,它是有内而生,这地...
    利争阅读 705评论 0 1
  • 当你听到摩西奶奶说,人生没有太晚的开始。你是不是很激动?以为自己多活几年也能创造出属于自己的辉煌,虽然现在的你还拿...
    袁漫阅读 410评论 0 4