CSS前端面试题之哪些CSS属性可以继承？

知识补充

其中有一些属性可能因为不常用而被大家遗忘，所以在这里再介绍一下各个属性

`letter-spacing` 和 `word-spacing`

letter-spacing 和 word-spacing 是用来控制文本字母间距和单词间距的 CSS 属性。

1. `letter-spacing`

letter-spacing 控制字符（字母）之间的间距。它可以用来增加或减少字符之间的空隙。

语法：

selector {letter-spacing: value;
}

示例：

p {letter-spacing: 2px; /* 增加每个字母之间的间距为2像素 */
}

在上面的示例中，letter-spacing: 2px; 将会使段落中每个字母之间的间距增加 2 像素。如果你将值设为负数，那么字母之间的间距会变窄。

2. `word-spacing`

word-spacing 控制单词之间的间距。它通常用于调整整个单词之间的距离，而不是单词内部字符的距离。

语法：

selector {word-spacing: value;
}

示例：

p {word-spacing: 5px; /* 增加每个单词之间的间距为5像素 */
}

在这个示例中，word-spacing: 5px; 将会使段落中每个单词之间的间距增加 5 像素。

区别与注意事项

作用对象：letter-spacing 作用于文本的每个字母，而 word-spacing 则作用于单词之间。
影响范围：letter-spacing 会影响整个文本行中的每个字符，而 word-spacing 则只会影响单词之间的距离。
负值使用：两者都可以接受负值，负的 letter-spacing 会使字母更加紧凑，负的 word-spacing 会使单词更接近。

letter-spacing 用于调整字母（字符）之间的间距，在中文文本中不常用，因为汉字通常作为一个整体呈现，单个字符之间的间距调整较少见。
word-spacing 用于调整词（单词）之间的间距，这在中文文本排版中更为常见，可以帮助调整段落或正文的整体视觉效果。

因此，如果需要控制中文文本中词与词之间的间距，应该使用 word-spacing 属性。

text-align，text-indent，text-transform

1. `text-align`

text-align 属性用于设置文本在其容器内的水平对齐方式。

语法：

selector {text-align: value;
}

取值：

left：文本左对齐（默认值）。
right：文本右对齐。
center：文本居中对齐。
justify：文本两端对齐，即增加额外的空格使每行文本达到容器的宽度。

示例：

p {text-align: center;
}

在这个示例中，<p> 元素中的文本会居中显示。

2. `text-indent`

text-indent 属性用于设置段落首行的缩进。

语法：

selector {text-indent: value;
}

取值：

可以使用像素（px）、百分比（%）、ems（em）或其他长度单位来定义缩进的大小。
负值可以用来将首行移到段落的外面。

示例：

p {text-indent: 1em;
}

在这个示例中，<p> 元素的首行会缩进 1 个字母的大小（约等于当前字体的宽度）。

3. `text-transform`

text-transform 属性用于控制文本的大小写转换。

语法：

selector {text-transform: value;
}

取值：

none：保持文本的大小写不变（默认值）。
capitalize：将每个单词的首字母转换为大写。
uppercase：将所有字母转换为大写。
lowercase：将所有字母转换为小写。

示例：

p {text-transform: uppercase;
}

在这个示例中，<p> 元素中的文本会全部转换为大写字母显示。

visibility

visibility 是 CSS 中用来控制元素可见性的属性。它有两种主要的取值：visible 和 hidden。

1. `visibility: visible;`

当元素设置为 visibility: visible; 时，元素是可见的，默认情况下大多数元素都是可见的。

示例：

.element {visibility: visible;
}

在这个示例中，.element 元素被设置为可见。

2. `visibility: hidden;`

当元素设置为 visibility: hidden; 时，元素在页面上仍然占据空间，但是其内容不可见，且不会影响页面布局。

示例：

.element {visibility: hidden;
}

在这个示例中，.element 元素的内容是隐藏的，但仍然占据着页面中的位置。

注意事项：

不同于 display: none;：visibility: hidden; 会保留元素的空间，即使内容不可见也会占据空间，而 display: none; 则会完全移除元素并且不占据空间。
继承性：visibility 属性是继承的，这意味着一个元素的可见性设置可能会影响其子元素的可见性，但其效果可能有所不同。
互动性：设置为 visibility: hidden; 的元素仍然可以通过 DOM 或 JavaScript 访问和操作，而 display: none; 则不可以。