26.CSS 继承属性速查表 & 内部聚焦

CSS 继承属性速查表

CSS 规范明确规定了哪些 CSS 属性是继承的,但相关附录并不是最友好的资源。以下是你最有可能遇到的继承属性的快速参考:

  • border-collapse

  • border-spacing

  • caption-side

  • color

  • cursor

  • direction

  • empty-cells

  • font-family

  • font-size

  • font-style

  • font-variant

  • font-weight

  • font-size-adjust

  • font-stretch

  • font

  • letter-spacing

  • line-height

  • list-style-image

  • list-style-position

  • list-style-type

  • list-style

  • orphans

  • quotes

  • tab-size

  • text-align

  • text-align-last

  • text-decoration-color

  • text-indent

  • text-justify

  • text-shadow

  • text-transform

  • visibility

  • white-space

  • widows

  • word-break

  • word-spacing

  • word-wrap

这个速查表列出了在 CSS 中默认继承的属性。继承是 CSS 的一个关键概念,它允许子元素自动获得某些属性的值从它们的父元素,而不必明确地为每个子元素设置这些值。

这个列表包括了许多与文本和字体样式相关的属性,如 colorfont-familyfont-sizeline-height 等。这意味着,如果你为一个元素设置了 color: blue,它的所有子元素也会有蓝色的文本,除非它们有自己的 color 值。

同样地,text-aligntext-indenttext-transform 等属性也会被继承,这在创建一致的排版样式时非常有用。

一些与列表样式相关的属性如 list-style-typelist-style-position 也是继承的,这使得在嵌套列表中保持一致的样式变得容易。

有趣的是,visibility 属性也是继承的。这意味着,如果你将一个元素设置为 visibility: hidden,其所有子元素也将是不可见的,除非它们有自己的 visibility 值。

然而,需要注意的是,并非所有的 CSS 属性都是继承的。最明显的例子是与盒模型相关的属性,如 marginpaddingborder 等,以及定位属性如 positiontopleft 等。这些属性必须为每个需要它们的元素明确设置。

相关推荐
selectDele1 天前
Solid.js和React的比较
前端·javascript·react.js·solid.js
小旋风012341 天前
前端对接豆包AI(vue2版本)
前端·人工智能
—Qeyser1 天前
Flutter AppBar 导航栏组件完全指南
前端·javascript·flutter
Amumu121381 天前
React扩展(一)
前端·javascript·react.js
cypking1 天前
三、前端规范化 项目代码规范
前端·代码规范
xkxnq1 天前
第二阶段:Vue 组件化开发(第 28天)
前端·javascript·vue.js
Yvonne爱编码1 天前
前端工程化进阶:从搭建完整项目脚手架到性能优化【技术类】
前端·状态模式
cypking1 天前
二、前端规范化 遇到的问题及解决方案
前端
小范馆1 天前
STM32F03C8T6通过AT指令获取天气API
前端·javascript·stm32
zhengxianyi5151 天前
vue-cli build, vite build 生产部署刷新或弹窗404,页面空白修复方法
前端·javascript·vue.js·nginx·生产部署