Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update 'css FAQ' and fix prettier #14548

Merged
merged 9 commits into from
Jul 28, 2023
Merged

Update 'css FAQ' and fix prettier #14548

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2608762
Update 'css FAQ' and fix prettier
jasonren0403 Jul 23, 2023
3094a2e
Merge branch 'main' into cssfaq-zhcn
jasonren0403 Jul 23, 2023
54e445b
Merge branch 'main' into cssfaq-zhcn
jasonren0403 Jul 24, 2023
1c8fd6b
Update files/zh-cn/learn/css/howto/css_faq/index.md
yin1999 Jul 26, 2023
ff63457
Merge branch 'main' into cssfaq-zhcn
jasonren0403 Jul 27, 2023
0b665cb
Update .prettierignore
jasonren0403 Jul 27, 2023
2b72169
Apply suggestions from code review
jasonren0403 Jul 27, 2023
28136c1
Update files/zh-cn/learn/css/howto/css_faq/index.md
yin1999 Jul 27, 2023
3acd3fb
Apply suggestions from code review
jasonren0403 Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ build/
/files/fr/glossary/main_axis/index.md
/files/fr/learn/server-side/django/forms/index.md
/files/pt-br/learn/server-side/django/forms/index.md
/files/zh-cn/learn/css/howto/css_faq/index.md
/files/zh-cn/learn/server-side/django/forms/index.md

# A full pass on all Markdown files is being performed.
Expand Down
79 changes: 38 additions & 41 deletions files/zh-cn/learn/css/howto/css_faq/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
---
title: CSS 常见问题
slug: Learn/CSS/Howto/CSS_FAQ
original_slug: Web/CSS/Common_CSS_Questions
---

{{LearnSidebar}}

在本篇文章中，你会发现一些有关 CSS 的常见问题，这些问题及其解答可能会有助于你成为一名网站开发人员。

## 为什么有效的 CSS 没有正确的渲染？

浏览器使用 DOCTYPE 声明来选择是否使用更符合 Web 标准或兼容旧浏览器的 bug 的模式。在你的 HTML 的开始使用一个正确的和现代的 DOCTYPE 声明将改善浏览器标准执行。
浏览器使用 `DOCTYPE` 声明来选择是否使用更符合 Web 标准或兼容旧浏览器缺陷的模式。在你的 HTML 的开始使用一个正确的和现代的 `DOCTYPE` 声明将改善浏览器标准执行。

现代浏览器主要有两种渲染模式：

- _怪异模式_：又称向后兼容模式，允许将传统网页渲染为作者意图。旧浏览器使用的非标准渲染规则。不完整的、不正确的、缺少 DOCTYPE 声明或已知的 DOCTYPE 声明中普遍使用 2001 年以前的文件将在怪异模式中呈现。
- _标准模式_：浏览器试图严格遵守 W3C 标准。新 HTML 网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代 DOCTYPE 声明的页面将被用标准模式呈现。
- _怪异模式_：又称向后兼容模式，允许按照旧版浏览器使用的非标准呈现规则，按作者的意图呈现旧版网页。如果文档中存在不完整、不正确或缺失的 `DOCTYPE` 声明，或已知的 2001 年以前常用的 `DOCTYPE` 声明，则会以怪异模式呈现。
- _标准模式_：浏览器试图严格遵守 W3C 标准。新的 HTML 页面预计是为符合标准的浏览器设计的，因此，带有现代 `DOCTYPE` 声明的页面将使用标准模式呈现。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

基于 Gecko 的浏览器，有三分之一 _[Almost Standards Mode](/zh-CN/docs/Gecko's_%22Almost_Standards%22_Mode)_，只有一些小怪癖。
有三分之一的基于 Gecko 的浏览器处于[接近标准模式](https://zh.wikipedia.org/wiki/怪异模式#接近标准模式)，只是有一些怪异行为。

这是最常用的触发标准模式或准标准模式的 DOCTYPE 声明列表：
这是最常用的触发标准模式的 `DOCTYPE` 声明：

```html
<!doctype html> /* 这一行是 HTML5 的 doctype 声明。使用该声明会使现代浏览器使用
HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
<!doctype html>
```

你应该尽可能使用上述 doctype 声明。还有其他有效的传统 doctype 说明，它们会触发标准模式或准标准模式：
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
Expand All @@ -38,30 +42,24 @@ HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

请尽可能地使用 HTML 5 DOCTYPE。

## 为什么有效的 CSS 完全没有被渲染？

可能的原因如下：

- 引入的 CSS 文件路径写错了。

- 为了使浏览器渲染样式文件，CSS 样式表必须用 `text/css` 的 MIME。如果 Web 服务器没有使用这种类型处理文件，则 CSS 也不会被应用。
- 为了使浏览器渲染样式文件，CSS 样式表必须用 `text/css` 的 MIME 类型。如果 Web 服务器没有使用这种类型处理文件，则 CSS 也不会被应用。

## `id` 和 `class` 有什么不同？

HTML 元素可以拥有一个 `id`/或 `class` 属性。 `id` 属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。`class` 属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。CSS 允许你可以对特定的 `id` 和/或类名的元素应用样式。

- 当你想要将样式规则应用于多个块和元素时，你应该使用 class 选择符。
HTML 元素可以拥有一个 `id` 和（或）`class` 属性。`id` 属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。`class` 属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。CSS 允许你可以对特定的 `id` 和/或类名的元素应用样式。

- 当你想给一个特定元素或块应用样式规则时就使用 ID 选择符。此样式将只用于与该特定 id 匹配的元素。
- 当你想要将样式规则应用于多个块和元素时，你应该使用特定于类的样式。
- 当你想给一个特定元素或块应用样式规则时就使用特定于 id 的样式。此样式将只用于与该特定 id 匹配的元素。

较少样式的样式表通常性能更高。因此建议尽可能多地使用类，保留 id 作为特定用途（比如链接 label 标签和 form 元素或者为语义上唯一的元素应用样式）：
一般建议尽量使用类，只有在特定用途（如连接标签和表单元素或用于必须在语义上唯一的样式元素）绝对必要时才使用 id：

- 使用类名可以让样式具有可扩展性——即使目前只有一个元素使用这个规则集来定义样式，未来可能会添加更多。

- 类名可以让你同时为多个元素赋予样式，减少样式表的大小，避免了为每一个 id 选择器撰写同样的样式信息。越小的样式表带来的性能体验也就越好。

- 类名选择器比 id 选择器的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)更低，所以可以很方便地覆盖它们。

> **备注：** 在这篇文档中更深入层次的了解 [CSS 选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -80,7 +78,7 @@ h1 {
}
```

从 CSS2 开始，情况就不一样了。关键字 [initial](/zh-CN/docs/Web/CSS/initial) 现在是一个有效的 CSS 属性。它将给定的 CSS 属性值重置为默认值。
从 CSS2 开始，情况就不一样了。关键字 [initial](/zh-CN/docs/Web/CSS/initial) 现在是一个有效的 CSS 属性值。它将给定的 CSS 属性值重置为默认值。

```css
/* 标题元素的默认颜色为黑色 */
Expand All @@ -94,14 +92,14 @@ h1 {

## 我如何才可以从一个样式中衍生出另一种样式？

CSS 不允许这样做（请查阅 [Eric Meyer's note about the Working Group's stance](http://archivist.incutio.com/viewlist/css-discuss/2685)）。但是，将多个类分配给单个元素，可以提供相同的效果。[CSS 变量](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 也提供了一种方法来定义在多处复用的样式信息。
CSS 并不完全允许用一种样式来定义另一种样式。但是，将多个类分配给单个元素，可以提供相同的效果。[CSS 变量](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)也提供了一种方法来定义在多处复用的样式信息。

## 我该如何给一个元素分配多个类？

HTML 元素可以通过列出的类属性，用空格分开它们。

```html
<style type="text/css">
<style>
.news {
background: black;
color: white;
Expand All @@ -111,14 +109,14 @@ HTML 元素可以通过列出的类属性，用空格分开它们。
}
</style>

<div class="news today">... content of today's news ...</div>
<div class="news today">这是今天的新闻内容。</div>
```

如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据 CSS 声明的顺序。在 `class` 属性类的顺序是不相关的。
如果两个规则中都声明了相同的属性，则首先通过特异性解决冲突，然后根据 CSS 声明的顺序解决冲突。`class` 属性中类的顺序与此无关。

## 为什么我的样式规则不能正确地工作？

在语法上正确的样式规则可能在某些情况下不适用。你可以使用调试工具 CSS 面板的[规则视图](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)来调试这类问题。下面列出了最常见的忽略样式规则的实例：
在语法上正确的样式规则可能在某些情况下不适用。你可以使用调试工具 *CSS 面板*的[规则视图](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)来调试这类问题。下面列出了最常见的忽略样式规则的实例：

### HTML 元素层次结构

Expand Down Expand Up @@ -146,7 +144,7 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异

### 显式重定义样式规则

在 CSS 样式表中，顺序 **非常** 重要。如果先定义了一个规则，然后又重新定义了同样的规则，会使用最后一个定义。
在 CSS 样式表中，顺序**非常**重要。如果先定义了一个规则，然后又重新定义了同样的规则，会使用最后一个定义。

```css
#stockTicker {
Expand All @@ -170,9 +168,9 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异

为了避免此类错误，请对特定选择器仅定义一次规则，将属于那个选择器的规则归类于此组。

### 使用便捷属性
### 使用简写属性

使用便捷属性的好处是语法更加紧凑。仅使用一部分便捷属性完全没有问题，但要注意，没有声明的属性将自动重置为默认状态，这意味着单个属性较靠前的规则可能会被隐式覆盖。
使用简写属性的好处是语法更加紧凑。仅使用一部分简写属性完全没有问题，但要注意，没有声明的属性将自动重置为默认状态，这意味着单个属性较靠前的规则可能会被隐式覆盖。

```css
#stockTicker {
Expand All @@ -190,12 +188,12 @@ CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
```

在前一个示例中，问题发生在不同元素的规则中；但在同一个元素中问题也可能出现，因为顺序是 **重要** 的。
在前一个示例中，问题发生在不同元素的规则中；但在同一个元素中问题也可能出现，因为顺序是**重要**的。

```css
#stockTicker {
font-weight: bold;
font: 12px Verdana; /* font-weight is now normal */
font: 12px Verdana; /* font-weight 现在为 normal */
}
```

Expand Down Expand Up @@ -230,7 +228,7 @@ body * {

### CSS 中的优先级

当某个元素应用了多个规则时，规则的选择依赖于样式的 [优先级](/zh-CN/docs/Web/CSS/Specificity)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。
当某个元素应用了多个规则时，规则的选择依赖于样式的[优先级](/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#优先级)。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。{{htmlelement("div")}} 的文本颜色将是红色的。

```css
div {
Expand All @@ -245,35 +243,34 @@ div {
```

```html
<div id="orange" class="green" style="color: red;">This is red</div>
<div id="orange" class="green" style="color: red;">我是红的</div>
```

当选择器具有多个部分时，规则会更加复杂。有关优先级计算的更多信息，请参阅 [CSS 2.1 Specification 6.4.3 章节](https://www.w3.org/TR/CSS21/cascade.html#specificity)。
当选择器具有多个部分时，规则会更加复杂。有关优先级计算的更多信息，请参阅 [CSS 优先级文档](/zh-CN/docs/Web/CSS/Specificity)。

## -moz-\*， -ms-\*， -webkit-\*， -o-\* 以及 -khtml-\* 属性有什么用？

这些被称为*前缀属性*的属性是 CSS 标准的扩展。这些是出于测试目的的使用，不至于污染标准命名空间，防止标准扩展时产生兼容性问题。

不推荐在生产环境网站中使用这些属性，它们已经产生了巨大的网页兼容性混乱。例如，很多开发者只使用了 `-webkit-` 前缀版本的属性，但非前缀的版本已经在所有浏览器中得到支持，没有基于 Webkit 的浏览器很有可能会在今后丢失显示效果。这个问题过于严重，以至于其他浏览器也开始实现 `-webkit-` 前缀属性的别名以提升网站兼容性，即 [Compatibility Living Standard](https://compat.spec.whatwg.org/)。
不推荐在生产环境网站中使用这些属性，它们已经产生了巨大的网页兼容性混乱。例如，很多开发者只使用了 `-webkit-` 前缀版本的属性，但非前缀的版本已经在所有浏览器中得到支持，没有基于 Webkit 的浏览器很有可能会在今后丢失显示效果。这个问题过于严重，以至于其他浏览器也开始实现 `-webkit-` 前缀属性的别名以提升网站兼容性，即[兼容性活动标准](https://compat.spec.whatwg.org/)。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

实际上，大部分浏览器在实现实验性功能时都不使用 CSS 前缀，或者仅在 Nightly 浏览器版本或相似机制上实现它们。

如果需要使用前缀，建议先写带前缀的属性，然后再写不带前缀的标准版本。这样就可以在标准版本支持的时候覆盖掉前缀版本。例如：

```css
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
```

> **备注：** 为更深层次了解处理前缀属性，请参阅 [跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing) 模块的 [处理常见的 HTML 和 CSS 问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)。
> **备注：** 为更深层次了解处理前缀属性，请参阅[跨浏览器测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)模块的[处理常见的 HTML 和 CSS 问题——处理 CSS 前缀](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#处理_css_前缀)。

> **备注：** 为了解 Mozilla 前缀属性 CSS 的更多信息，请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)。
> **备注：** 请参阅 [Mozilla CSS 扩展](/zh-CN/docs/Web/CSS/Mozilla_Extensions)、[Microsoft CSS 扩展](/zh-CN/docs/Web/CSS/Microsoft_Extensions)和 [WebKit CSS 扩展](/zh-CN/docs/Web/CSS/WebKit_Extensions) 以了解浏览器前缀 CSS 属性的列表。
yin1999 marked this conversation as resolved.
Show resolved Hide resolved

## z-index 属性与定位有什么关系？

z-index 属性指定了元素的栈序。

有较高 z-index/栈序的元素总是在有着较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。
具有较高 z-index/栈序的元素总是渲染于具有较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。

> **备注：** 请参阅 [定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning) 文章，特别是 [介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。
> **备注：** 请参阅[定位](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)文章，特别是[介绍 z-index](/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#介绍_z-index) 部分来深入学习。