CSS可继承，不可继承汇总来了，你都知道吗？

引言

CSS属性可分为可继承属性和不可继承属性。可继承属性是指当父元素的某个属性没有设置时，子元素会继承该属性。而不可继承属性是指当父元素的某个属性没有设置时，子元素不会继承该属性。下面我们来详细介绍一下CSS属性的继承规则和具体的可继承和不可继承属性。

CSS属性的继承规则

CSS属性的继承规则如下：

对于每个元素，浏览器都有一个初始的样式表，其中包含了所有的CSS属性以及它们的默认值。
当一个元素没有指定某个属性时，它会继承父元素的相应属性。
如果父元素也没有指定该属性，那么它就会继承自它的父元素，以此类推，直到找到有该属性的元素为止。
如果所有的祖先元素都没有指定该属性，那么就会使用浏览器的默认值。

可继承属性

下面我们来看一下CSS中的可继承属性，这些属性可以被子元素继承，不需要单独设置。

1. 字体系列属性

字体属性包括font、font-family、font-size、font-style、font-weight、line-height等。这些属性定义了文字的样式和排版，它们的值会从父元素传递到子元素。

css 复制代码

font-family  
font-size  
font-style  
font-weight

2. 文本系列属性

文本属性包括text-align、text-indent、text-transform、text-decoration等。这些属性控制了文本的对齐、缩进、大小写转换、下划线等效果，它们的值也会从父元素传递到子元素。

arduino 复制代码

text-align  
text-decoration  
text-indent  
text-transform  
line-height  
letter-spacing  
word-spacing

3. 颜色属性

颜色属性包括color、background-color、border-color等。这些属性定义了文本、背景、边框的颜色，它们的值也会从父元素传递到子元素。

css 复制代码

color

4. 列表属性

列表属性包括list-style-type、list-style-image、list-style-position等。这些属性定义了列表项的样式、位置和图像，它们的值也会从父元素传递到子元素。

css 复制代码

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

5. 表格属性

表格属性包括border-collapse、border-spacing、caption-side、empty-cells等。这些属性定义了表格的边框、间距、标题位置和空单元格处理方式，它们的值也会从父元素传递到子元素。

css 复制代码

border-collapse  
border-spacing  
caption-side  
empty-cells

6. 其他属性

其他可继承属性还包括visibility、cursor等，它们控制了元素的可见性和鼠标光标形态等效果，它们的值也会从父元素传递到子元素。

css 复制代码

cursor  
visibility

不可继承属性

下面我们再来看一下CSS中的不可继承属性，这些属性不能被子元素继承，需要单独设置。

1. 盒模型属性

盒子模型属性包括width、height、padding、margin、border等。这些属性定义了元素的尺寸、填充、边距和边框，它们的值只适用于该元素本身，不会影响子元素。

css 复制代码

width  
height  
margin  
padding  
border

2. 定位属性

定位属性包括position、top、right、bottom、left、z-index等。这些属性定义了元素的定位和堆叠顺序，它们的值只适用于该元素本身，不会影响子元素。

css 复制代码

position  
top  
bottom  
left  
right

3.清除浮动

清除浮动属性包括clear。这个属性用于清除浮动元素对周围元素的影响，也只适用于该元素本身，不会影响子元素。

arduino 复制代码

clear

4. 背景属性

背景属性包括background-image、background-repeat、background-position、background-size等。这些属性定义了元素的背景图像、重复方式、位置和大小，也只适用于该元素本身，不会影响子元素。

arduino 复制代码

background-image
background-repeat
background-position
background-size

5. 文本属性

虽然文本属性中的大部分是可继承属性，但是text-shadow和white-space是不可继承的。text-shadow用于设置文本阴影，而white-space用于控制空白字符的处理方式，也只适用于该元素本身，不会影响子元素。

css 复制代码

text-shadow
white-space

6. 其他属性

其他不可继承属性还包括display、float、overflow、vertical-align、clip 等，它们控制了元素的显示方式、浮动、溢出和垂直对齐等效果，也只适用于该元素本身，不会影响子元素。

css 复制代码

display
float
overflow
vertical-align  
clip

总结

在CSS中，可继承属性和不可继承属性的区别非常重要。了解哪些属性是可继承的，哪些属性是不可继承的，可以帮助我们更好地控制网页的样式和排版，不至于发生了样式重叠而不自知。

当我们需要设置一个元素的样式时，如果这个属性是可继承的，我们可以将它设置在父元素上，从而使子元素继承这个样式。如果这个属性是不可继承的，我们必须将它分别设置在每个子元素上。

同样的，当我们需要修改一个元素的样式时，也需要注意它的属性是可继承的还是不可继承的。如果这个属性是可继承的，我们只需要修改父元素的样式，就可以同时修改所有子元素的样式。如果这个属性是不可继承的，我们必须逐个修改每个子元素的样式。

CSS属性的继承规则和可继承属性与不可继承属性的列表，对于我们的实际开发来说是非常重要的知识点。在实际开发中，正确地设置CSS样式可以可以提高网页的可读性和可维护性，也可以减少不必要的代码，规避没意义的BUG。

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~