前言

首先让我们从英文的角度理解这两个单词是什么意思？
inherit：继承
initial：最初的、开始的

一、inherit（继承）

1: 定义

inherit 关键字指定一个属性应从父元素继承它的值。

2：用法

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。

3：例子

3.1代码

 span {color: blue;border:1px solid black;
}
.extend span  {color: inherit;
}

<div>这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
</div>
<div class="extend" style="color:red">这里是一个绿色的 <span>span 元素</span>，因为它继承了父元素。
</div>
<div class="extend">这里是一个黑色的 <span>span 元素</span>，因为它继承了父元素并且父元素没有颜色。
</div>
<div style="color:green">这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
</div>

3.2效果图

3.3说明

如上述示例的效果图，第二行和第三行都使用了inherit 来继承父元素的颜色属性，第二行有红色，第三行没有（继承了寂寞），显示了上图效果。

二、使用步骤

1: 定义

initial 关键字用于设置 CSS 属性为它的默认值。

2：用法

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

3：例子

3.1代码

div {color: red;
}
h1 {color: initial;
}

<div><h1>Initial</h1><p>div 元素内的标题和文本的 color 属性被设置为 "red"。标题元素的 color 属性被另外设置为 "initial"，因此是这里是红色，标题是默认的黑色</p>
</div>

3.2 效果图

3.3 说明

如上示例：div 元素内的标题和文本的 color 属性被设置为 "red"。标题元素的 color 属性被另外设置为 "initial"，因此是这里是黑色，标题是红色

总结：inherit 和 initial 的区别

同：inherit和initial这两个关键字可用于任何 HTML 元素上的任何 CSS 属性。
异：inherit是继承，initial 是恢复最初值。

参考文章：

inheritw3c官方解释：http://www.w3cmap.com/cssref/css-inherit.html
initialw3c官方解释：http://www.w3cmap.com/cssref/css-initial.html

css中inherit和initial的区别相关推荐

css里dotted,CSS中dashed和dotted的区别有哪些
对于刚刚接触css的朋友们来说都会分不清dashed和dotted,那么你知道CSS中dashed和dotted的区别有哪些吗?那么针对这个问题爱站小编就为大家接受CSS中dashed和dotted的 ...
CSS中background与background-image的区别
CSS中background与background-image的区别 1.如果只是设置两张背景图不涉及CSS样式那么两者都可以使用 2.如果设置样式那就只能用background,如以下是不适用ba ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别.link ...
【转】在CSS中 ID与Class的区别?谢谢
在样式表定义一个样式的时候,可以定义id也可以定义class.1.在CSS文件里书写时,ID加前缀"#":CLASS用"."2.id一个页面只可以使用一次:cl ...
css中padding和magin的区别
1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个 ...
CSS中flex和inline-flex的区别
两者的区别描述: flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示一句话来描述就是当Flex Box 容器没有设置宽度大小限制时,当display 指 ...
verilog中always和initial的区别
verilog中的语句赋值语句: 阻塞赋值语句(=).非阻塞赋值语句(<=) 块语句 : 顺序块(begin-end).并行块(fork-join) 条件语句: if-else语句.case语 ...

css中inherit和initial的区别

文章目录

前言

一、inherit（继承）

1: 定义

2：用法

3：例子

3.1代码

3.2效果图

3.3说明

二、使用步骤

1: 定义

2：用法

3：例子

3.1代码

3.2 效果图

3.3 说明

总结：inherit 和 initial 的区别

css中inherit和initial的区别相关推荐

最新文章

热门文章