CSS可继承,不可继承汇总来了,你都知道吗?

引言

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

CSS属性的继承规则

CSS属性的继承规则如下:

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

可继承属性

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

1. 字体系列属性

字体属性包括fontfont-familyfont-sizefont-stylefont-weightline-height等。这些属性定义了文字的样式和排版,它们的值会从父元素传递到子元素。

css 复制代码
font-family  
font-size  
font-style  
font-weight  

2. 文本系列属性

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

arduino 复制代码
text-align  
text-decoration  
text-indent  
text-transform  
line-height  
letter-spacing  
word-spacing  

3. 颜色属性

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

css 复制代码
color  

4. 列表属性

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

css 复制代码
list-style-type  
list-style-position  
list-style-image  

5. 表格属性

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

css 复制代码
border-collapse  
border-spacing  
caption-side  
empty-cells  

6. 其他属性

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

css 复制代码
cursor  
visibility  

不可继承属性

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

1. 盒模型属性

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

css 复制代码
width  
height  
margin  
padding  
border  

2. 定位属性

定位属性包括positiontoprightbottomleftz-index等。这些属性定义了元素的定位和堆叠顺序,它们的值只适用于该元素本身,不会影响子元素。

css 复制代码
position  
top  
bottom  
left  
right  

3.清除浮动

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

arduino 复制代码
clear

4. 背景属性

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

arduino 复制代码
background-image
background-repeat
background-position
background-size

5. 文本属性

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

css 复制代码
text-shadow
white-space

6. 其他属性

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

css 复制代码
display
float
overflow
vertical-align  
clip  

总结

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

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

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

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

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

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

相关推荐
栈老师不回家几秒前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙6 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠10 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
马剑威(威哥爱编程)28 分钟前
MongoDB面试专题33道解析
数据库·mongodb·面试
小远yyds30 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
独行soc3 小时前
#渗透测试#SRC漏洞挖掘#深入挖掘XSS漏洞02之测试流程
web安全·面试·渗透测试·xss·漏洞挖掘·1024程序员节