一、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。
不及继承:也就是指子节点不能继承父节点的属性,譬如:
相反,可继承就是父节点设置了这个属性后,子节点就可以继承他的属性,
块状元素,是其属性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,效果如:
你是否看出有点不同,和两个都是块元素,有区别。这里不讨论。