TLWB云开发平台文档(v4.0.0)

# CSS 布局

# CSS display 属性

display 属性是用于控制布局的最重要的 CSS 属性，规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

CSS Display/Visibility 属性

属性 描述
display 指定应如何显示元素。
visibility 指定元素是否应该可见。

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
这个 <div> 元素属于块级元素。

块级元素 块级元素的一些例子：

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。
这是段落中的块级元素。 行内元素的一些例子：

  • <span>
  • <a>
  • <img>

display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script> 元素使用 display: none;。

覆盖默认的 display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：
实例

li {
  display: inline;
}
1
2
3

注意

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

下例将 <span> 元素显示为块元素：
实例

span {
  display: block;
}
1
2
3

下例将 <a> 元素显示为块元素：
实例

a {
  display: block;
}
1
2
3

隐藏元素 - display:none 还是 visibility:hidden？

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
实例

h1.hidden {
  display: none;
}
1
2
3

visibility:hidden; 也可以隐藏元素。
但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：
实例

h1.hidden {
  visibility: hidden;
}
1
2
3

display: inline-block;

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。
与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。
下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：
实例

span.a {
  display: inline; /* span 的默认值 */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue; 
  background-color: yellow; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用 inline-block 来创建导航链接

display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项。下例创建了一个水平导航链接：
实例

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# CSS max-width属性

使用 width、max-width 和 margin: auto;

如上一章所述，块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）。
设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
使用 width、max-width 和 margin: auto;

注意

当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。 在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：

使用 width、max-width 和 margin: auto;

提示

请将浏览器窗口的大小调整为小于 500 像素，以查看两个 div 之间的区别！

这是上面两个 div 的例子：
实例

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
1
2
3
4
5
6
7
8
9
10
11

# CSS 定位

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。 有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

CSS 所有定位属性

属性 描述
bottom 设置定位框的底部外边距边缘。
clip 剪裁绝对定位的元素。
left 设置定位框的左侧外边距边缘。
position 规定元素的定位类型。
right 设置定位框的右侧外边距边缘。
top 设置定位框的顶部外边距边缘。
z-index 设置元素的堆叠顺序。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
position: static;
这是所用的 CSS：
实例

div.static {
  position: static;
  border: 3px solid #73AD21;
}
1
2
3
4

position: relative;

position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
position: relative;
这是所用的 CSS：
实例

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
1
2
3
4
5

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
position: fixed;
这是所用的 CSS：
实例

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
1
2
3
4
5
6
7

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意

“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：
position: fixed;
这是所用的 CSS：
实例

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
position: sticky;

注意

Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

在此例中，在到达其滚动位置时，sticky 元素将停留在页面顶部（top: 0）。
实例

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
1
2
3
4
5
6
7

重叠元素

在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序：
重叠元素
实例

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
1
2
3
4
5
6

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注意

如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

# CSS 溢出

CSS overflow 属性控制对太大而区域无法容纳的内容的处理方式。
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁，其余内容将不可见
  • scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
  • auto - 与 scroll 类似，但仅在必要时添加滚动条

提示

overflow 属性仅适用于具有指定高度的块元素。
在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

CSS 所有Overflow 属性

属性 描述
overflow 规定如果内容溢出元素框会发生什么情况。
overflow-x 规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y 指定在元素的内容区域溢出时如何处理内容的上/下边缘。

overflow: visible

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：
overflow: visible
实例

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}
1
2
3
4
5
6

overflow: hidden

如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：
overflow: hidden
实例

div {
  overflow: hidden;
}
1
2
3

overflow: scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：
overflow: scroll
实例

div {
  overflow: scroll;
}
1
2
3

overflow: auto

auto 值类似于 scroll，但是它仅在必要时添加滚动条：
overflow: autp
实例

div {
  overflow: auto;
}
1
2
3

overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

  • overflow-x 指定如何处理内容的左/右边缘。
  • overflow-y 指定如何处理内容的上/下边缘。

overflow-x 和 overflow-y
实例

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}
1
2
3
4

# CSS 浮动和清除

CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

CSS 布局 - 浮动

CSS 所有浮动属性

属性 描述
box-sizing 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float 指定元素应如何浮动。
overflow 指定如果内容溢出元素框会发生什么情况。
overflow-x 指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y 指定当溢出元素的内容区域时，如何处理内容的上/下边缘。

# CSS float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

实例 - float: right;

下例指定图像应在文本中向右浮动：
float: right;

img {
  float: right;
}
1
2
3

实例 - float: left;

下例指定图像应在文本中向左浮动：
float: left;

img {
  float: left;
}
1
2
3

实例 - No float

在下例中，图像将显示在文本中刚出现的位置（float: none;）：
float: none;

img {
  float: none;
}
1
2
3

# CSS clear 和 clearfix

clear 属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：

  • none - 允许两侧都有浮动元素。默认值
  • left - 左侧不允许浮动元素
  • right- 右侧不允许浮动元素
  • both - 左侧或右侧均不允许浮动元素
  • inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
下例将清除向左的浮动。表示在（div 的）左侧不允许出现浮动元素：
实例

div {
  clear: left;
}
1
2
3

clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
实例

.clearfix {
  overflow: auto;
}
1
2
3

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：
实例

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
1
2
3
4
5

您将在稍后的章节学到 ::after 伪元素。

# CSS 浮动实例

本页提供常见的浮动案例。

网格 / 等宽的框


网格 / 等宽的框 通过使用 float 属性，可以轻松地并排浮动内容框：

实例

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 50px; /* 如果需要在图片间增加间距 */
}
1
2
3
4
5
6
7
8
9

什么是 box-sizing？

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会损坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

图像并排

图像并排
这种框格（The grid of boxes）也可以用来并排显示图像：
实例

.img-container {
  float: left;
  width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
  padding: 5px; /* 如果需要在图片间增加间距 */
}
1
2
3
4
5

等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：
等宽的框
实例

.box {
  height: 500px;
}
1
2
3

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：
实例
使用 Flexbox 创建弹性框：

使用 Flexbox 创建弹性框
Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

导航菜单
实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

Web 布局实例

使用 float 属性完成整个 Web 布局也很常见：
Web 布局实例
实例

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# CSS 水平和垂直对齐

元素居中
元素居中

居中对齐元素

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
居中对齐元素
实例

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}
1
2
3
4
5
6

注意

如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

居中对齐文本

如果仅需在元素内居中文本，请使用 text-align: center;：
居中对齐文本
实例

.center {
  text-align: center;
  border: 3px solid green;
}
1
2
3
4

居中对齐图像

如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素：
居中对齐图像
实例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
1
2
3
4
5
6

左和右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute; :
左和右对齐
实例

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}
1
2
3
4
5
6
7

注意

绝对定位的元素将从正常流中删除，并可能出现元素重叠。

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性：
实例

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
1
2
3
4
5
6

注意

如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题（请看下面的例子）。

clearfix Hack

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
实例

.clearfix {
  overflow: auto;
}
1
2
3

垂直对齐 - 使用 padding

有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距：
垂直对齐
实例

.center {
  padding: 70px 0;
  border: 3px solid green;
}
1
2
3
4

如需同时垂直和水平对齐，请使用 padding 和 text-align: center;：
垂直和水平对齐
实例

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
1
2
3
4
5

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：
垂直对齐 - 使用 line-height
实例

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

垂直对齐 - 使用 position 和 transform

如果您的选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性：
垂直对齐 - 使用 position 和 transform
实例

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

垂直对齐 - 使用 Flexbox

您还可以使用 flexbox 将内容居中。请注意，IE10 以及更早的版本不支持 flexbox：
垂直对齐 - 使用 Flexbox
实例

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
1
2
3
4
5
6
7

# CSS 组合器

组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

# CSS 所有组合选择器

选择器 示例 示例描述
element element div p 选择 <div> 元素内的所有 <p> 元素。
element>element div > p 选择其父元素是 <div> 元素的所有 <p> 元素。
element+element div + p 选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2 p ~ ul 选择前面有 <p> 元素的每个 <ul> 元素。

# CSS 后代选择器

后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 <div> 元素内的所有 <p> 元素：
实例

div p {
  background-color: yellow;
}
1
2
3

# CSS 子选择器

子选择器匹配属于指定元素子元素的所有元素。
下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：
实例

div > p {
  background-color: yellow;
}
1
2
3

# CSS 相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：
实例

div + p {
  background-color: yellow;
}
1
2
3

# CSS 通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：
实例

div ~ p {
  background-color: yellow;
}
1
2
3

# CSS 属性选择器

为具有特定属性的HTML元素样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

CSS 所有属性选择器

选择器 例子 例子描述
[attribute] [target] 选择带有 target 属性的所有元素。
[attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素。
[attribute~=value] [title~=flower] 选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value] a[href^="https"] 选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value] a[href*="w3school"] 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素；
实例

a[target] {
  background-color: yellow;
}
1
2
3

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 <a> 元素：
实例

a[target="_blank"] { 
  background-color: yellow;
}
1
2
3

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素：
实例

[title~="flower"] {
  border: 5px solid yellow;
}
1
2
3

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：

提示

值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

实例

[class|="top"] {
  background: yellow;
}
1
2
3

CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：

提示

值不必是完整单词！

实例

[class^="top"] {
  background: yellow;
}
1
2
3

CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
下例选取 class 属性以 "test" 结尾的所有元素：

提示

值不必是完整单词！

实例

[class$="test"] {
  background: yellow;
}
1
2
3

CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器选取属性值包含指定词的元素。
下例选取 class 属性包含 "te" 的所有元素：

提示

值不必是完整单词！

实例

[class*="te"] {
  background: yellow;
}
1
2
3

设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：
实例

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12

# CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。
例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

# CSS 所有伪类

选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus input:focus 选择获得焦点的 <input> 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <input> 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数。
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 <p> 元素。
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited 选择所有已访问的链接。

# CSS 伪类的语法

伪类的语法：

selector:pseudo-class {
  property: value;
}
1
2
3

# CSS 锚伪类

链接能够以不同的方式显示：
实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

# CSS 伪类和 CSS 类

伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色：
实例

a.highlight:hover {
  color: #ff0000;
}
1
2
3

悬停在 <div> 上

在 <div> 元素上使用 :hover 伪类的实例：
实例

div:hover {
  background-color: blue;
}
1
2
3

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：
实例

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
1
2
3
4
5
6
7
8
9

# CSS :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：
实例

p:first-child {
  color: blue;
}
1
2
3

匹配所有 <p> 元素中的首个 <i> 元素

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
实例

p i:first-child {
  color: blue;
}
1
2
3

匹配所有首个 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
实例

p:first-child i {
  color: blue;
}
1
2
3

# CSS :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。
在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：
实例

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# CSS 伪元素

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

    CSS 所有伪元素

选择器 例子 例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。

CSS 伪元素语法

伪元素的语法：

selector::pseudo-element {
  property: value;
}
1
2
3

CSS ::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。
下面的例子为所有 <p> 元素中的首行添加样式：
实例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
1
2
3
4

注意

::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

请注意双冒号表示法 - ::first-line 对比 :first-line
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

CSS ::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。
下面的例子设置所有 <p> 元素中文本的首字母格式：
实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
1
2
3
4

注意

::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

CSS 伪元素和 CSS 类

伪元素可以与 CSS 类结合使用：
实例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}
1
2
3
4

上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。

CSS 多个伪元素

也可以组合几个伪元素。
在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：
实例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
1
2
3
4
5
6
7
8
9

CSS ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个 <h1> 元素的内容之前插入一幅图像：
实例

h1::before {
  content: url("../../.vuepress/public/assets/hero.png");
}
1
2
3

CSS ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。
下面的例子在每个 <h1> 元素的内容之后插入一幅图像：
实例

h1::after {
  content: url("../../.vuepress/public/assets/hero.png");
}
1
2
3

CSS ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection：

  • color
  • background
  • cursor
  • outline

下例使所选文本在黄色背景上显示为红色：
实例

::selection {
  color: red; 
  background: yellow;
}
1
2
3
4

# CSS 不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。

# CSS 透明图像

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：
透明图像
实例

img {
  opacity: 0.5;
}
1
2
3

# CSS 透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
实例

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
1
2
3
4
5
6
7

例子解释
第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。
当鼠标指针离开图像时，图像将再次透明。
反向悬停效果的例子：
实例

img:hover {
  opacity: 0.5;
}
1
2
3

# CSS 透明盒

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：
透明盒
实例

div {
  opacity: 0.3;
}
1
2
3

# CSS 使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
使用 RGBA 的透明度
您已经从我们的 CSS 颜色 这一章中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 - 该通道规定颜色的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示

您将在我们的 CSS 颜色 这一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
1
2
3

# CSS 透明盒中的文本

透明盒中的文本
实例

<html>
<head>
<style>
div.background {
  background: url("../../.vuepress/public/assets/hero.png") repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>这是一些位于透明框中的文本。</p>
  </div>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

例子解释
首先，我们创建一个带有背景图像和边框的 <div> 元素（class="background"）。
然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。
<div class="transbox"> 有背景色和边框 - 这个 div 是透明的。
在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。

# CSS 导航栏

易用的导航对于任何网站都很重要。
通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。
在我们的实例中，将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：
实例

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
1
2
3
4
5
6

现在，从列表中删除项目符号以及外边距和内边距（填充）：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
1
2
3
4
5

例子解释：

  • list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
  • 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

上例中的代码是垂直和水平导航栏中使用的标准代码，您将在下一章中学习更多内容。

# CSS 垂直导航栏

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：
实例

li a {
  display: block;
  width: 60px;
}
1
2
3
4

例子解释：

  • display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
  • width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 

li a {
  display: block;
}
1
2
3
4
5
6
7
8
9
10

垂直导航栏实例

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

活动/当前导航链接

向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上：
实例

.active {
  background-color: #4CAF50;
  color: white;
}
1
2
3
4

居中链接以及添加边框

把 text-align:center 添加到 <li> 或 <a>，使链接居中。
将 border 属性添加到 <ul>，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：
实例

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}
1
2
3
4
5
6
7
8
9
10
11
12

全高固定垂直导航栏

创建全高的“粘性”侧面导航：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}
1
2
3
4
5
6
7
8
9
10

注意

本例在移动设备上可能无法正常工作。

# CSS 水平导航栏

行内列表项

构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：
实例

li {
  display: inline;
}
1
2
3

例子解释： display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

浮动列表项

创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局：
实例

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
1
2
3
4
5
6
7
8
9

例子解释：

  • float: left; - 使用 float 使块元素滑动为彼此相邻
  • display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
  • padding: 8px; - 使块元素更美观
  • background-color: #dddddd; - 为每个元素添加灰色背景色

提示

如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素：

实例

ul {
  background-color: #dddddd;
}
1
2
3

水平导航栏实例

创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色：
实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：
实例

.active {
  background-color: #4CAF50;
}
1
2
3

右对齐链接

通过将列表项向右浮动来右对齐链接（float:right;）：
实例

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
1
2
3
4
5
6

边框分隔栏

将 border-right 属性添加到 <li>，以创建链接分隔符：
实例

/* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}
1
2
3
4
5
6
7
8

固定的导航栏

使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此：

固定在顶部

ul {
  position: fixed;
  top: 0;
  width: 100%;
}
1
2
3
4
5

注意

固定定位在移动设备上可能无法正常工作。

灰色水平导航栏

带有细灰色边框的灰色水平导航栏的实例
实例

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}
1
2
3
4
5
6
7
8

粘性导航栏

为 <ul> 添加 position: sticky;，以创建粘性导航栏。
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
实例

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
1
2
3
4
5

注意

Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。您还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

# CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。

基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。
实例

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

例子解释：
HTML
使用任何元素打开下拉菜单内容，例如 <span> 或 <button> 元素。
使用容器元素（如 <div>）创建下拉内容，并在其中添加任何内容。
用 <div> 元素包围这些元素，使用 CSS 正确定位下拉内容。
CSS
.dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。
.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。
我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。
当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

下拉式菜单

创建一个下拉菜单，并允许用户从列表中选择一个选项：
本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：
实例

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉内容（默认隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 下拉链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

右对齐的下拉菜单内容

如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;：
实例

.dropdown-content {
  right: 0;
}
1
2
3

# CSS 图片库

CSS 可用于创建图片库。
图片库
下面这个图片库是使用 CSS 创建的：
实例

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">在此处添加图像描述</div>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# CSS 图像精灵

图像精灵是单个图像中包含的图像集合。
包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节约带宽。

简单的例子

我们使用以下单幅图像，而不是使用三幅单独的图像：
导航图像
通过使用 CSS，我们可以仅显示所需图像的某个部分。
在下面的例子中，CSS 指定了显示 "navsprites.png" 图像的哪部分：
实例

#home {
  width: 46px;
  height: 44px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") 0 0;
}
1
2
3
4
5
点击查看完整代码 
<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") -91px 0;
}
</style>
</head>
<body>

<img id="home" src="../../.vuepress/public/assets/img/css/navsprites.png" width="1" height="1">
<img id="next" src="../../.vuepress/public/assets/img/css/navsprites.png" width="1" height="1">

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

例子解释：

  • <img id="home" src="navsprites.png"> - 仅定义小的透明图像，因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。
  • width: 46px; height: 44px; - 定义我们要使用的图像部分
  • background: url("navsprites.png") 0 0; - 定义背景图片及其位置（left 0px, top 0px）

创建导航列表

我们希望使用精灵图片（"navsprites.png"）来创建一个导航列表。
我们将使用 HTML 列表，因为它可以是链接，同时还支持背景图片：
实例

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") -91px 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
点击查看完整代码 
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 43px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") 0 0;
}

#prev {
  left: 63px;
  width: 42px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") -47px 0;
}

#next {
  left: 129px;
  width: 42px;
  background: url("../../.vuepress/public/assets/img/css/navsprites.png") -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="/css/index.asp"></a></li>
  <li id="prev"><a href="/css/css_jianjie.asp"></a></li>
  <li id="next"><a href="/css/css_syntax.asp"></a></li>
</ul>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

例子解释：

  • #navlist {position:relative;} - 位置设置为相对，以允许在其中进行绝对定位
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
  • #navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px

现在开始为每个特定部分设置定位和样式：

  • #home {left:0px;width:46px;} - 一直向左定位，图像宽度 46px
  • #home {background:url(navsprites.png) 0 0;} - 定义背景图片及其位置（left 0px, top 0px）
  • #prev {left:63px;width:43px;} - 向右定位 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
  • #prev {background:url("navsprites.png") -47px 0;} - 定义背景图片向右 47px（#home 宽度 46px + 1px 分隔线）
  • #next {left:129px;width:43px;} - 向右定位 129px（#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格），宽度 43px。
  • #next {background:url("navsprites.png") -91px 0;} - 定义背景图片向右 91px（#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线）

图像精灵 - 悬停效果

现在，我们要向导航列表中添加悬停效果。

提示

:hover 选择器可用于所有元素，而不仅限于链接。

我们的新图像（"navsprites_hover.ong"）包含三幅导航图像和三幅用于悬停效果的图像：
导航图像
因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。
我们仅添加三行代码来实现悬停效果：
实例

#home a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") 0 -45px;
}

#prev a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -47px -45px;
}

#next a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -91px -45px;
}
1
2
3
4
5
6
7
8
9
10
11
点击查看完整代码 
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 43px;
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") 0 0;
}

#prev {
  left: 63px;
  width: 42px;
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -47px 0;
}

#next {
  left: 129px;
  width: 42px;
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -91px 0;
}

#home a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") 0 -45px;
}

#prev a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -47px -45px;
}

#next a:hover {
  background: url("../../.vuepress/public/assets/img/css/navsprites_hover.png") -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="/css/index.asp"></a></li>
  <li id="prev"><a href="/css/css_jianjie.asp"></a></li>
  <li id="next"><a href="/css/css_syntax.asp"></a></li>
</ul>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

例子解释：
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素

# CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观
CSS 表单

设置输入字段的样式

使用 width 属性来确定输入字段的宽度：
设置输入字段的样式
实例

input {
  width: 100%;
}
1
2
3

上例适用于所有 <input> 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

  • input[type=text] - 将仅选择文本字段
  • input[type=password] - 将仅选择密码字段
  • input[type=number] - 将仅选择数字字段
  • 等等...

填充输入框

使用 padding 属性在文本字段内添加空间。

提示

若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：

填充输入框
实例

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
1
2
3
4
5
6

注意

我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

带边框的输入框

请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角：
填充输入框
实例

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}
1
2
3
4

如果仅需要下边框，请使用 border-bottom 属性：
仅需要下边框
实例

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}
1
2
3
4

彩色的输入框

请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：
彩色的输入框
实例

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}
1
2
3
4

获得焦点的输入框

默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。
使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：
实例 1

input[type=text]:focus {
  background-color: lightblue;
}
1
2
3

实例 2

input[type=text]:focus {
  border: 3px solid #555;
}
1
2
3

带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：
带有图标/图像的输入框
实例

input[type=text] {
  background-color: white;
  background-image: url("../../.vuepress/public/assets/hero.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}
1
2
3
4
5
6
7

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 CSS 过渡 一章中学到更多有关 transition 属性的知识。
带动画效果的搜索输入框
实例

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
1
2
3
4
5
6
7

设置文本域的样式

提示

使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

设置文本域的样式
实例

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}
1
2
3
4
5
6
7
8
9
10

设置选择菜单的样式

设置选择菜单的样式
实例

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
1
2
3
4
5
6
7

设置输入按钮的样式

设置输入按钮的样式
实例

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* 提示：请使用  width: 100%，以实现全宽按钮 */
1
2
3
4
5
6
7
8
9
10
11

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。
高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。

# CSS 计数器

CSS 计数器
CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。
计数器使您可以根据内容在文档中的位置来调整其外观。

CSS 计数器属性

属性 描述
content 与 ::before 和 ::after 伪元素一同使用，来插入生成的内容。
counter-increment 递增一个或多个计数器值。
counter-reset 创建或重置一个或多个计数器。

带计数器的自动编号

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。
如需使用 CSS 计数器，我们将使用以下属性：

  • counter-reset - 创建或重置计数器
  • counter-increment - 递增计数器值
  • content - 插入生成的内容
  • counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。
下面的例子为页面（在 body 选择器中）创建一个计数器，然后为每个 <h2> 元素增加计数器值，并在每个 <h2> 元素的开头添加 "Section <value of the counter>:"：
实例

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
1
2
3
4
5
6
7
8

嵌套计数器

下面的例子为页面（section）创建一个计数器，为每个 <h1> 元素（subsection）创建一个计数器。
"section" 计数器为每个 <h1> 元素计数，同时写入 "Section" 以及 section 计数器的值，"subsection" 计数器为每个 <h2> 元素计数，同时写入 section 计数器的值以及 subsection 计数器的值：
实例

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

计数器对于创建概述列表也很有用，因为在子元素中会自动创建一个计数器的新实例。在这里，我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串：
实例

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
1
2
3
4
5
6
7
8
9

# CSS 网站布局

网站布局

网站通常分为页眉、菜单、内容和页脚：

有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。

页眉

页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：
实例

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}
1
2
3
4
5

结果：
页眉

导航栏

导航栏包含链接列表，以帮助访问者浏览您的网站：
实例

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接 - 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果：
页眉

内容

使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

  • 1-列布局（通常用于移动浏览器）
  • 2-列布局（通常用于平板电脑和笔记本电脑）
  • 3-列布局 （仅用于台式机）

结果 我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：
实例

/* 创建三个相等的列，它们彼此相邻浮动 */
.column {
  float: left;
  width: 33.33%;
}

/* 在列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果：
结果

提示

如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。
您是否想知道 @media 规则如何工作？请在我们的 CSS3 媒体查询(高级教程) 这一章中学习更多相关知识。 创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。
如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS3 Flexbox(高级教程)教程。

不相等的栏

主要内容（main content）是您网站上最大、最重要的部分。
列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：
实例

.column {
  float: left;
}

/* 左和右列 */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* 响应式布局 - 使三列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果：
结果

页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：
实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}
1
2
3
4
5

结果： 结果

响应式网站布局

通过使用上面的这些 CSS 代码，我们创建了一个自适应的网站布局，会根据屏幕宽度切换两列与全宽列：

点击查看完整代码 
<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* 页眉/Blog 标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* 设置上导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建两个不相等的彼此并排的浮动列 */
/* 左列 */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* 右列 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* 伪图像 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 为文章添加卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

# CSS 单位

CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。
实例
使用 px（像素）设置不同的长度值：

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
1
2
3
4
5
6
7
8

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。
对于某些 CSS 属性，允许使用负的长度。
长度单位有两种类型：绝对单位和相对单位。

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px * 像素 (1px = 1/96th of 1in)
pt 点 (1pt = 1/72 of 1in)
pc 派卡 (1pc = 12 pt)

*像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位 描述
em 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex 相对于当前字体的 x-height(极少使用)
ch 相对于 "0"（零）的宽度
rem 相对于根元素的字体大小（font-size）
vw 相对于视口*宽度的 1%
vh 相对于视口*高度的 1%
vmin 相对于视口*较小尺寸的 1％
vmax 相对于视口*较大尺寸的 1％
% 相对于父元素

提示

em 和 rem 单元可用于创建完美的可扩展布局！

* 视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。

# CSS 特异性

什么是特异性？

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。
将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

注意

这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。

特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：
行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffffff;">。
ID - ID 是页面元素的唯一标识符，例如 #navbar。
类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。
元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

如何计算特异性？

请您牢记计算特异性的方法！
从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。
请思考以下三个代码片段：
实例

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
1
2
3
  • A 的特异性为 1（一个元素）
  • B 的特异性为 101（一个 ID 引用以及一个元素）
  • C 的特异性为 1000（行内样式）

由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用。

特异性规则 1：

在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用：
实例

h1 {background-color: yellow;}
h1 {background-color: red;}
1
2

后一条规则始终适用。

特异性规则 2：

ID 选择器比属性选择器拥有更高的特异性 - 请看以下三行代码：
实例

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
1
2
3

第一条规则比其他两条更具体，因此将被应用。

特异性规则 3：

上下文选择器比单一元素选择器更具体 - 嵌入式样式表更靠近要设置样式的元素。所以在以下情况下：
实例

来自外部 CSS 文件：

#content h1 {background-color: red;}

在 HTML 文件中：

<style>
#content h1 {
  background-color: yellow;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

将适用后一条规则。

特异性规则 4：

类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：
实例

.intro {background-color: yellow;}
h1 {background-color: red;}
1
2

← CSS3 →