当前位置：首页 > news >正文

唐河网站制作/百度助手app下载安装

news 2025/7/3 22:50:03

唐河网站制作,百度助手app下载安装,有限公司属于什么企业类型,网上设计师接单平台目录继承一、什么是继承？2.1 祖先元素2.2 默认继承/默认不继承二、可继承属性2.1 字体相关属性2.2 文本相关属性2.3 列表相关属性三、不可继承属性3.1 盒模型相关属性3.2 背景相关属性四、属性初始值4.1 根元素4.2 属性的初始值4.3 得出结论五、强制继承5.1 in…

继承
- 一、什么是继承？
- - 2.1 祖先元素
  - 2.2 默认继承/默认不继承
- 二、可继承属性
- - 2.1 字体相关属性
  - 2.2 文本相关属性
  - 2.3 列表相关属性
- 三、不可继承属性
- - 3.1 盒模型相关属性
  - 3.2 背景相关属性
- 四、属性初始值
- - 4.1 根元素
  - 4.2 属性的初始值
  - 4.3 得出结论
- 五、强制继承
- - 5.1 initial关键字
  - 5.2 inherit关键字
  - 5.3 unset关键字
- 六、继承的优先级
- 七、继承的性能
- - 7.1 减少渲染计算
  - 7.2 精简代码

继承

一、什么是继承？

在 CSS 里，继承是一种机制，借助它元素能够从其祖先元素那里获取属性值这一特性可以让代码更简洁，减少重复的样式声明

2.1 祖先元素

<div class="outer"><div class="inner"></div>
</div>

outer是innner的祖先元素

2.2 默认继承/默认不继承

在CSS中，每个 CSS 属性定义的概述都指出了这个属性是默认继承还是默认不继承的（"Inherited":Yes/No"）

对于可继承属性，没有指定值时的子元素会取父元素的同属性计算值
对于不可继承属性，子元素不会自动获取父元素设置的这些同属性计算值

/* 对于上面的HTML代码 */
.outer{color:red;width:100px;
}
.inner{/* 当子元素没有显示声明color与width的值，它们默认取什么呢？ */
}

二、可继承属性

某些 CSS 属性具备继承性，也就是说子元素会自动继承父元素设置的这些属性值。常见的可继承属性如下：

2.1 字体相关属性

font-family ( 字体族 )
font-size ( 字体大小 )
font-weight ( 字体粗细 )
font-style ( 字体族 )

2.2 文本相关属性

color ( 文本颜色 )
text-align ( 文本对齐方式 )
line-height ( 行高 )

2.3 列表相关属性

line-style-type ( 列表项标记类型 )
line-style-position ( 列表项标记位置 )

三、不可继承属性

还有部分 CSS 属性是不可继承的，子元素不会自动获取父元素设置的这些属性值。常见的不可继承属性有：

3.1 盒模型相关属性

width ( 宽度 )
height ( 高度 )
margin ( 外边距 )
padding ( 内边距 )
border ( 边框 )

3.2 背景相关属性

background-color ( 背景颜色 )
background-image ( 背景图像 )

四、属性初始值

上面我们提到了默认继承和默认不继承属性的特点与具体类型
那么现在出现一个问题：
父元素的属性来自哪里？对于不可继承属性，这些属性默认取值又是什么？

4.1 根元素

首先我们需要知道一个概念“根元素”，它是整个文档树的起始点，也是所有其他元素的父元素或者祖先元素
在 HTML 文档中，<html> 元素是根元素
对于大部分属性，只有文档的根元素会使用属性的初始值，而其他元素会依据继承规则或者层叠规则来确定属性值

4.2 属性的初始值

属性的初始值是由 CSS 规范定义的，这些初始值的定义是为了保证在不同浏览器和设备上有一个统一的基础样式表现。
比如color 属性的初始值是 black，font-size 的初始值是 medium 等

4.3 得出结论

对于具有继承性的属性
- 若子元素没有为这些属性显式声明值，它们会从父元素那里继承属性值。
- 因为根元素是所有其他元素的祖先，所以在中间元素没有重新赋值的情况下，子元素最终会继承根元素上设置的属性值
对于默认不继承的属性
- 当元素没有被显式地设置该属性值时，元素使用的就是该属性的初始值。