如何确定一个 CSS 属性是否可以被继承

319 阅读1分钟

基本原则

文本属性字体属性通常是可以继承的,但是,涉及到盒模型属性布局属性(例如,display, position),背景属性普遍是不能继承。需要特别注意的是元素可见性属性是可以继承的。

验证方式

在 chrome 浏览器打开开发者控制台,选择 elemens 选项,点击具体某一个元素就会出现被选中元素的样式和它的继承属性。

Jietu20220216-153351.png

从 inherited from div.parent.strategy1 可以看到当前元素继承自父元素的属性中 position 属性置灰,不可继承。z-index 属性不可以继承。text-align 属性被成功继承。

样式优化

CSS 优化的方向之一就是少写 css 属性,尽量利用继承来的父元素属性。毕竟,css 的查找,布局和渲染是需要时间的。每写一行 css 属性时都要问自己,它可以继承码。