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

推荐答案

在 CSS 中，并不是所有的属性都可以继承。下面是一些常见的可继承属性
font-family
font-size
font-weight
font-style
color
letter-spacing
word-spacing
line-height
text-align
text-indent
text-transform
visibility
这些属件在父元素中设置后，子元素可以继承相同的属性值。但需要注意的是，这些属性只能继承，而不能被子元素覆盖。此外，并不是所有的 HTML 元素都可以继承这些属性，具体需要查看相关属性的文档。

相信有小伙伴已经发现了，所有和字体有关的属性都可以继承

知识补充

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

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; 则不可以。