两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • CSS中的指定值、初始值和计算值学习教程

    DIV+CSS教程2018年05月30日关键词:

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。
    我们可以使用 CSS 选择器,为选中的元素设置需要的样式。
    在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错。
    那么,有没有想过,在我们给予一个特性正确的值的情况下,浏览器应该怎样处理呢?是否最终你看到的就是你设置的值呢?答案是否定的!
    当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree ),那么,它必须为文档树中的每一个元素,根据目标媒介类型所适用的每一个特性,指定一个值。
    而开发者给某个元素的 CSS 特性设置某个值,到这个元素的特性值被计算渲染,也就是得到最终的值,需要经过四步计算:
    (1)通过指定值 ( specified value ) 确定这个值;
    (2)将这个值分解为一个可以用来继承的值,即计算后的值 ( computed value );
    (3)必要情况下把计算后的值转换成一个绝对的值,即使用值 ( used value )
    (4)根据显示环境的限制,改变使用值以使之能够显示在用户端,最后这个值被称作实际值 ( actual value )。
    这些值的计算过程类似工资的计算过程,你的应得工资是一个设置值,实际工资还要减掉你的缺勤,保险,个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。
    下面来详细的介绍这四个步骤的四种值。

    一、指定值
    一般来讲,开发者设定的值,即为指定值,但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。
    1.层叠顺序
    首先考虑有层叠顺序的情况,即开发者明确了设置了 CSS 特性的值。
    层叠顺序会影响开发者设定的值,所以,应该根据层叠顺序来确定声明的优先级别,优先级高的声明才会起作用。关于层叠顺序,后续会有详细的说明。
    例如,开发者在定义样式的时候,加了 ‘!important’ 的声明要优于未加 ‘!important’ 的声明。

    CSS Code复制内容到剪贴板
    1. div{   
    2.     height : 100px;   
    3.     height : 130px !important;   
    4. }  

    其中,带有 ‘!important’ 的 height 声明才是 指定值。
    2.继承( inheritance )
    如果没有明确的设置这个值,那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值,通常是父元素的计算值。
    例如:

    XML/HTML Code复制内容到剪贴板
    1. <p style="color:red;">The greet <em>is</em> good!</p>  

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

    二、初始值
    最后,在不存在以上两种情况的时候,使用元素的初始值。
    如果不设置元素的 ‘width’,它的指定值就是 "auto";对于 ‘font-size’,不设置的情况下,其指定值是 "medium"。
    关于指定值在 JavaScript 中的获取方法,可以使用 "element.style.property" 语句模式:

    CSS Code复制内容到剪贴板
    1. <p id="container" style="color:red;">The headline <em id="sub">is</em> important!</p>   
    2. <div id="info"></div>   
    3. <script type="text/javascript">   
    4.     window.onload = function() {   
    5.         var container = document.getElementById("container");   
    6.         var sub = document.getElementById("sub");   
    7.         var info = document.getElementById("info");   
    8.         info.innerHTML = "container width : " + container.style.width  
    9.                 +"<br/>container color : " + container.style.color  
    10.                 +"<br/>sub color : " + sub.style.color;   
    11.     }   
    12. </script>  

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

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

    XML/HTML Code复制内容到剪贴板
    1. <div style="width:1em; ">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 特性不适合元素时,计算值还是存在的。

    XML/HTML Code复制内容到剪贴板
    1. <div style="width:1em; left:1em;">hello!</div>  

    如上代码中,DIV 元素设置 ‘left’ 值为 "1em",计算后的值为 "16px";但是,’left’ 特性并不适合于非定位元素。
    1.长度值
    长度值适用于水平或垂直方向的尺寸。
    长度值表示为 <length>。长度值的格式是: <number> + 单位( e.g., px, em, etc.),注意,一定要有单位,除非这个值是0。 如果长度值是0,单位可有可无。
    可用此类值的 CSS 特性很多,例如,’margin’、’padding’、’height’ 和 ‘width’等。
    有些特性支持负的长度值,比如 ‘margin’。但是如果给一个不支持负长度值的特性设置一个负的值,那么这个声明会被忽略。
    长度的单位有两种:相对长度和绝对长度。下面对这两类单位详细介绍。
    (1)相对长度
    相对长度会随着它参考值的变化而变化,不是固定的值。
    em : 与 ‘font-size’ 的大小有关,与作用到元素上的 ‘font-size’ 的值大小相等;
    ex : 一个小写字母 x 的高度;
    px : 像素数( pixels )。
    例如:

    XML/HTML Code复制内容到剪贴板
    1. h1 { margin: 0.5 em }      /* em */   
    2. h1 { margin: 1 ex }        /* ex */   
    3. p  { font-size: 12 px }    /* px */  

    (2)绝对长度
    in : 英寸 — 等于2.54厘米
    cm : 厘米
    mm : 毫米
    pt : 点 — CSS 2.1里 1pt 等于 1/72 英寸
    pc : 皮卡 — 1pc 等于 12pt,也就是 1/6 英寸
    例如:

    XML/HTML Code复制内容到剪贴板
    1. h1 { margin: 0.5in }      /* inches  */   
    2. h2 { line-height: 3cm }   /* centimeters */   
    3. h3 { word-spacing: 4mm }  /* millimeters */   
    4. h4 { font-size: 12pt }    /* points */   
    5. h4 { font-size: 1pc }     /* picas */  

    2.百分比值
    百分比值表示为 <percentage>。它的格式是:<number> + %。
    常见可用百分比为值的 CSS 特性如:’height’、’width’ 等。
    百分比值总是跟其他的值有关,比如长度值。

    使用值
    在处理计算值的过程中,文档没有被格式化,因此,有些值是无法确定的。比如,百分比宽度的元素,最终宽度是与它包含块的宽度有关, 所以,值只有在包含块确定下来之后才能确定。
    可以说,使用值是将计算值和有依赖关系的值最终转化成的绝对的值。
    利用 JavaScript 来获取元素的使用值,可以采用如下函数:

    JavaScript Code复制内容到剪贴板
    1. function getStyle(obj, style) {   
    2.       var _style = (style == "float") ? "styleFloat" : style;   
    3.       return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() {   
    4.           return arguments[0].charAt(1).toUpperCase();   
    5.       })];   
    6. }  

    其中,需要注意的是,在 IE 里,浮动的计算值不能直接使用 ‘float’ 特性来取, 需要使用的是 ‘styleFloat’,可能 IE 中还存在其他类似的情况。请根据实际用途修改函数。
    最后,关于使用值,可以直接使用浏览器开发者工具查看,在 Firebug 中,使用值就是 "计算出的样式"。Chrome 里则是 "Computed Style"。
    实际值
    经过以上三个步骤的处理,使用值基本上成为渲染所需要的值。但是用户端可能不能够在当前环境中使用这个值。例如:
    div{
        width: 3.1415926px;
    }
    在某些浏览器中,只能显示整数类型的长度,因此,虽然上面的宽度在计算后的值与设置的相同,但是,浏览器却没有办法按小数来显示。
    Firefox Chrome 等浏览器都会以以一定的方式对值做一些取舍。Firefox 采用了四舍五入的形式,Chrome 中却会直接取整,在这点上需要特别注意哦。

    其他网友正在看:
    CSS实现页面两列布局与三列布局的方法示例

    1. 使用BFC的原理实现BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现3列布局。html代码如下XML/HTML Code复制内容到剪贴板<div class="left"></div>  <div class="right">&···

    2018-05-30关键词:

    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    CSS margin全面了解

    一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。此demo与CSS f···

    2018-05-30关键词:

    纯CSS3代码实现switch滑动开关按钮效果

    html结构XML/HTML Code复制内容到剪贴板<div class="container">          <div class="bg_con">           &n···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    DIV始终浮动在页面底部

    废话不多说了,下面小编给大家分享下实现代码,具体代码如下所示:CSS Code复制内容到剪贴板<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition···

    2018-05-30关键词: