CSS--可继承的属性与不可继承的属性--使用/教程/实例

待我称王封你为后i 2023-10-01 10:16 1阅读 0赞

原文网址：[CSS--可继承的属性与不可继承的属性--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍CSS中可继承的属性和不可继承的属性。

**CSS继承的作用**

对于一些可以继承的属性，可以只设置上级的CSS样式，子级会自动继承父级CSS属性（不用设置子级的属性）。这样可以减少CSS代码，便于维护。

**CSS的继承的现象**

HTML

<div style="color: blue">
        <span>这是Demo</span>
    </div>

结果

![9d98de62c996448eb945c8c9eb35a2df.png][]

可以看到，我们没有指定span的color，它用了父节点的颜色，这就是继承。

## 可继承的属性 ##

### 字体属性 ###

font：组合字体  
color：字体颜色  
font-family：规定元素的字体系列  
font-size：设置字体的尺寸  
font-style：定义字体的风格  
font-weight：设置字体的粗细  
font-variant：设置小型大写字母的字体显示文本

**备注**

*  内联元素可继承的字体属性：所有字体属性。
 *  a 标签的字体颜色不能被继承；
 *  h1~h6标签字体的大小也是不能被继承的。

### 文本属性 ###

line-height：行高  
text-indent：文本缩进  
text-align：文本水平对齐  
text-shadow：设置文本阴影  
white-space：设置处理元素内的空白方式  
word-spacing：增加或减少单词间的空白（单词间距）  
letter-spacing：增加或减少字符间的空白（字符间距）  
text-transform：英文大小写转换  
direction：规定文本的书写方向

**备注**

*  内联元素可继承的字体属性：除text-indent、text-align之外的文本属性。

### 表格布局属性 ###

caption-side：表格标题的放置方式  
border-collapse：合并表格边框  
border-spacing：设置相邻单元格的边框间的距离  
empty-cells：隐藏表格中空单元格上的边框和背景

### 列表元素属性 ###

list-style  
list-style-type  
list-style-image  
list-style-position

### 其他 ###

下边几个属性，所有子元素都可继承。

visibility：元素可见性  
cursor：光标属性  
z-index：堆叠顺序

## 不可继承的属性 ##

**显示**

display

**文本属性**

vertical-align：垂直文本对齐  
text-decoration：规定添加到文本的装饰  
text-shadow：文本阴影效果  
white-space：空白符的处理

**盒子模型属性**

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

**背景属性**

background、background-color、background-image、background-repeat、background-position、background-attachment

**定位属性**

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

**生成内容属性**

content、counter-reset、counter-increment

**轮廓样式属性**

outline-style、outline-width、outline-color、outline

**页面样式属性**

size、page-break-before、page-break-after

**声音样式属性**

pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

[CSS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122033129
[9d98de62c996448eb945c8c9eb35a2df.png]: https://img-blog.csdnimg.cn/9d98de62c996448eb945c8c9eb35a2df.png