CSS继承性

一、CSS继承性

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。CSS继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

二、CSS继承的局限性

在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。

首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。如下图所示，如果继承了边框属性，那么文档看起来就会很奇怪，除非采取另外的措施关掉边框的继承属性。

如上图所示，多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。

三、CSS继承中容易引起的错误

有时候继承也会带来些错误，比如说下面这条CSS定义：

Body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：

 
 
Body,table,th,td{color:blue}  
 

这样表格内的文字也会变成蓝色。

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
不及继承：也就是指子节点不能继承父节点的属性，譬如：

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

相反，可继承就是父节点设置了这个属性后，子节点就可以继承他的属性，

这里要明白什么是块状元素，内联元素。
块状元素，是其属性display的默认值为block的标签，也就是div，p，h1等等，但不代表这些标签一定是块状元素，当程序员把他的display属性改变，就不是块状元素，例如：
html

<div style="border:1px solid #ff0000; width:400px; padding:10px;">这是块状元素</div>
<div style="border:1px solid #ff0000; width:400px; padding:10px;">这也是块状元素</div>

效果如下：

但如果，把其中一个div的display设置成inline，就变成：

ps：内联元素，width，和height属性都不起效的。
再看看例子：
html

<span style="border:1px solid #ff0000; width:400px; padding:10px;">我是内联元素</span>
<span style="border:1px solid #ff0000; width:400px; padding:10px;">我也是内联元素</span>

效果如下：

我们把其中一个display设置成block时就会有：

很明显的是，一个标签没有说是一定是块状元素，当他的display属性被设置了，就会改变他。
有一点要注意的是当原本是内联元素的被设置float，也会变成呢个块元素的，把上面的“我是内联元素，设置为float：left，效果如：


你是否看出有点不同，和两个都是块元素，有区别。这里不讨论。