CSS 的特性值

更新日期: 2019-09-26阅读: 2.1k标签: 特性

css 值的解析

CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。

我们可以使用 CSS 选择器,为选中的元素设置需要的样式。

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错。

那么,有没有想过,在我们给予一个特性正确的值的情况下,浏览器应该怎样处理呢?是否最终你看到的就是你设置的值呢?答案是否定的!

当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree ),那么,它必须为文档树中的每一个元素,根据目标媒介类型所适用的每一个特性,指定一个值。

而开发者给某个元素的 CSS 特性设置某个值,到这个元素的特性值被计算渲染,也就是得到最终的值,需要经过四步计算:

  • 通过指定值 ( specified value ) 确定这个值;
  • 将这个值分解为一个可以用来继承的值,即计算后的值 ( computed value );
  • 必要情况下把计算后的值转换成一个绝对的值,即使用值 ( used value )
  • 根据显示环境的限制,改变使用值以使之能够显示在用户端,最后这个值被称作实际值 ( actual value )。

这些值的计算过程类似工资的计算过程,你的应得工资是一个设置值,实际工资还要减掉你的缺勤,保险,个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。

下面来详细的介绍这四个步骤的四种值。


    指定值

    一般来讲,开发者设定的值,即为指定值,但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。

    层叠顺序

    首先考虑有层叠顺序的情况,即开发者明确了设置了 CSS 特性的值。

    层叠顺序会影响开发者设定的值,所以,应该根据层叠顺序来确定声明的优先级别,优先级高的声明才会起作用。关于层叠顺序,后续会有详细的说明。

    例如,开发者在定义样式的时候,加了 '!important' 的声明要优于未加 '!important' 的声明。

    div{
        height : 100px;
        height : 130px !important;
    }

    其中,带有 '!important' 的 height 声明才是 指定值。

    继承( inheritance )

    如果没有明确的设置这个值,那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值,通常是父元素的计算值。

    例如:

    <p>The greet <em>is</em> good!</p>

    EM 元素没有指定颜色,他将继承父元素的颜色用来显示字符串 "is"。因此,EM 元素是红色。EM 元素 'color' 特性的指定值在没有层叠影响的情况下,就是 "red"。

    初始值

    最后,在不存在以上两种情况的时候,使用元素的初始值。

    如果不设置元素的 'width',它的指定值就是 "auto";对于 'font-size',不设置的情况下,其指定值是 "medium"。

    关于指定值在 JavaScript 中的获取方法,可以使用 "element.style.property" 语句模式:

    <p id="container">The headline <em id="sub">is</em> important!</p>
    <div id="info"></div>
    <script type="text/javascript">
        window.onload = function() {
            var container = document.getElementById("container");
            var sub = document.getElementById("sub");
            var info = document.getElementById("info");
            info.innerhtml = "container width : " + container.style.width
                    +"<br/>container color : " + container.style.color
                    +"<br/>sub color : " + sub.style.color;
        }
    </script>

    经过测试可知,此种方式只适合获取设置的值,对于初始值和继承后的值都没有取到。


    计算值

    指定值在层叠的过程中被分解成计算值。例如,URI 会被解析成绝对地址,而 'em' 和 'ex' 单位会被计算为 pixel 或者绝对长度。

    例如:

    <divhl_4">em; ">hello!</div>

    浏览器默认 ‘font-size’ 是 ‘16px’,所以 ‘1em’ 计算值应该是 ‘16px’。

    当指定值不是 ‘inherit’ 的时候,计算值应该是 CSS 特性定义的 "计算后的值"一行所标明的值。例如对 'border-top-width'的特性说明的最后一行:

    Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

    以上标明,边框宽度的计算值是一个绝对长度 ,当 border 的设置值是 ‘none’ 或 ‘hidden’ 的时候,计算值为 0。

    当 CSS 特性不适合元素时,计算值还是存在的。

    <divhl_3">left:1em;">hello!</div>

    如上代码中,DIV 元素设置 'left' 值为 "1em",计算后的值为 "16px";但是,'left' 特性并不适合于非定位元素 。


    使用值

    在处理计算值的过程中,文档没有被格式化,因此,有些值是无法确定的。比如,百分比宽度的元素,最终宽度是与它包含块的宽度有关, 所以,值只有在包含块确定下来之后才能确定。

    可以说,使用值是将计算值和有依赖关系的值最终转化成的绝对的值。

    利用 JavaScript 来获取元素的使用值,可以采用如下函数

    function getStyle(obj, style) {
          var _style = (style == "float") ? "styleFloat" : style;
          return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() {
              return arguments[0].charAt(1).toUpperCase();
          })];
    }

    其中,需要注意的是,在 IE 里,浮动的计算值不能直接使用 'float' 特性来取, 需要使用的是 'styleFloat',可能 IE 中还存在其他类似的情况。请根据实际用途修改函数。

    最后,关于使用值,可以直接使用浏览器开发者工具查看,在 Firebug 中,使用值就是 "计算出的样式"。Chrome 里则是 "Computed Style"。


    实际值

    经过以上三个步骤的处理,使用值基本上成为渲染所需要的值。但是用户端可能不能够在当前环境中使用这个值。例如:

    div{
        width: 3.1415926px;
    }

    在某些浏览器中,只能显示整数类型的长度,因此,虽然上面的宽度在计算后的值与设置的相同,但是,浏览器却没有办法按小数来显示。

    Firefox Chrome 等浏览器都会以以一定的方式对值做一些取舍。Firefox 采用了四舍五入的形式,Chrome 中却会直接取整,在这点上需要特别注意哦。

    原文:http://www.w3help.org/zh-cn/kb/004/

    链接: https://fly63.com/article/detial/6614

    CSS新特性contain,控制页面的重绘与重排

    contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

    Html5、Css3、ES6的新特性

    Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

    ES6新特性--var、let、const

    var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

    Js即将到来的3个新特性

    Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

    Angular 8的新特性介绍

    在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

    使用 React 要懂的 Js特性

    与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

    ES2019 新特性汇总

    最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

    Js的用途和特性

    JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

    十个超级实用的 JS 特性

    你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

    解密HTTP/2与HTTP/3 的新特性

    HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

    点击更多...

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