169it科技资讯
169it -->


当前位置:  编程技术>WEB前端

CSS的inherit与auto使用分析

    来源: 互联网  发布时间:2014-10-07

通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了。CSS是一门很简单的语言,易学易用,但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为,CSS是由以下三大块构成的:默认值,继承系统与加权系统。默认值,也就是浏览器在用户没有设置属性的情况下,默认指定的属性。CSS框架基本都有一个叫reset.css 的文件,就是对其进行重设,消除各浏览器的差异的。继承系统就是下面要重点讨论的东西。加权系统,也就是优先级的问题,不在本文的讨论范畴,不说了。另,这三个东西都面临着IE Bug的侵袭,危害甚大,自己另行了断吧(笑)。

在CSS中,许多属性都是可以继承的,如某个段落的字体设置为白色,其元素的字体不用设置或设置为inhert,它就是白色。这些属性被称之为inherited property,它会从父元素获取对应属性的经过计算与转换的值(computed value),如果父元素和它的情形一样,它就继续往上找,最后没有就使用浏览器的默认值。

下面是 inherited properties的一览表:
代码如下:

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
opacity
list-style-image
list-style-type
quotes
text-align
text-indent
text-transform
white-space
word-spacing

CSS
父元素
子元素

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我们给父元素设置了字体的样式,没有设置子元素的,当取出子元素的时,发现其值转换为rgb格式(当然IE除外啦!)
不过,在IE7及其之前的版本,是不支持用inhert来设置direction与visibility以外的样式属性。具体可参见这里与这里
在IE8中,原本是inherited property的text-align在th中失效。
<table>
<tr>
<th>Ruby</th>
<th>Rouvre</th>
</tr>
<tr>
<td>By</td>
<td>司徒正美</td>
</tr>
</table>
table, tr, td, th {
border-collapse: collapse;
border: 1px solid #000;
}
table {
text-align: right;
}
td, th {
width: 100px;
}
本来th应该会从table中继承文本向右对齐的设置,但失效了……
table, tr, td, th { border-collapse: collapse; border: 1px solid #000; } table { text-align: right; } td, th { width: 100px; } CSS Ruby Rouvre By 司徒正美
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解决IE8这个弱智Bug也很容易,就是显式地设置inhert。
table, tr, td, th {
border-collapse: collapse;
border: 1px solid #000;
}
table {
text-align: right;
}
td, th {
width: 100px;
}
th {
text-align: inherit;
}
table, tr, td, th { border-collapse: collapse; border: 1px solid #000; } table { text-align: right; } td, th { width: 100px; } th { text-align: inherit; } CSS Ruby Rouvre By 司徒正美
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

此外还有一些CSS属性是不能继承的,最经典如border系列。它被称之为non-inherited property,如果我们不为它设置,我们只能取得浏览器的默认值,默认值在火狐中被称之为 initial value 。一个相关的好消息是,默认值在火狐也可以指定了,这样我们就不用reset样式了!
下面是non-inherited property的一览表:
background
border
bottom
clear
display
float
height
left
margin
outline
overflow
padding
position
right
top
visibility
width
z-index
CSS
父元素
子元素

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我们给父元素设置了背景颜色,没有设置子元素的,这时会取得浏览器的默认值transparent(W3C那一方好像只要是颜色都会转换为rgb格式,多出的a为Alpha)
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css http://elizabethcastro.com/html/extras/cssref.html
接着我们来看auto,这是一个含糊不清但是有长度概念的值。应用于以下属性:
overflow
cursor
height
width
marker-offset
margin
margin-* (left|bottom|top|right|start|end)
top
bottom
left
right
table-layout
z-index
-moz-column-width
languages
在块级元素的可度量的属性中(如width,height),如果不设置值,其默认值是auto,但它很容易会被父级元素的值覆盖,也就是隐式地成为了inhert了。在内联元素中,由于不具备盒子模型,如果不设置,就算是火狐也原本奉还它,这对于精确计算元素的宽度与高度是非常不利的。auto还有对称性,这个在居中布局我们常常运用到它。在非度量的属性中,如overflow,就要具体情况具体分析了。
PS:此文为http://www./article/21718.htm做准备。

    
相关技术文章:
    ▪firefox下rowspan+border+border-collapse的bug

     后查具体情况概述为:firefox+table rowspan+border+border-collapse:collapse; 表现情况是:第一行与最后一行正常,其余的中间行,全部都与预期的border不同。 先看示例吧: Rank's HTML document ......


    ▪了解CSS的查找匹配原理,让CSS更简洁、高效

     看1个简单的CSS: DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。 匹配原理: 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:   先查找html中所有class='red'的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是......


    ▪Zen Coding 快速编写HTML/CSS代码的实现

     在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。 你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。JavaScript框架应运而生,它们同时引入了CSS选择器......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号