HTML | DOM 样式孤儿属性

在 HTML | DOM 中，某些样式属性被称为“孤儿属性”，这些属性是不能从父元素继承的。这意味着，当设置这些属性时，子元素的样式不会受到影响。

常见的样式孤儿属性

以下是 HTML | DOM 中最常见的样式孤儿属性：

1. display
2. float
3. clear
4. position
5. z-index

display

‘display’属性定义元素如何显示。

有些元素的默认值为‘display：none’，例如‘’和‘’标签。

各种‘display’属性的值可归为下列几类：

1. 块级元素：'display: block'
2. 内联元素：'display: inline'
3. 行内块元素：'display: inline-block'
4. 无：'display: none'

注意：块级元素会占据一整行。当向一个块级元素中添加内容时，它们会自上而下排布。

float

float属性定义元素在哪边浮动。

如果一个元素设置了'float: left'或'float: right'属性，则它会浮动到它在父元素中的偏移位置上。

如果设置了'float: none'属性，则元素不浮动。

注意：浮动属于CSS布局中复杂的一部分，正确使用需要掌握一定的技巧。

clear

'clear'属性定义是否允许浮动元素出现在同一行。

该属性有以下几个值：

1. none
2. left
3. right
4. both

当一个元素设为'clear: left'时，它会被清除左浮动元素的影响，不允许在该元素左侧出现浮动元素。同理，'clear: right'会清除右浮动元素的影响。

position

'position'属性定义元素的定位方式。

该属性有以下几个值：

1. static：默认值，未指定定位方式。
2. relative：相对定位，元素的位置相对于它原来所在的位置。
3. fixed：固定定位，相对于浏览器窗口固定定位。
4. absolute：绝对定位，相对于父元素绝对定位。
5. sticky：粘性定位，相对于父元素或浏览器窗口具有粘性定位。

当元素被定位后，可以通过'left'、'right'、'top'、'bottom'属性来控制它在视图中的位置。

z-index

'z-index'属性定义元素在堆叠元素中的位置关系。

较高的'z-index'属性值位于较低的'z-index'属性值上面。

注意：当没有为两个元素都设置'z-index'属性时，它们的堆叠顺序是按 HTML 所描述元素的顺序来排列的。