CSS3 快速参考指南（二）

原文：CSS3 Quick Syntax Reference

协议：CC BY-NC-SA 4.0

十五、渐变

渐变是一种从一种颜色平滑过渡到另一种颜色的颜色填充。CSS 3 中引入了渐变函数，根据规范，渐变函数可以用在任何需要图像的地方，但是它们主要与background或background-image属性一起使用来创建背景渐变。

线性渐变

linear-gradient()函数定义了一个渐变，提供了从一种颜色到另一种颜色的平滑过渡。

linear-gradient([<angle> | to <side-or-corner>]
                {, <color stop> [stop position]} (2-∞) )

最简单的形式是，线性渐变由两种颜色组成，从上到下均匀分布。在图 15-1 中，渐变从灰色开始，在底部过渡到黑色。

图 15-1

简单线性渐变

.mygradient {
  background-image: linear-gradient(gray, black);
}

可以使用关键字to设置渐变的角度，后跟渐变结束的目的地:top、right、bottom、left或它们的任意组合。示例如图 15-2 所示。

图 15-2

右下线性渐变

linear-gradient(to bottom right, gray, black);

使用deg单位可以指定更精确的角度，0 deg与to top相同。度数顺时针旋转，允许负角度。

linear-gradient(0deg,   gray, black); /* to top */
linear-gradient(90deg,  gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */

可以在起始色和结束色之间添加额外的色标。任何颜色停止点后面都可以跟一个以百分比或长度值指定的停止点位置。如果没有指定停止位置，颜色会均匀分布。在下面的例子中，白色设置为 25 %,而不是默认的 50%。图 15-3 展示了这段代码的结果。

图 15-3

具有多个色标的渐变

linear-gradient(gray, white 25%, black);

目前描述的标准语法在 Chrome 26+、Firefox 16+、Safari 6.1+、Opera 12.1+和 IE 10+中受支持。遗留语法可以与-moz、-webkit和-o前缀一起使用，以扩展对 Firefox 3.6、Chrome 1、Safari 4 和 Opera 11.1 的支持。

.linear-gradient
{
  background-color: red; /* fallback color */

  /* Chrome 1-9, Safari 4-5 */
  background: -webkit-gradient(linear, left top, right top, from(red), to(orange));

  /* Chrome 10-25, Safari 5.1-6.1 */
  background: -webkit-linear-gradient(left, red, orange);

  /* Firefox 3.6-15 */
  background: -moz-linear-gradient(left, red, orange);

  /* Opera 11.1-12.1 */
  background: -o-linear-gradient(left, red, orange);

  /* Standard syntax */
  background: linear-gradient(to right, red, orange);
}

径向渐变

径向渐变从中心点向外过渡。在 CSS 中，这些渐变是用radial-gradient()函数定义的。

radial-gradient([<shape> + <size>] [at <position>]
                {, <color stop> [stop position]} {2-∞} )

要创建径向渐变，必须定义至少两个色标。图 15-4 中的径向渐变从中间的灰色开始，逐渐变为黑色。

图 15-4

简单径向渐变

radial-gradient(gray, black);

像linear-gradient()一样，允许有两个以上的颜色停止点，它们后面可以有一个长度或百分比值，表示颜色的停止位置。示例如图 15-5 所示。

图 15-5

设置停止位置的径向渐变

radial-gradient(black 25%, white, black 75%);

径向渐变的形状可以是ellipse或circle。默认的形状是ellipse，它允许渐变扩展以匹配元素的高度和宽度，如图 15-5 所示。可选的circle值，如图 15-6 所示，强制渐变为圆形，与元素的形状无关。

图 15-6

圆形径向渐变

radial-gradient(circle, black 25%, white, black 75%);

省略号的两个长度值或圆的单个值可用于设置渐变的水平和垂直半径。对于省略号，它们也可以是相对于元素尺寸的百分比值，如图 15-7 所示的例子。

图 15-7

调整径向渐变的大小

radial-gradient(75% 25%, gray, black);

如果需要更小的精度，可以使用预定义的关键字之一来设置尺寸:closest-side、closest-corner、farthest-side或farthest-corner。这些值规定了离原点最近或最远的元素的边或角是否包含渐变(见图 15-8 )。例如，farthest-side值调整渐变的大小，使它的最后一种颜色在元素远离其原点的最远一侧结束。

图 15-8

大小关键字

radial-gradient(farthest-side, gray, black);

默认情况下，径向渐变的原点居中。可以通过用关键字at指定渐变原点的位置，后跟一个以与background-position属性相同的方式指定的位置来更改。首先指定水平位置，然后选择垂直位置。可以用关键字(left、center、right + top、center和bottom)、长度值、百分比值或其组合来设置位置。图 15-9 给出了一个例子，其中渐变原点被移动到元素的右下方。

图 15-9

右下原点

radial-gradient(at right bottom, gray, black);

当与-moz、-webkit和-o厂商前缀一起使用时，对radial-gradient()功能的支持基本上与对linear-gradient()的支持相同。像linear-gradient()一样，径向渐变的语法也经历了一些修改。这里显示了一个完整的跨浏览器语法示例:

.radial-gradient
{
  background-color: red; /* fallback color */

  /* Chrome 1-9, Safari 4-5 */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,red), color-stop(100%,orange));

  /* Chrome 10-25, Safari 5.1-6.1 */
  background: -webkit-radial-gradient(center, ellipse cover, red 0%, orange 100%);

  /* Firefox 3.6-16 */
  background: -moz-radial-gradient(center, ellipse cover, red 0%, orange 100%);

  /* Opera 11.6-12.1 */
  background: -o-radial-gradient(center, ellipse cover, red 0%, orange 100%);

  /* Standard syntax */
  background: radial-gradient(ellipse at center, red 0%, orange 100%);
}

重复渐变

线性和径向渐变不允许渐变图案重复，因为它们会自然拉伸以填充定义它们的元素。另外两个函数用于创建重复的渐变:repeating-linear-gradient()和repeating-radial-gradient()。

为了重复线性渐变，使用了repeating-linear-gradient()功能。该功能的参数与linear-gradient()相同。

repeating-linear-gradient([<angle> | to <side-or-corner>]
                          {, <color stop> [stop position]} (2-∞) )

重复的线性渐变会无限重复色标。渐变的大小由最终的色标决定。为避免急剧过渡，图 15-10 中的起始颜色在结束时重复。

图 15-10

重复线性渐变

repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);

径向渐变的重复函数也与非重复版本共享相同的语法。图 15-11 所示的例子说明了重复功能。请注意，与前面的示例相比，此渐变具有明显的颜色过渡。

图 15-11

重复径向渐变

repeating-radial-gradient(black, black 5%, white 5%, white 10%);

定义渐变的语法比其他 CSS 特性要复杂得多。因此，最好使用在线工具来图形化设计所需的渐变。一个这样的工具可以在 Colorzilla 上找到。com 。 ¹ 除了符合标准的渐变代码，它还提供了最大浏览器兼容性所需的前缀版本。

Footnotes 1

www.colorzilla.com/gradient-editor

十六、盒子模型

CSS 的所谓盒子模型描述了 HTML 元素所占据的空间。在这个模型中，每个元素由四个框组成:内容、填充、边框和边距，如图 16-1 所示。

图 16-1

CSS 盒子模型

内容周围的三个框在元素的顶部、右侧、底部和左侧可以有不同的大小。任何或所有这些大小也可以设置为零。

内嵌和块

HTML 有两个主要的元素类别:块和内联。盒子模型对这两种元素的应用是不同的，所以了解它们之间的区别是很重要的。内嵌元素的例子包括<a>、<strong>和<em>，而<p>、<h1>和<form>是块元素。

内联元素随文本内容流动，并根据需要拆分以适合其容器的宽度。它们可能不包含块元素，除了<a>元素，它可以包装任何类型的元素。

块元素可以包含块元素和行内元素(见图 16-2 )。它们通过在自身周围创建一个水平扩展的虚拟框来中断文本流，使其看起来好像在每个块元素的前后都有换行符。由于这些属性，块元素也被称为盒子或容器。

图 16-2

块和内联元素

内联元素和块元素周围的框具有不同的功能。block 元素可以操作 box 模型中的所有属性，包括内容区域的宽度和高度，以及边框、填充和边距。如果没有设置宽度，block 元素将水平扩展到包含元素所允许的最大值。

内联元素的局限性更大，因为它不能设置垂直边距(顶部或底部)。它也不能改变其内嵌框的宽度或高度。对于内联元素，可以用line-height属性设置最小高度，但是宽度和高度会自动调整以适合元素容纳的内容。

内联元素有一个子类，叫做替换内联元素，它使用外部对象，比如<img>、<video>和<object>；并形成<input>、<textarea>等元素。有了这些内嵌元素，所有的框属性都可以像块元素一样被操作。

跨度和分度

使用<span>和<div>元素是向 web 文档添加结构的一种通用方式。这些元素没有关联的样式，这使得它们特别适合使用类和 id 选择器。两者的区别在于<span>是内嵌元素，而<div>是块元素。

<span>Inline</span>
<div>Block</div>

作为一个行内元素，<span>主要用于给文本添加样式。它不能用于样式块元素，因为根据 HTML 规范，这种元素不允许出现在内联元素中。

<span style="color: red;">Red text</span>

相反，<div>用于为其他块和行内元素创建样式化的容器。这些自定义容器通常构成了网页的布局。因为它是一个 block 元素，<div>允许操作元素的所有 box 属性(宽度、高度、填充、边框和边距)。

<div class="a">
  <div class="b">Block within a block</div>
</div>

语义元素

在 HTML 4 中，一般的<div>元素是用来定义用 CSS 格式化的网页部分的主要元素。它没有传达任何语义，这被认为是语言的一个缺点。HTML 5 规范引入了许多其他鼓励使用的结构元素，比如<header>、<footer>、<section>、<article>和<nav>。

出于可访问性和可维护性的原因，当这些新的容器元素在给定的上下文中合适时，它们是首选的。每当没有语义上更合适的元素可用时，<div>元素仍然是合适的，并继续被广泛用作通用容器。HTML 5 元素在 Chrome 6+、Firefox 4+、Safari 5+、Opera 11.5+和 IE 9+中得到支持。

HTML 5 元素的 CSS 样式可以通过 HTML 5 Shiv 脚本添加到 IE 6-8 中。 ¹ 这个 JavaScript 文件可以使用 IE 条件注释下载和引用，这样就不会影响现代 web 浏览器的性能:

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

Firefox 3+、Safari 3.1+和 Opera 10+已经允许未知元素的样式化。但是，要按预期方式运行，这些元素需要显式设置为显示为块元素，因为这不是默认样式。

header, footer, section, article, aside, details, figcaption, figure, hgroup, menu, nav {
  display: block;
}

Footnotes 1

http://code.google.com/p/html5shiv/

十七、边框

边框属性用于格式化元素周围的边框。它们可以应用于任何元素，并且不继承。

边框样式

要使元素周围的边框可见，必须将border-style属性设置为除默认值none之外的值。

border-style (1-4) | border-top-style |
border-right-style | border-bottom-style |
border-left-style :
  none | dashed | dotted | double | groove |
  hidden | inset | outset | ridge | solid

实心边框样式是最常用的一种，但是还有其他几种显示边框的选项，如图 17-1 所示。hidden值移除边框，与none同义，除了它还隐藏具有折叠边框的表格中的共享边框。

图 17-1

边框样式外观

border-style属性是可以设置一到四个值的几个属性之一。当指定的值少于四个时，border-style值被复制，如图 17-2 所示。

图 17-2

解释了 1 到 4 值语法

根据这些规则，下列声明是同义的，并且在元素的顶部和底部显示实线边框:

border-style: solid none solid none;
border-style: solid none solid;
border-style: solid none;

要以相同的样式呈现所有边框，只需指定一个样式值。

border-style: solid;

border-style属性有四个子属性，也可以用来定位每个边框的样式。

border-top-style:    dotted;
border-right-style:  dashed;
border-bottom-style: ridge;
border-left-style:   inset;

边框宽度

控制边框宽度的border-width属性可以用长度单位或预定义值之一来设置:thin、medium或thick。初始值为medium，通常渲染为 3 个像素。

border-width (1-4) | border-top-width |
border-right-width | border-bottom-width |
border-left-width :
  <length> | thin | medium | thick

与border-style一样，该属性可以有一到四个值，并且有四个子属性用于设置各个边框的宽度。

/* Shortcut property */
border-width: thin medium;

/* Full-length properties */
border-top-width:    thin;
border-right-width:  medium;
border-bottom-width: thin;
border-left-width:   medium;

宽度为零表示不显示边框。该值与将边框样式设置为none的效果相同。

边框颜色

border-color设置边框的颜色。CSS 没有指定默认的边框颜色，但是大多数浏览器都是黑色的。该属性可以有一到四个值，并且有四个子属性用于设置各个边框的颜色。

border-color (1-4) | border-top-color |
border-right-color | border-bottom-color |
border-left-color :
  <color> | transparent

将颜色设置为透明会使边框不可见，而不会更改布局。从 CSS 3 开始，transparent关键字可以用在任何需要颜色值的地方。

border-color: transparent;

边界

属性可以在一个声明中设置宽度、样式和颜色边框属性。这是控制边框最常用的属性。

border | border-top | border-right |
border-bottom | border-left :
  <border-width> + <border-style> + <border-color>

这些值可以按任何顺序设置，因为它们之间没有歧义。这两个值中的任何一个都可以省略。

border: 1px solid black;

border属性有四个子属性，用于指定四个边的边界设置。

border-top:    1px solid red;
border-right:  1px solid blue;
border-bottom: 1px solid aqua;
border-left:   1px solid lime;

边框半径

使用border-radius属性或它的四个子属性可以使边框的角变圆。

border-radius (1-4) | border-top-left-radius |
border-top-right-radius | border-bottom-right-radius |
border-bottom-left-radius :
  <length> | <percentage> [ / <length> | <percentage> ]

border-radius属性可以有一到四个值。每个半径值可以通过使用一个圆半径值或两个椭圆半径值来设置。该值可以是长度或百分比。如果使用百分比，它是相对于容器的尺寸。以下示例如图 17-3 所示。

图 17-3

边框半径示例

.a { border-radius: 5px; }
.b { border-radius: 5px 20px; }
.c { border-radius: 50%; }
.d { border-radius: 30px/10px; }

可以使用border-radius的四个子属性设置四条边的半径。以下示例渲染与图 17-3 中的第二个盒子相同:

border-top-left-radius:     5px;
border-top-right-radius:    20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius:  20px;

border-radius是一个支持良好的 CSS 3 属性。为了增加对旧浏览器的支持，可以使用浏览器前缀-webkit和-moz。

.round {
  /* Safari 3-4 */
  -webkit-border-radius: 5px;

  /* Firefox 1-3.6 */
  -moz-border-radius: 5px;

  /* Chrome 1+, Firefox 4+, Safari 5+, Opera 10.5+, IE 9+ */
  border-radius: 5px;
}

十八、概述

轮廓是围绕元素绘制的线条，位于边框边缘之外。它通常呈现为交互式元素周围的虚线，以显示哪个元素具有焦点。虽然与边框相似，但轮廓的不同之处在于它不占用盒子模型中的任何空间。此外，与边框不同，轮廓的所有四个边都必须相同。大纲属性可以应用于任何元素，并且它们都不会继承。

轮廓样式

轮廓的样式用outline-style属性设置。要显示大纲，需要将该值设置为除默认的none之外的值。

outline-style : none | solid | dotted | dashed | double |
                groove | ridge | inset | outset

该属性允许与border-style相同的值，除了hidden不是有效的outline-style。它们的渲染也是一样的，如图 18-1 所示。

图 18-1

轮廓样式的外观

轮廓宽度

轮廓的粗细由outline-width属性指定。像border-width属性一样，它的值可以是指定的长度或者关键字thin、medium或thick中的一个。

outline-width : <length> | thin | medium | thick

CSS 没有定义这三个关键字的数值粗细，但是它们通常分别呈现为 1px、3px 和 5px。像border-width一样，这个属性的初始值是medium。

轮廓颜色

轮廓的颜色可以用outline-color属性改变。除了标准的颜色符号，关键字invert也是该属性的有效值。

outline-color : invert | <color>

为了确保适当的对比度，规范建议默认值为invert，它将轮廓设置为下面颜色的反义词。但是实际上只有 IE 8+和 Opera 7+支持这个可选值，所以不常用。

概述

outline是一个简写属性，用于在一个声明中设置所有前面的大纲属性。

outline : <outline-width> + <outline-style> + <outline-color>

这些值可以按任何顺序指定，因为它们之间没有歧义。他们中的任何一个都可以被忽略。

outline: thin solid red;

这与设置所有单个属性的效果相同，但语法更方便:

outline-width: thin;
outline-style: solid;
outline-color: red;

轮廓偏移

轮廓和边框边缘之间的间距可以用 CSS 3 中引入的outline-offset属性来设置。

outline-offset : <length>

以下声明将轮廓向外移动 3 个像素。允许负值，但这会将轮廓移动到元素内部。

outline-offset: 3px;

虽然 IE 不支持该属性，但它可以在所有现代浏览器中工作，包括 Chrome 4+、Firefox 2+、Safari 3.1+、Opera 12.1+和 Edge 15+。

十九、边距和填充

边距和填充用于调整元素的位置并在其周围创建空间。

填料

填充是元素内容与其边框之间的空间。它是使用这里显示的填充属性设置的。这些属性不继承，可以应用于任何元素。

padding (1-4) | padding-top | padding-right |
padding-bottom | padding-left :
  <length> | <percentage>

有四个属性可以分别设置每一侧的填充。在下面的示例中，垂直(上、下)边距为 10 像素，水平(右、左)边距为零。

padding-top:    10px;
padding-right:  0;
padding-bottom: 10px;
padding-left:   0;

可以使用padding属性将这些声明缩短为一个声明。然后按顺时针顺序指定填充值:顶部、右侧、底部和左侧。

padding: 10px 0 10px 0;

像许多其他与盒子模型相关的属性一样，padding属性可以用一到四个对应于元素盒子边缘的值来设置。少于四个值时，如图 19-1 所示重复填充。

图 19-1

解释了 1 到 4 值语法

例如，如果指定了两个值，第一个值设置顶部和底部填充，第二个值设置右侧和左侧填充。这给出了一种更短的方式来编写前面的例子。

padding: 10px 0;

请记住，填充是元素背景的一部分，受背景属性的影响，而边距总是透明的。

边缘

边距是元素边框周围的空间，使用下面列出的边距属性进行设置。这些属性不会被继承，可以应用于任何元素，但垂直边距不会影响未替换的行内元素。

margin (1-4) | margin-top | margin-right |
margin-bottom | margin-left :
  <length> | <percentage> | auto

Margin 和 padding 都可以使用相对于包含元素的宽度和高度的百分比值。与填充相反，边距可以是负数，这允许元素区域重叠。auto关键字让浏览器自动计算边距。

像填充和边框属性一样，margin属性可以用一到四个值来设置。例如，在下面的声明中，上下边距为 1 厘米，左右边距为 0:

margin: 1cm 0;

margin属性也有四个子属性，它们为设置四条边的边距提供了一个更详细的方法。

margin-top:    1cm;
margin-right:  0;
margin-bottom: 1cm;
margin-left:   0;

上下边距在相邻的框之间共享，因此两个框之间的垂直距离不是边距之和，而只是两个边距中较大的一个。因此，下面两个<div>框之间的距离只有 10 个像素:

<div style="margin-bottom: 5px;">Top box</div>
<div style="margin-top: 10px;">Bottom box</div>

二十、尺寸

尺寸属性控制元素的大小及其最小和最大尺寸。它们不继承，只能应用于块元素和替换的行内元素。

宽度和高度

元素内容区域的宽度和高度可以用width和height属性设置。这两个属性可以指定长度或百分比值，其中百分比相对于父元素的尺寸。

width | height : auto | <length> | <percentage>

块元素通常延伸到其容器的边缘。相反，元素的高度会折叠以适合其内容。使用width和height属性，可以改变这些默认行为。在下面的示例中，应用类的元素的宽度为 100 像素，高度为 50 像素。这样设置尺寸后，无论页面大小如何调整，元素都会保持该尺寸。

.mybox {
  width: 100px;
  height: 50px;
}

最小宽度和最小高度

min-width和min-height属性设置元素的最小尺寸。元素的宽度和高度仍会扩展以适应内容，但元素不会折叠到指定的最小尺寸以下，其中不包括填充、边框或边距。

min-width | min-height : <length> | <percentage>

这些属性的有效值是长度和百分比，其中百分比是相对于包含块的尺寸。例如，下面的类使元素占据至少一半的可用宽度和高度:

.half {
  min-width: 50%;
  min-height: 50%;
}

最大宽度和最大高度

元素内容区域的最大尺寸是用max-width和max-height属性设置的。它们可以设置长度或百分比值，以及关键字none来清除先前设置的值。

max-width | max-height : none | <length> | <percentage>

通过设置最大和最小宽度，可以定义元素宽度变化的间隔。如果可以的话，使用下面的类的 block 元素扩展到填充 500 个像素。当水平空间有限时，允许元素缩小到不少于 200 个像素。

.mybox {
  max-width: 500px;
  min-width: 200px;
}

max-width属性优先于min-width。然而，高度属性正好相反，因为min-height的优先级高于max-height。因此，使用以下类的元素的高度为 5 em，除非其内容需要更高的高度。在这种情况下，元素垂直扩展到其最大允许值 20 em。

.mybox {
  max-height: 20em;
  min-height: 5em;
}

请记住，固定的width和height属性不应与min-和max-属性一起使用。所有主流浏览器都支持四个min-和max-属性，包括 Chrome 1+、Firefox 1+、Safari 1+、Opera 8+和 IE 7+。它们通常与媒体规则一起使用，用于创建在不同屏幕尺寸上都能很好工作的流畅布局。

盒子大小

维度属性通常指的是内容区域，而不是填充区域或边框区域。因此，要知道元素在盒子模型中占据的实际宽度或高度，必须考虑周围的填充和边框。

/* 100 pixels wide element */
.mybox {
  padding: 3px;
  border: 2px solid red;
  width: 90px;
}

CSS 3 引入了box-sizing属性，允许 web 开发人员选择如何计算宽度和高度。它的默认值是content-box，这意味着维度属性只引用内容区域。可选的border-box值包括这些尺寸中的填充和边框。

box-sizing : content-box | border-box

通过将框大小改为border-box，您可以更容易地创建网格布局，因为您不再需要考虑填充和边框大小。

/* 100 pixel wide element */
.mybox {
  box-sizing: border-box;
  padding: 3px;
  border: 2px solid red;
  width: 100px;
}

border-box属性。不继承，但可以使用通用选择器将其应用于网站上的所有元素。为了增加对浏览器的支持，可以使用前缀-webkit和-moz。

/* Use border-box for all elements */
* {
  /* Chrome 1-8, Safari 3-5 */
  -webkit-box-sizing: border-box;

  /* Firefox 1-28*/
  -moz-box-sizing: border-box;

  /* Chrome 9+, Firefox 29+, Safari 5.1+, Opera 9.5+, IE 8+ */
  box-sizing: border-box;
}

浏览器对box-sizing属性的支持已经足够好，现在所有主流浏览器都支持它。因此，许多网站利用这一特性来简化布局的网格计算。

二十一、定位

定位属性可以更改元素的显示方式和位置。它们能够非常精确地控制网页布局。

位置

使用position属性可以用四种不同的方式定位元素。属性设置为除了static之外的任何值的元素被称为定位元素。

position : static | relative | absolute | fixed

可以使用top、left、right和bottom属性移动已定位的元素，这些属性可用于将元素定位在页面上的任何位置，还可以水平和垂直调整元素的大小。它们允许正负长度和百分比值，百分比与包含块的尺寸相关。

top | right | bottom | left (positioned) :
  auto | <length> | <percentage>

静电

默认情况下，position属性的值为static。该值表示元素出现在页面流中的常规位置，不受top、left、right或bottom定位属性的影响。

/* Not positioned element */
.static { position: static; }

因为position属性没有被继承，而static是默认值，所以不需要显式地将position属性设置为static。

亲戚

将position值更改为relative意味着元素可以相对于其在页面流中的正常位置进行定位。例如，要显示比正常位置低 20 个像素的选定元素，使用以下声明:

/* Move element 20 pixels down */
.relative {
  position: relative;
  top: 20px;
}

相对定位的元素被视为正常页面流的一部分，因此其他元素不会移动来填充移动元素留下的间隙。

相对于正常位置移动元素的效果也可以通过使用元素的边距来实现。这种解决方案通常是首选的，除非有特定的需要使元素定位，例如它是否将是一个绝对定位的子元素的容器。

/* Move element 20 pixels down */
margin-bottom: -20px;

请记住，更改边距会影响布局和填充间隙，而相对位置不会。

绝对的

position值absolute将元素从任何包含元素中分离出来，并允许它相对于其最近的定位祖先或文档体(如果没有的话)进行定位。

/* Place element in upper left corner */
.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

固定的；不变的

固定元素相对于屏幕视口定位。当页面滚动时，它不会移动。与绝对定位元素类似，固定元素在正常页面流中不保留任何空间。

/* Place element

fixed in bottom right corner */
.fixed {
  position: absolute;
  bottom: 0;
  right: 0;
}

泛滥

属性决定如何处理块元素的内容溢出。它默认为visible，意味着扩展到元素内容区域之外的文本和子元素是可见的。将值设置为hidden会隐藏溢出的内容，使用scroll值，元素的块可以滚动以容纳溢出的内容。auto值类似于scroll，但是滚动条仅在必要时出现。

overflow (block) : visible | hidden | scroll | auto

该属性控制水平和垂直溢出的行为。另外两个属性overflow-x和overflow-y可用于区分水平溢出和垂直溢出的处理方式。这两个属性的值与overflow属性的值相同。

overflow: hidden;   /* hide all overflow */
overflow-x: hidden; /* hide horizontal overflow */
overflow-y: hidden; /* hide vertical overflow */

夹子

如果一个元素被定位为绝对或固定，那么clip属性可以将它裁剪成一个矩形。它使用一个名为rect()的 CSS 函数来指定剪辑区域。

clip (absolute | fixed) :
  auto | rect(<top>, <right>, <bottom>, <left>)

rect()需要四个长度值，每个值用逗号分隔。这些值相对于元素的左上角。图 21-1 所示的例子从应用它的元素中剪切并显示一个 200 x 400 的像素区域。

图 21-1

阴影区域被移除

.myclip {
  position: absolute;
  clip: rect(100px, 500px, 300px, 100px);
}

关键字auto可以用作右侧或底部的值，分别表示元素的全宽或全高。这个关键字也是clip属性的默认值，这意味着元素不会被裁剪。

/* Remove 100px from left and top */
clip: rect(100px, auto, auto, 100px);

/* No clipping */
clip: auto;

浏览器对 clip 属性的支持几乎是通用的:Chrome 1+、Firefox 1+、Safari 1+、Opera 7+和 IE 8+。

z 指数

相互重叠的定位元素通常根据它们在 web 文档中的顺序进行分层。这种自然的堆叠顺序可以用z-index属性来改变

z-index (positioned) : auto | <integer>

z-index属性取一个正整数或负整数作为它的值，表示堆叠顺序。值较高的元素位于值较低的元素之前，如下例所示:

<img src="ace-of-hearts.png" style="
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;">

<img src="ace-of-spades.png" style="
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 0;">

在本例中，如图 21-2 所示，红桃 a 由于其较高的堆叠顺序而层叠在黑桃 a 之上。

图 21-2

定制堆叠顺序

垂直对齐

一行中文本和行内元素的垂直对齐可以用vertical-align属性来控制。该属性也可用于表格单元格元素。

vertical-align (inline | table-cell) :
  baseline | <length> | <percentage> | top | middle |
  bottom | text-top | text-bottom | super | sub

默认情况下，文本和内联元素(如图像)的底部在基线处对齐，基线是所有字母所在的不可见线。值top和bottom分别将图像与线条的顶部和底部对齐。不太直观的是值middle，它将图像的中间与父图像中小写字母的中间对齐。图 21-3 中显示了这些公共对准值的渲染。

图 21-3

常见垂直对齐值

vertical-align的两个不常用值是text-bottom和text-top。text-bottom值将元素的底部与文本的底部对齐。与之相反，text-top值将元素的顶部与文本的顶部对齐。还有sub和super值，它们分别将元素与下标和上标位置对齐。使用这些值的结果如图 21-4 所示。

图 21-4

其他垂直对齐值

元素也可以用长度或百分比值升高(正值)或降低(负值)。百分比和长度值都从基线开始；百分比值相对于行高。

/* Align text segment 5 pixels below normal text */
Normal <span style="vertical-align: -5px;">Lowered</span>

当应用于表格单元格元素<th>和<td>时，vertical-align属性的行为类似于 HTML 中不推荐使用的valign属性。表格单元格的有效值为baseline、bottom、middle和top。其他值，包括长度和百分比，不应用于表格单元格。

top。值将单元格的顶部填充边缘与行的顶部对齐。同样，bottom将单元格的底部填充边缘与行的底部对齐。更值得注意的是，baseline值对齐单元格的内容，以便它与其他基线对齐的单元格共享相同的基线。

与默认为baseline的行内元素相比，表格单元格元素通常在中间对齐。对于表格单元格，middle值的行为更加直观，它将单元格的填充框对齐到行的中间，使单元格的内容居中显示。

在以下示例中，表格单元格元素在底部垂直对齐:

<table>
  <tr>
    <td style="vertical-align: bottom;">Bottom</td>
  </tr>
</table>

定中心

有几种方法可以使 CSS 中的元素居中。一种方法是使用值为center的text-align属性。

.text-center { text-align: center; }

通过将此属性应用于 block 元素，其中的文本将居中对齐。

<p class="text-center">Centered text</p>

此方法适用于文本和内联子元素，但不适用于子块元素。要使块元素居中，可将左右边距设置为auto，使水平边距相等，从而使块居中。

.box-center { margin: 0 auto; }

请记住，对于要居中显示的块元素，其宽度必须是固定的，而不是灵活的；否则，它会占用所有可用的宽度。

<div style="width: 50px; height: 50px;
            border: 1px solid black;"
     class="box-center"></div>

对于垂直居中，将内容居中对齐的一种方法是使用父元素的vertical-align属性，将其值设置为middle。这种行为仅适用于表格单元格元素，因此需要将容器改为表格单元格元素，如下面使用display属性的示例所示:

<div style="vertical-align: middle;
            display: table-cell;
            min-height: 100px;">Centered</div>

用 flexbox 模块在 CSS 中添加了更简单的对齐控制，这将在后面的章节中讨论。

转换

transform 属性允许对元素进行可视化操作，例如旋转、倾斜、平移或缩放。

transform (block) : none | rotate(<angle>) | rotateX(<angle>) |
  rotateY(<deg>) | rotateZ(<deg>) | rotate3d(<x>,<y>,<z>,<deg>) |
  skew(<x-deg>[, <y-deg>])> | skewX(<deg>) | skewY(<deg>) |
  translate(<x>,<y>) | translateX(<x>) | translateY(<y>) |
  translateZ(<z>) | translate3d(<x>,<y>,<z>) | scale(<x>[, <y>]) |
  scaleX(<x>) | scaleY(<y>) | scaleZ(<z>) | scale3d(<x>,<y>,<z>)
  matrix(n,n,n,n,n,n)> | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
  perspective(<p>)

考虑下面的样式规则，这些规则将用于说明转换是如何工作的。请注意，这里使用的 float 属性使块元素水平堆叠，而不是垂直堆叠。

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 1em;
  background: #ccc;
}

/* Rotate element clockwise 45 degrees */
.a { transform: rotate(45deg); }

/* Tilt element 15 degrees right */
.b { transform: skewX(-15deg); }

/* Move element 25% down and scale height to 50% */
.c { transform: translateY(25%) scaleY(0.5); }

将这些样式应用于一组块元素的结果可以在图 21-5 中看到。

图 21-5

变形盒子

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>

矩阵函数可以使用一组六个值来执行一个或多个 2d 变换。前两个值分别用于垂直和水平缩放，值 1 表示不应用缩放。第二个和第三个值用于倾斜元素，最后两个值用于平移元素。

/* Scale to half size and skew 45 degrees left and down */
.d { transform: matrix(1,0.5,0,0.5,0,0) }
.e { transform: scaleY(0.5) skew(45deg) }

这两种转换将产生相同的结果，如图 21-6 所示。

图 21-6

矩阵变换

<div class="box d"></div>
<div class="box e"></div>

默认情况下，变换的原点是元素的中心。可以使用 transform-origin 属性更改该原点。第一个值是水平位置，第二个值是垂直位置，第三个值表示 Z 轴上的位置。第三个值仅在使用 3d 变换时有效，并且不能是百分比。

transform-origin (block) : 50% 50% 0 |
  <x-axis: left | center | right | <length> | <%>> +
  <y-axis: top | center | bottom | <length> | <%>> +
  [<z-axis: <length>>]

Chrome 4+、Firefox 3.5+、Safari 3.1+、Opera 11.5+和 IE 9+都支持 2d 变换以及 transform-origin 属性。3d 转换是后来添加的，从 Chrome 12+，Firefox 10+，Safari 4+，Opera 15+和 IE 10+开始可用。

二十二、分类

分类属性指定元素如何显示以及是否可见。

显示

属性决定了包围一个元素的盒子的种类。它可以使任何元素显示为内联、块或任何其他类型。每个元素都有一个默认的显示值，这取决于元素的类型。

display : none | inline | block | list-item | inline-block |
          inline-table | table | table-cell | table-row |
          table-column | table-column-group | table-footer-group |
          table-header-group | table-row-group | flex | inline-flex |
          grid | inline-grid | run-in

大多数 HTML 元素显示为内联或块；其他的有特殊的显示属性，比如<li>元素的list-item和<td>和<th>元素的table-cell。通过使用display属性，任何元素都可以被改变为这些或任何其他元素类型。例如，以下链接呈现为块元素，而不是内联元素:

<a href="#" style="display: block;">Block link</a>

display的一个更有用的值是inline-block，它结合了块和内联的特性。一个inline-block元素就像一个内嵌元素，除了它也可以像块元素一样操作盒子模型的宽度、高度和垂直边距属性。这些特性与被替换的内联元素相同，比如<img>和<button>。因此，这些元素在 HTML 5 中被正式重新定义为inline-block元素。

inline-block的一个常见应用是让列表项元素(<li>)适合水平导航菜单。请注意，将列表项元素的显示类型从list-item更改为inline-block会自动移除列表标记。

li {
  display: inline-block;
  width: 100px;
  background: #ccc;
}

有了这条规则，下面的标记呈现了三个灰色背景的盒子，如图 22-1 所示。

图 22-1

演示的内联块值

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

另一个有用的display值是none。它完全隐藏了一个元素，使得页面呈现得好像该元素不存在一样。

.removed { display: none; }

能见度

通过将属性的值设置为hidden,visibility属性可以隐藏一个元素，而不会删除它所占据的空间。

visibility (block) : inherit | visible | hidden | collapse

collapse值只用于某些表格元素:行(<tr>)、列(<col>)、列组(<colgroup>)和行组(<thead>、<tbody>和<tfoot>)。根据规范，collapse应该移除隐藏的元素(与display: none相同)并为其他元素腾出空间。遗憾的是，并不是所有主流浏览器都遵循这个值的规范。将display属性设置为none会导致更一致的浏览器行为，应该改为使用。

不透明

属性可以使一个元素及其内容透明。

opacity : <number>

使用介于 0.0 和 1.0 之间的小数值来设置透明度。值为 1 时，元素是不透明的；0 表示元素完全透明或不可见。

.half-transparent { opacity: 0.5;}

Chrome 1+、Firefox 1+、Safari 1.2+、Opera 9+和 IE 9+中都包含对这个 CSS 3 属性的支持。可以使用以下过滤器增强 IE 支持:

.half-transparent {
  filter: alpha(opacity=50); /* IE 5-8 */
  opacity: 0.5;
}

漂浮物

属性将一个元素从它包含的元素中分离出来，并使它浮动在它的顶部，或者在左边或者在右边。它的目的是让文字环绕图像，在更现代的布局方法出现之前，它也常用于制作布局。浮动内联元素会自动将其更改为块元素。

float : none | left | right

若要让文本和其他内联内容环绕图像，您可以将它向左或向右浮动。

<img style="float: left;" src="myimage.png" alt="">

浮动允许阻塞。要水平对齐的元素。例如，可以用下面的类创建一个盒子网格:

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 1em;
  background: #ccc;
  border-radius: 10px;
}

这个类使盒子水平堆叠而不是垂直堆叠，这是块元素的正常行为(见图 22-2 )。

图 22-2

浮动框

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

使用浮动的一个副作用。这些浮动框后面的任何元素也是水平排列的。clear属性旨在阻止这种行为。

清楚的

属性用于从元素的左边、右边或两边清除浮动元素。

clear (block) : none | left | right | both

此属性通常被赋予其自己的类，该类与属性同名。

.clear { clear: both; }

带有clear类的空div容器通常放在浮动元素之后。这个被清除的元素被移到浮动元素的下面，而不是出现在它们旁边。

<div class="clear"></div>

因为浮动布局趋向于复杂和脆弱，它们已经被其他更现代的布局方法所取代，比如 flexbox 和 grid 模块。

光标

属性指定当光标悬停在一个元素上时，用户会看到什么。默认值是auto，意思是浏览器决定使用什么光标。标准光标值及其外观见表 22-1 。

表 22-1

标准光标值

|  |

除了这些值，可以使用url函数定义自定义光标。如果此游标不可用，可以在自定义游标之后指定一个通用游标，用逗号分隔。

cursor: url(new.cur), pointer;

二十三、列表

CSS 列表属性处理列表元素，特别是<ul>、<ol>和<li>元素。

列表样式类型

列表呈现时在每个列表项元素前显示一个标记(<li>)。使用list-style-type属性可以改变这个标记的外观。对于一个无序列表(<ul>)，每个列表项都以同样的方式标记。可以使用此处显示的预定义项目符号值，将disc(实心圆)作为初始值:

list-style-type : inherit | disc | circle | square | none

在有序列表(<ol>)中，每个列表项都用数字字符标记，以显示其在序列中的位置。所有主流浏览器都支持以下数值类型，以decimal作为初始值:

list-style-type : inherit | decimal | none | upper-alpha |
                  lower-alpha | upper-roman | lower-roman |
                  lower-greek | lower-latin | armenian |
                  georgian | decimal-leading-zero

下面的示例为两个列表元素分配:一个新的列表样式。可以让<ul>显示有序的标记，让<ol>显示无序的标记，但这不是好的做法。

ul { list-style-type: square; } /* ■ */
ol { list-style-type: upper-roman; } /* I, II, III, ... */

标记的颜色与列表元素的文本颜色相同。请记住，任何元素都可以通过将其显示类型更改为list-item来显示列表标记。

列表样式图像

作为预定义标记的替代，使用list-style-image属性允许自定义图像用作列表项目符号。

list-style-image : inherit | none | url(<url>)

图像路径是在 CSS url函数中指定的。

list-style-image: url(my-bullet.png)

该属性会覆盖使用list-style-type属性选择的任何标记类型。即便如此，指定一个list-style-type作为后备也是一个好主意，以防自定义项目符号图像由于任何原因不可用。

列表样式位置

列表标记通常位于元素框的外部。list-style-position提供了一种替代方法:将项目符号放在元素框中。

list-style-position : inherit | outside | inside

选择outside会将每行文本与第一行的开头对齐，而inside会使后续文本行在标记下方换行。inside值也可视地缩进标记，如图 23-1 所示。

图 23-1

外部和内部标记放置

列表样式

list-style是设置所有列表属性的简写属性。这些值可以按任何顺序设置，因为它们之间没有歧义。也可以省略任何一个值，在这种情况下，将使用该属性的默认值。

list-style : <list-style-type> + <list-style-image> + <list-style-position>

在下面的例子中，设置了list-style的type和position值，它们被继承到列表项中。

<ul style="list-style: inside square;">
  <li>Apple</li>
  <li>Orange</li>
  <li>Pear</li>
</ul>

请记住，列表属性不仅可以设计列表容器<ul>和<ol>,的样式，还可以设计单个列表项<li>的样式。

计数器

CSS 中的元素可以使用counter-increment和counter-reset属性自动编号。counter-reset属性指定计数器的名称。它后面可选地跟有计数器的初始值，缺省情况下是零。

/* Create a counter named chapter */
body { counter-reset: chapter; }

counter-increment属性接受计数器的名称，后跟一个可选的数字。默认情况下，number 为 1，它设置元素每出现一次计数器增加多少。

/* Increment the counter at each <h1> */
h1:before { counter-increment: chapter; }

创建计数器的最后一步是使用 CSS counter()函数显示它，并将计数器的名称作为它的参数。在本例中，章节号显示在<h1>元素之前:

/* Increment and display the counter */
h1:before {
  content: "Chapter " counter(chapter) " - ";
  counter-increment: chapter;
}

柜台。现在在<h1>元素前添加章节号。

<h1>First</h1>  <!-- Chapter 1 - First -->
<h1>Second</h1> <!-- Chapter 2 - Second -->
<h1>Third</h1>  <!-- Chapter 3 - Third -->

可以添加另一个计数器来枚举<h2>子标题。此处，该计数器在每个<h1>元素处重置为零:

h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
h1 { counter-reset: section; }

以下示例说明了计数器的显示方式:

<h1>Head</h1>  <!-- Chapter 1 - Head -->
<h2>Sub</h2>   <!-- 1.1 Sub -->
<h2>Sub</h2>   <!-- 1.2 Sub -->
<h1>Head</h1>  <!-- Chapter 2 - Head -->
<h2>Sub</h2>   <!-- 2.1 Sub -->.

嵌套计数器

CSS 计数器可以嵌套任意多级。这些嵌套的计数器可以使用一个名为counters()的 CSS 函数进行组合和显示。该函数的第一个参数是计数器名称，第二个参数是分隔每个计数器的字符串。

ul { counter-reset: mycounter; }
li:before {
  content: counters(mycounter, ".") " ";
  counter-increment: mycounter;
}

这些规则适用于以下无序列表(注意，会为每个嵌套列表自动创建一个新的计数器实例):

<ul>
  <li>item</li>   <!-- 1 item -->
  <li>item</li>   <!-- 2 item -->
  <ul>
    <li>item</li> <!-- 2.1 item -->
    <li>item</li> <!-- 2.2 item -->
  </ul>
</ul>

所有主流浏览器都支持计数器，包括所有版本的 Chrome、Firefox、Safari 和 Opera，以及 IE 8+。

二十四、表格

CSS 有许多专门用于表格元素的属性。这些属性提供了对浏览器如何呈现表格数据的控制。

边框间距

相邻表格单元格的边框之间的距离可以用border-spacing属性来改变，该属性相当于 HTML 中的cellspacing属性。W3C 将该属性的初始值定义为 0，但大多数浏览器默认将其呈现为 2px。

border-spacing : inherit | <length> [<length>]

该属性可以用一个或两个长度值来指定。有两个值，第一个设置水平间距，第二个设置垂直间距。

.spacing {
  border-spacing: 5px 10px;
}

border-spacing是表格的属性，而不是单元格的属性，因此它应用于<table>元素，如下例所示:

<table class="spacing">
  <caption>My Table</caption>
  <tr>
    <td>1st cell, 1st row</td>
    <td>2nd cell, 1st row</td>
  </tr>
  <tr>
    <td>1st cell, 2nd row</td>
    <td>2nd cell, 2nd row</td>
  </tr>
</table>

这张表格。如图 24-1 所示，实线边框应用于<td>元素。

图 24-1

示例表

表格单元格有边框和填充，但没有任何边距。他们用border-spacing代替。填充的工作方式与其他元素相同，其行为类似于 HTML 中的cellpadding属性。

边界崩溃

border-collapse属性决定表格边框是折叠成一个边框还是分开。

border-collapse : inherit | separate | collapse

通常，表格单元格有自己独特的边框，并由使用border-spacing属性设置的距离分隔。如果边框设置为折叠，则单元格共享边框，并且忽略任何border-spacing属性的值。

table { border-collapse: collapse; }

标题侧

元素为表格提供了一个标签。可以使用caption-side属性改变它的位置。

caption-side : inherit | top | bottom

标题通常显示在顶部，但是也可以使用caption-side属性将其放置在表格的下方。该属性适用于<caption>元素，但也可以为<table>元素设置，因为它是继承的。

caption { caption-side: bottom; }

空单元格

没有任何内容的表格单元格通常仍会显示其边框和背景。这种行为可以用empty-cells属性来改变。

empty-cells : inherit | show | hide

将该属性的值设置为hide会导致单元格的边框和背景被隐藏。表格的布局不受影响。

表格布局

table-layout属性决定表格单元格的宽度应该是固定的还是可变的。与其他表属性不同，table-layout不会被继承。

table-layout : auto | fixed

该属性最初设置为auto，这意味着表格单元格的宽度会自动扩展以适应其内容，即使这意味着超出其设置的宽度。为了强制表格的指定宽度，可以将table-layout设置为fixed。水平布局只取决于表格的设定宽度，而不取决于单元格的内容。

/* Enforce table width */
.fixed { table-layout: fixed; }

固定的表格布局有一个额外的好处，即浏览器可以更快地呈现表格，因为它一收到第一行就知道表格的尺寸。

二十五、媒体

CSS 提供了一种以不同方式显示文档的方法，这取决于查看文档的设备。这样的条件样式规则被放在一个媒体规则中，该规则由@media组成，后跟一个限制范围的表达式和一组包含条件样式规则的花括号。

@media screen {
  /* screen devices only */
}

媒体类型

CSS 2 中引入的媒体类型条件列出了以下有效值，包括针对所有设备类型的默认值all:

all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

不幸的是，媒体类型并不能说明设备的太多信息，所以它很少用于其预期目的。现代智能手机、平板电脑、笔记本电脑和台式电脑都把自己归为screen类型。今天，媒体类型条件的主要用途是区分屏幕文档和打印文档，以实现更便于打印的文档格式。

/* Print only */
@media print
{
  /* Hide navigation */
  #navigation { display: none; }

  /* Start h1 elements on a new page */
  h1 { page-break-before: always; }
}

媒体规则通常放在样式表的底部，这允许级联覆盖前面定义的规则。如果样式表包含许多条件规则，最好将它们移到主样式表之后的单独样式表中。然后可以用<link>元素上的media属性指定媒体条件。

<link rel="stylesheet" media="print" href="myprint.css">

该样式表包含打印条件，因此仅在文档发送到打印介质时应用。请记住，浏览器仍然下载样式表，即使它的媒体条件是假的。

媒体查询

CSS 3 上了一个台阶。更进一步，允许媒体规则针对设备的功能，而不仅仅是类型。它引入了一系列有针对性的媒体功能，如下表所示。所有这些特征，除了orientation、grid和scan，都可以加上前缀min-或max-来定义约束。

width | height | device-width | device-height | aspect-ratio | device-aspect-ratio | resolution | orientation | color | color-index | monochrome

最重要的媒体功能min-width和max-width允许您创建响应式设计，其中站点布局根据设备浏览器的视窗进行更改。

媒体查询组合了媒体类型和由一个或多个媒体特征组成的条件。例如，只有在最小宽度为 600 像素的基于屏幕的媒体上查看时，才会应用以下媒体查询中的规则:

@media screen and (min-width: 600px) {}

媒体查询不区分大小写，条件两边需要括号。这里看到的and操作符用于组合媒体类型和媒体特征，但它也可以将多个媒体特征组合在一起:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

这个媒体质疑。如果查看设备的最大宽度为 500 像素，纵横比至少为 1:1(方形或横向视窗)，则为 true。请注意，此处省略了媒体类型，因此该规则适用于所有媒体类型。

逻辑运算符

除了逻辑运算符and之外，媒体查询还可以包括逻辑运算符not和only以及逻辑运算符or。逗号(,)用作or运算符来分隔多组查询。如果屏幕宽度至少为 700 像素，或者设备处于横向模式，则以下媒体规则成立:

@media (min-width: 700px), (orientation: landscape) {}

not操作符用于否定整个媒体查询。它不能否定一个单独的特征。例如，以下媒体规则仅适用于设备屏幕宽度不是 800 像素的情况:

@media not screen and (device-width: 800px) {}

添加了only操作符来隐藏旧浏览器的媒体查询。根据规范，不支持媒体查询的浏览器应该将以下规则解释为应用于only媒体类型，这是无效的，从而导致条件样式规则被忽略。

/* Not applied in older browsers */
@media only screen and (min-width: 600px) {}

遗憾的是，IE 6-8 没有正确实现规范。因此，即使省略了only关键字，媒体查询也会被忽略，而不是将媒体规则应用于所有基于屏幕的设备。

/* Not applied in IE 6-8 */
@media screen and (min-width : 600px) {}

注意，not和only操作符都需要使用显式媒体类型，而逻辑or ( ,)和逻辑and操作符则不需要。

在所有主流浏览器中，对媒体查询的支持已经变得非常普遍。例如，Chrome 1+、Firefox 3.5+、Safari 4+、Opera 8+和 IE 9+都支持min-width和max-width查询。

测试媒体查询

测试你的媒体查询以确保你的网站在尽可能多的设备上看起来不错是很重要的。随着浏览器环境的改变(例如，当窗口被调整大小时)，最新的 web 浏览器都重新评估媒体查询。因此，您可以通过调整浏览器窗口的大小来测试您的设计如何响应不同的设备尺寸。Chrome 还有一个内置的工具栏，用于测试你的网站在不同设备上的外观。要显示器件选择工具栏，首先调出检查窗口(Ctrl+Shift+I)，然后单击左上角的切换器件工具栏图标(Ctrl+Shift+M)。

响应式设计指南

当设计一个响应式布局时，最简单的方法通常是先从移动布局开始，在没有任何媒体规则的情况下定义它的外观。当您扩展视口时，请注意该布局何时不再好看。这是您应该更改布局中视觉上中断或不再有用的部分的断点。此更改可能包括添加第二列或更改为更高级的导航菜单。当视口变大时，使用min-width和max-width媒体功能覆盖样式来定义这些断点，如下例所示。继续这种寻找断点的方法，直到达到足够高的分辨率。根据您的布局，您可能只需要定义几个断点。

@media (min-width: 800px) {
  body { background: red; }
}
@media (min-width: 401px) and (max-width: 799px) {
  body { background: green; }
}
@media (max-width: 400px) {
  body { background: blue; }
}

二十六、布局

在 CSS 中创建布局有很多种方法。本章将介绍其中一些方法，以及它们在创建简单布局时的比较。

浮动

在 CSS 的早期，创建网格状设计的少数可用方法之一是使用 float 属性使块元素保持在同一行上。

.left { float: left; }
.clear { clear: both; }

为了显示浮动元素的效果，将使用下面的框样式。

.box {
  width: 100px;
  height: 100px;
  margin: 1em;
  background: #ccc;
}

除了清除问题和浏览器不一致之外，float 属性提供了一种非直观的方式来定义布局，这种方式随着更好的方法的出现而长期以来一直被弃用。这里定义的浮动布局如图 26-1 所示。

<div class="left box"></div>
<div class="left box"></div>
<div class="clear"></div>
<div class="left box"></div>
<div class="left box"></div>
<div class="clear"></div>

内嵌块

与浮动布局相比，内嵌块显示类型有几个优点，包括更简单，不需要清除浮动。此外，当元素具有不同的高度时，布局不会像浮动元素那样中断。vertical-align 属性可用于指定元素高度不同时的对齐方式。

.inline {
  display: inline-block;
  vertical-align: top;
}

内联块元素的一个问题是，元素周围的任何空白都将被视为空白。删除空白，或者像这里看到的那样移动结束标签，解决了这个问题，但是使得 HTML 可读性更差。这里给出的例子产生了如图 26-1 所示的相同结果。

图 26-1

浮动布局

<div>
  <div class="inline box">
  </div><div class="inline box"></div>
</div>
<div>
  <div class="inline box">
  </div><div class="inline box"></div>
</div>

多列

多栏布局允许内容流入多个栏，就像在报纸中一样。它是通过设置以下一个或两个属性来启用的:列数和列宽。column-count 属性指定内容将分成的列数，让浏览器平均划分它们的宽度。相反，column-width 属性设置所有列的固定宽度，让浏览器根据可用的屏幕宽度来计算适合的列数。

.flexible-cols {
  column-count: 3;
}
.fixed-cols {
  column-width: 14em;
}

CSS 中的列框不能单独定位，所以所有列的大小必须相同。可以使用 column-rule 属性在列之间添加垂直线，其行为类似于 border 属性。也可以使用 column-gap 属性调整列间距。它可以更改为任何有效的长度单位，默认情况下为 1em。

.mycols {
  column-gap: 2em;
  column-rule: 1px solid #ccc
}

Chrome 50+、Firefox 50+、Safari 10+、Opera 37+和 IE 10+都支持多栏属性。可以使用-webkit-和-moz-前缀来扩展对 Chrome 4+、Firefox 2+、Safari 3.1+和 Opera 11.5+的支持。

flex box(flex box)的缩写形式

flexbox 或 flex box 模块提供了一种简单的方法来创建一维流体布局，无论是水平行还是垂直列。为了启用 flexbox 布局，flex display 属性被应用到称为 flex 容器的容器元素。

.flex-wrapper {
  display: flex;
}

该容器的子元素称为 flex 项目。默认情况下，它们按照在源文档中出现的顺序，按照文本方向(通常是从左到右)排列在一行中。考虑以下弹性项目。

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 10em
}
.item2 {
  flex-grow: 3;
  flex-shrink: 2;
  flex-basis: 10em
}

flex-basis 属性指定两个项目都希望为 10 米宽。由于 flex-grow 属性，如果 flex 容器大于 20em，第二个项目将占用第一个项目剩余空间的三倍。相反，如果容器收缩到小于 20em 宽度，第二个项目将收缩第一个项目的两倍，这由 flex-shrink 属性指定。这三个属性通常都是使用 flex 速记属性定义的，以确保所有值都已设置。

flex (flex): 0 1 auto | flex-grow + flex-shrink + flex-basis

如果容器的空间变得太窄而不适合该项的 flex-basis 设置，可以使用 flex-wrap 属性使容器换行到另一行。

flex-wrap (flex): nowrap | wrap | wrap-reverse

每个新的行(或列)将成为一个新的 flex 容器，在包装到该容器的项目之间分配空间。换行到第二行的项目不会与第一行的项目对齐。

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}

放置在 flex 容器中，这些项目将均匀分布在水平轴上，即使浏览器被调整大小，也不需要任何媒体查询，如图 22-1 所示。

<div class="flex-wrapper">
  <div class="item1 box"></div>
  <div class="item2 box"></div>
</div>

默认情况下，Flex 项目按照它们在源文档中出现的顺序沿文本方向水平布局。flex 容器的方向由 flex-direction 属性确定，该属性可以有四个不同的值。

flex-direction (flex): row | row-reverse | column | column-reverse

还可以使用 order 属性更改单个项目的顺序，order 属性是一个无单位的数字，第一个项目从 0 开始。当与媒体查询一起使用时，如果需要，可以根据可用的屏幕大小重新排列项目。

.item2 {
  /* Position before item1 */
  order: -1;
}

flexbox 的一个特性是使用 align-items、align-self、align-content 和 justify-content 属性可以很容易地正确对齐项目。

align-items (flex): stretch | flex-start | flex-end | center | baseline
align-self (flex): auto | flex-start | flex-end | center | baseline | stretch

align-items 属性设置所有直接子 flexbox 项目的主轴对齐，这是指水平 flexbox 的垂直对齐。可以使用 align-self 属性在单个项目上覆盖此设置。

.flex-wrapper {
  display: flex;
  /* Vertically align items to top */
  align-items: start;
}
.item1 {
  /* Stretch auto-sized item to container height */
  align-self: stretch;
}

使用 justify-content 属性完成次轴的对齐，这意味着水平 flexbox 的水平对齐。

justify-content (flex): flex-start | flex-end | center | space-between | space-around | space-evenly

该属性应用于 flex 容器并影响所有项目。

.flex-wrapper {
  display: flex;
  /* Center items vertically */
  align-items: center;
  /* Center items horizontally */
  justify-content: center;
}

最后，align-content 属性指定当次轴上有额外的可用空间时，flex 容器行将如何对齐。这仅在 flex 容器中有多行时有效。

align-content: stretch | flex-start | flex-end | center | space-between | space-around

默认情况下，每一行的高度都会拉伸并均匀分布在次轴上，但是 align-content 属性可以更改这种行为，例如，在 flex 容器的中间将各行组合在一起。

.flex-wrapper {
  display: flex;
  height: 100vh;
  flex-wrap: wrap;
  /* Align rows in center */
  align-content: center;
}

所有现代浏览器都支持 flexbox 属性，包括:Chrome 29+、Firefox 22+、Safari 10+、Opera 48+和 IE 11+。

网格盒

当需要通过行和列来控制布局时，grid 模块是为二维布局设计的。尽管 flexbox 可以根据可用空间调整每行的项目数，但网格将始终具有指定的列数和行数。要开始定义网格布局，显示值设置为 grid。与 flexbox 一样，这将容器的所有直接子容器都更改为网格项目。

.grid-wrapper {
  display: grid;
}

这将默认为一列网格，因此下面的项目看起来与它们在一列两行的正常流程中一样。

<div class="grid-wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

网格布局可以隐式或显式定义。这里的网格是隐式的，因为行数和列数没有明确定义。这种行的高度可以用 grid-auto-rows 属性设置。

grid-auto-rows (grid): auto | max-content | min-content | length

使用 grid-template-columns 属性可以添加更多的列，每个指定的值将列的大小定义为长度值或百分比。

.grid-wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 100px;
}

如果添加比行高更高的项目，其内容将溢出。相反，为了获得一个灵活的高度，可以使用 minmax 函数来扩展以适应内容。该函数设置行的最小和最大高度(或列的宽度),以便它可以自动调整到内容的高度。该函数可用于以下网格属性:网格-模板-列、网格-模板-行、网格-自动-列和网格-自动-行。

grid-auto-rows: minmax(100px, auto);

可以使用 grid-template-rows 属性定义明确的行数。请记住，放置在明确定义的网格之外的任何项目都会自动扩展网格。

grid-template-rows (grid): none | auto | max-content | min-content | length

指定网格行或列大小的一种方法是使用由fl表示的分数单位。这个单元代表了网格容器中可用空间的一部分，所以下面的网格布局将有两行，第一行占了可用空间的 40%，第二行占了剩余的 60%。请注意，这里使用的 repeat 函数是指定四列等宽的简单方法。它给出了与指定值auto四次相同的结果。

.grid-wrapper {
  display: grid;
  height: 100vh;
  grid-template-rows: 2fr 3fr;
  grid-template-columns: repeat(4, 1fr);
}

有一个名为 grid-template 的简写属性可用于一次性设置网格模板属性。

grid-template (grid): none | grid-template-rows / grid-template-columns | grid-template-areas

下面指定了一个高度为 200 像素的两列一行的网格布局。

.grid-wrapper {
  display: grid;
  grid-template: 200px / auto auto
}

请注意，grid-template 属性有一个名为 grid-template-areas 的可能值。此属性提供了定义网格布局的另一种方法，即首先用 grid-area 属性命名各个项目。然后可以引用这些名称，使用 grid-template-areas 属性将它们放置在网格上，如此处所示。请记住，一个元素可以在网格中占据多个单元格。

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: content; }
.item4 { grid-area: footer; }

.grid-wrapper {
  display: grid;
  grid-template-areas:
  'header header header'  /* row 1 */
  'menu content content'  /* row 2 */
  'footer footer footer'; /* row 3 */
}

项目通常按照它们在 HTML 中列出的顺序出现在网格中。可以使用 grid-column 和 grid-row 属性来指定某项将出现的位置，从而更改这种放置方式。例如，下面的样式放置了 header 元素，使它占据了网格第一行的前两个单元格。

header {
  grid-column: 1 / 2;
  grid-row: 1;
}

Chrome 57+、Firefox 52+、Safari 10.1+、Opera 44+和 Edge 16+提供了对网格布局属性的支持。