【11】specified value,computed value,used value计算方法

  • specified value（规范值）: 计算方法如下：

    1. 如果样式表设置了一个值，使用这个值
    2. 如果没有设置值，这个属性是继承属性，从父元素继承
    3. 如果没设置，并且不是继承属性，使用css规范指定的初始值


  • computed value（计算值）:

以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如em根据font-size进行计算。

一些使用百分数并且需要布局来决定最终值的属性，如width，margin。
百分数就直接作为computed value。line-height的无单位值也直接作为computed value。
这些值将在计算used value时得到绝对值。
computed value的主要作用是用于继承。


  • used value（使用值）：属性计算后的最终值，对于大多数属性可以通过window.getComputedStyle获得，尺寸值单位为像素。

以下属性依赖于布局：

  • background-position
  • bottom, left, right, top
  • height, width
  • margin-bottom, margin-left, margin-right, margin-top
  • min-height, min-width
  • padding-bottom, padding-left, padding-right, padding-top
  • text-indent




**

【11】specified value,computed value,used value计算方法的更多相关文章

  1. 转载请注明出处: https://github.com/qiu-deqing/FE-interview

    转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-inter ...

  2. web面试题大全

    $HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 docty ...

  3. 前端面试题集锦及答案解析--HTML、 HTTP、web综合问题

    前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有 ...

  4. Neural Style学习3——操作

    Basic usage: th neural_style.lua -style_image <image.jpg> -content_image <image.jpg> Ope ...

  5. mobx源码解读3

    计算属性 function Todo() { this.id = Math.random() mobx.extendObservable(this, { aaa: 222, bbb: 11, ccc: ...

  6. SQL经典笔试题之一

    本题用到下面三个关系表: CARD     借书卡.   CNO 卡号,NAME 姓名,CLASS 班级 BOOKS    图书.     BNO 书号,BNAME 书名,AUTHOR 作者,PRIC ...

  7. Microsoft 2013校园招聘笔试题及解答

    Microsoft 2013校园招聘笔试题及解答 题目是自己做的,求讨论.吐槽.拍砖 1.      Which of the following callingconvension(s) suppo ...

  8. vue.js学习系列-第二篇

    一 VUE实例生命周期钩子     1 生命周期函数         定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数      1 new vue()      2 before ...

  9. 前端页面重构技巧总结TIP【持续更新...】

    本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教.其实重构页面是一门学问,看似简单,却暗藏很多学问.实际项目中页面的重构有以下几点最基本需求: 1.需要使用合理 ...

随机推荐

  1. Rasheda And The Zeriba Gym - 100283A  计算几何

    http://codeforces.com/gym/100283/problem/A 考虑到多边形是不稳定的,是可以变来变去的. 那么总是可以把每个点放到圆上. 所以只需要判断圆心角是不是小于等于36 ...

  2. hdu4832Chess(dp)

    链接 这题第一想法是矩阵,不过范围太大了,然后就没有思路了.. 之后看到群里的解法,行和列可以分着走,两者是互不影响的,这样就把二维转换成了一维,直接dp求出就可以了. 然后再组合相乘一下. #inc ...

  3. 怎么样去优化我们的SQL语句

    1.改写in 在SQL语言中,一个查询块可以作为另一个查询块中谓词的一个操作数.因此,SQL查询可以层层嵌套.例如在一个大型分布式数据库系统中,有订单表Order.订单信息表OrderDetail,如 ...

  4. 代码中看见一共8个变量参数{SEO,0,0,0,0,0,0,0} 解读！{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}

    代码中看见{SEO,0,0,0,0,0,0,0}{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}解读! 举个例子: {GetNew,977,0,23,500,0,0 ...

  5. react 父子传值

    import React from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; //var $ = requi ...

  6. 借助sass的Maps功能使得响应式代码更有条理

    原文来自这里 本文综合了原文(by Jonathan Suh)以及笔者自己的理解. Introduction 众所周知,写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助s ...

  7. hihocoder1821 取卡片游戏

    思路: 博弈dp. 实现: #include <iostream> #include <algorithm> #include <cstring> using na ...

  8. table表格字母无法换行

    在项目中,用到的table比较多,本来布局挺好的,后来在td内写入英文字母,整个布局就乱了,会撑的很宽,不换行,后来才知道:一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行. 于 ...

  9. Json字符串转excel表格文件

    假如我们有一段json串,该json串是由一系列结构相同的数据集合组成,如下: { "data": [ { "groupId": "com.test. ...

  10. LR中订单流程脚本2

    Action(){ //1.设置服务器的IP地址 //lr_save_string("192.168.1.12:8080", "ip"); lr_save_st ...