css中可以和不可以继承的属性

不可继承的: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。

不及继承:也就是指子节点不能继承父节点的属性,譬如:

<div style="border:1px solid #ff0000;">
这是父节点

    <p>
         这是子节点

    </p>

</div>

  效果如下:

如果子节点能继承父节点的border属性,那么也会有一个红色边框。

所有元素可继承: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属性改变,就不是块状元素,例如:

<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属性都不起效的。
再看看例子:

<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,效果如:

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

明白了什么是块状元素,就会对什么便签能继承什么属性,什么便签不能,就会有一个认识,这里最后一个例子,是一些容易被人忽略的属性继承:

<div style="text-indent:2em; border:1px solid #ff0000; width:400px;">
这是一级块状元素
	<div style="border:1px solid #060">
    	这是二级块状元素,这是突出效果的,没别的意思,巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
		<p style=" border:1px solid #0000ff">
	    	这是三级块状元素
	    	<span style="background-color:#333; color:#ffffff;">
	        	这是内联元素
	        </span>
	    </p>
    </div>
</div>

  

text-indent:文本缩进,这是一个比较少用的属性,它是一段文本的第一行缩进多少个像素,或字符。很明显它是一个文本编辑的属性,但有些人会把它当成间距属性使用,这样子做其实是很怪诞的:
第一,你不可保证,那段文字,永远都只有一行。
第二,定义为text-indent的子节点是块状元素,会继承这个属性的,但而其他人接受你写的css后,多数的时候都不会预计到子节点继承text-indent属性,而去修改。
为了避免这种不可预计的继承,你可以用padding,来代替text-indent,而不是,你发现这个属性,觉得很新奇,一时童心未泯地用。

原文转载自http://blog.163.com/[email protected]/blog/static/170468853201326421822/

时间: 2024-10-11 17:27:09

css中可以和不可以继承的属性的相关文章

盘点CSS中可以和不可以继承的属性

一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向 3.盒子模型的属性:width.height.margin .margin-top.margin-right.margin-bottom.margin-left.border.border-style

CSS 中 Font-Family 中英文对照表

在 CSS 中,我们经常会使用 Font-Family 属性来定义字体.其中,中文字体如果直接使用中文名称,很有可能在非中文的系统环境下造成字体异常.所以通常使用字体的英文名称定义 Font-Family 的值. 常用字体中英文对照表 中文 英文 宋体 SimSun 黑体 SimHei 楷体 KaiTi 新宋体 NSimSun 仿宋 FangSong 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 标楷体 BiauKai 新细明体 PMingLiU 细

div+css中clear用法

原文:div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该属性的值指出了不允许有浮动对象的边. 这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被floa

CSS中继承,特殊性,层叠与重要性

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: <html><head> <style> p{border:1px solid red} </style> </head> <body> <p>123<span>123</span>123</p> </body> </h

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选

CSS中不透明度继承问题的处理

关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者. 那么, 什么时候会发生不透明度继承问题? 当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会发生不透明度继承问题,此时子元素也继承了父元素的不透明度,并且再另外设置子元素不透明度是无效的(如果父元素没有设置不透明度,子元素的设置是有效的). 下面是相关代码和效果图: CSS部分: #parent{ height:400px; width:500px; background:green; o

css中属性值继承小解

继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的: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.

举例详解CSS中的继承

CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元素都是文档树的一部分,除了最顶级的HTML元素,每个元素都有其对应的父级元素,每一个父级元素的CSS属性值都可以被应用到它的子元素中去. 举个栗子,H1标签包含着一个EM标签: EM就是H1标签的子元素,任何H1中继承的CSS属性值会自动在EM标签中生效,比如: CSS Code复制内容到剪贴板 h

CSS中文本继承情况

无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align:  垂直文本对齐 CSS中文本可以继承父级样式 体系列属性 font:组合文字 font-family:字体系列 font-weight:文字粗细 font-size:文字大小 font-style:文字风格 文本系列 text-indent:文本缩进 text-align:文本对齐方式 line-height:行高 color:文本颜色