也许你瞧不起以前的css,但是你不该再轻视眼下的css。近年来css的变量系统已逐步得到各大浏览器厂商支持,自定义选择器等强势袭来,嵌套系统/模块系统也在路上……为了更好的掌握css这门语言,很有必要把之前零零散散的css知识回炉重造下。
css作为一门语言而,也有其继承原理,虽然简单,你却未必掌握。
属性的是否默认继承
初始值是指当属性没有指定值时的默认值,如这些语句的值都是默认值: <代码>背景颜色:透明> 左:汽车, <代码>浮动:没有> 宽度:汽车>
css的继承很简单,分为默认继承的和默认不继承的,但所有属性都可以通过设置, <代码> ,实现继承。
当没有指定值时,默认继承的属性取父元素的同属性的计算值(相当于设置了, <代码> ,继承),默认不继承的属性取属性的初始值(时相当于设置了, 初始,<代码>)。
默认继承的(“继承:Yes")的属性:
-
<李>所有元素默认继承:可见性、光标李
<李>内联元素默认继承:字母间距,词间距,空白,行高,颜色,字体,字体类型,字体大小,字体样式,字体参数,粗细,文本——装饰,首字母、方向李
<李>块状元素默认继承:文本,text-align李
<李>列表元素默认继承:list-style, list-style-type, list-style-position, list-style-image李
<李>表格元素默认继承:border-collapse李
默认不继承的(“继承:No")的属性:
-
<李>文本属性默认不继承:vertical-align,文字修饰,文本阴影,空白,unicode-bidi李
<李>盒子属性默认不继承:显示、宽度、高度、填充、保证金,边境,min-width,最小高度,max-width, max-height,溢出,剪辑李
<李>背景属性默认不继承:背景,背景颜色,背景图片,背景平铺方式,背景位置,background-attachment李
<李>定位属性默认不继承:浮动,清晰,位置,,右,下,左,z - index李
<李>内容属性默认不继承:内容,counter-reset, counter-increment李
<李>轮廓属性默认不继承:outline-style, outline-width,边框色,轮廓李
<李>页面属性默认不继承:大小,page-break-before, page-break-after李
<李>声音属性默认不继承:暂停,后停一下,停顿,cue-before, cue-after,提示,演奏
可以看到涉及到文本相关的属性,都是默认继承的,毕竟css设计之初就是为了更好的在网页上呈现文字。
需要注意的是,部分属性的默认值是会根据元素的, <代码>显示> vertical-align ,属性,如果是, <代码>显示:内联代码,元素,则其计算值为基线对齐, <代码> vertical-align:基线,,如果是, <代码>显示:inline-block> vertical-align:底部/代码>,
。通用属性值初始,继承和设置
css为控制继承提供了四个特殊的通用属性值(属性, <代码>回复,只有很少的浏览器支持,所以实际上是三个),每个css属性都能使用这些值。
-
<李>
设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”。
-
<李>初始
将属性的初始值应用于元素。实际上,就是“重置为默认值”。
-
<李>设置
将属性重置为自然值,也就是如果属性是自然继承的那么就是, <代码> ,继承,否则和, <代码>初始>
实例
这些通用属性值可以有很多妙用,举个栗子:
-
<李>利用,
<代码> ,实现如下图片倒影:
<>以前div: after { 内容,,,:,“,“; ,,,位置:,绝对; ,,,:,100%; ,,,左:,0; ,,,右:,0; ,,,底部:,-100%; ,,,背景图片:,继承,,//,背景图片继承,这一般人想不到吧… ,,,变换:,rotateX(180度); } 网络前端开发学习Q-q-u-n:, 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
-
<李>利用,
<代码>初始
