CSS黑魔法：“inheritance”和“No! You Can't Touch It!”

2023-01-08 09:51:03

CSS属性继承的玄妙世界：深入探寻其奥秘和例外

在CSS的魔法世界里，继承性是一个强大的工具，让你可以轻而易举地将样式应用于整个网站上的元素，而不必一遍又一遍地重复相同的代码。然而，并非所有的CSS属性都享有继承的殊荣，有些属性披上了"禁止继承"的斗篷，阻挡你试图将它们施加于子元素的企图。今天，我们就踏上揭秘之旅，探索CSS属性继承的奥秘，看清哪些属性可以继承，哪些属性只能直接施法。

可继承属性：display和visibility

在这场继承盛宴中，display和visibility属性堪称秘密武器，让你轻松驾驭元素的显示方式和可见性。display属性控制元素是如何出现的，是块状、内联还是其他形式；而visibility属性决定了元素是否可见。这两个属性都可继承，这意味着你可以施法于父元素，让其影响子元素的展示和隐匿。

例如，如果你想让父元素及其子元素都消失在幕后，只需要将父元素的visibility属性设为hidden。同样地，如果你希望父元素及其子元素都堂堂正正地以块状示人，只需将父元素的display属性设为block。

不可继承属性：overflow和position

然而，在CSS的世界里，overflow和position属性却像是"黑魔法"般的存在，它们被施加了"禁止继承"的咒语。这意味着你无法通过施法于父元素，来控制其子元素的溢出行为或定位方式。

溢出属性overflow决定了当元素的内容溢出边界时如何处理，有四个值可供选择：visible、hidden、scroll和auto。如果你想隐藏溢出内容，只能直接对元素本身施法，而不能通过继承父元素的overflow属性来实现。

定位属性position决定了元素在页面上的位置，有五个值可供选择：static、relative、absolute、fixed和sticky。如果你想让元素相对于父元素进行定位，也只能直接对元素本身施法，而不能通过继承父元素的position属性来实现。

表格布局和定位属性：继承禁令

除了display、visibility、overflow和position属性外，还有其他一些表格布局属性和定位属性也加入了"不可继承"阵营，包括：

表格布局属性： caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）
定位属性： float、clear、top、right、bottom、left、min-width、min-height、maxwidth、max-height、clip

这些属性只能直接对元素本身施法，不能通过继承父元素的属性来实现。