CSS可继承，不可继承汇总来了，你都知道吗？
引言
CSS属性可分为可继承属性和不可继承属性。可继承属性是指当父元素的某个属性没有设置时，子元素会继承该属性。而不可继承属性是指当父元素的某个属性没有设置时，子元素不会继承该属性。下面我们来详细介绍一下CSS属性的继承规则和具体的可继承和不可继承属性。
CSS属性的继承规则
CSS属性的继承规则如下：
- 对于每个元素，浏览器都有一个初始的样式表，其中包含了所有的CSS属性以及它们的默认值。
- 当一个元素没有指定某个属性时，它会继承父元素的相应属性。
- 如果父元素也没有指定该属性，那么它就会继承自它的父元素，以此类推，直到找到有该属性的元素为止。
- 如果所有的祖先元素都没有指定该属性，那么就会使用浏览器的默认值。
可继承属性
下面我们来看一下CSS中的可继承属性，这些属性可以被子元素继承，不需要单独设置。
1. 字体系列属性
字体属性包括font、font-family、font-size、font-style、font-weight、line-height等。这些属性定义了文字的样式和排版，它们的值会从父元素传递到子元素。
font-family
font-size
font-style
font-weight
2. 文本系列属性
文本属性包括text-align、text-indent、text-transform、text-decoration等。这些属性控制了文本的对齐、缩进、大小写转换、下划线等效果，它们的值也会从父元素传递到子元素。
text-align
text-decoration
text-indent
text-transform
line-height
letter-spacing
word-spacing
3. 颜色属性
颜色属性包括color、background-color、border-color等。这些属性定义了文本、背景、边框的颜色，它们的值也会从父元素传递到子元素。
color
4. 列表属性
列表属性包括list-style-type、list-style-image、list-style-position等。这些属性定义了列表项的样式、位置和图像，它们的值也会从父元素传递到子元素。
list-style-type
list-style-position
list-style-image
5. 表格属性
表格属性包括border-collapse、border-spacing、caption-side、empty-cells等。这些属性定义了表格的边框、间距、标题位置和空单元格处理方式，它们的值也会从父元素传递到子元素。
border-collapse
border-spacing
caption-side
empty-cells
6. 其他属性
其他可继承属性还包括visibility、cursor等，它们控制了元素的可见性和鼠标光标形态等效果，它们的值也会从父元素传递到子元素。
cursor
visibility
不可继承属性
下面我们再来看一下CSS中的不可继承属性，这些属性不能被子元素继承，需要单独设置。
1. 盒模型属性
盒子模型属性包括width、height、padding、margin、border等。这些属性定义了元素的尺寸、填充、边距和边框，它们的值只适用于该元素本身，不会影响子元素。
width
height
margin
padding
border
2. 定位属性
定位属性包括position、top、right、bottom、left、z-index等。这些属性定义了元素的定位和堆叠顺序，它们的值只适用于该元素本身，不会影响子元素。
position
top
bottom
left
right
3.清除浮动
清除浮动属性包括clear。这个属性用于清除浮动元素对周围元素的影响，也只适用于该元素本身，不会影响子元素。
clear
4. 背景属性
背景属性包括background-image、background-repeat、background-position、background-size等。这些属性定义了元素的背景图像、重复方式、位置和大小，也只适用于该元素本身，不会影响子元素。
background-image
background-repeat
background-position
background-size
5. 文本属性
虽然文本属性中的大部分是可继承属性，但是text-shadow和white-space是不可继承的。text-shadow用于设置文本阴影，而white-space用于控制空白字符的处理方式，也只适用于该元素本身，不会影响子元素。
text-shadow
white-space
6. 其他属性
其他不可继承属性还包括display、float、overflow、vertical-align、clip 等，它们控制了元素的显示方式、浮动、溢出和垂直对齐等效果，也只适用于该元素本身，不会影响子元素。
display
float
overflow
vertical-align
clip
总结
在CSS中，可继承属性和不可继承属性的区别非常重要。了解哪些属性是可继承的，哪些属性是不可继承的，可以帮助我们更好地控制网页的样式和排版，不至于发生了样式重叠而不自知。
当我们需要设置一个元素的样式时，如果这个属性是可继承的，我们可以将它设置在父元素上，从而使子元素继承这个样式。如果这个属性是不可继承的，我们必须将它分别设置在每个子元素上。
同样的，当我们需要修改一个元素的样式时，也需要注意它的属性是可继承的还是不可继承的。如果这个属性是可继承的，我们只需要修改父元素的样式，就可以同时修改所有子元素的样式。如果这个属性是不可继承的，我们必须逐个修改每个子元素的样式。
CSS属性的继承规则和可继承属性与不可继承属性的列表，对于我们的实际开发来说是非常重要的知识点。在实际开发中，正确地设置CSS样式可以可以提高网页的可读性和可维护性，也可以减少不必要的代码，规避没意义的BUG。
那么这篇文章就到这里结束啦~
如果你想了解更多这类文章，点赞关注作者更新更多~