第11章 用CSS 进行布局
网站设计主要有两大类型：固定宽度和响应式。
对于固定（fixed）布局，整个页面和每一栏都有基于像素的宽度。顾名思义，无论是使用移动电话和平板电脑等较小的设备查看页面，还是使用桌面浏览器并对窗口进行缩小，它的宽度都不会改变。
响应式 页面也称为 流式（fluid 或liquid）页面，它使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。除了具有流动栏，响应式页面还可以根据屏幕尺寸以特定方式调整其设计。
11.5 盒模型
CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。
关于 CSS 的 width 属性对元素所显示宽度的影响，有两种处理方式。（不包含任何将其与邻近元素隔开的外边距。）
（1）默认的处理方式实际上有些有悖于常理。浏览器中元素的宽度与其width 属性值并不一致（除非它没有内边距和边框）。CSS 中的宽度指示的是内边距里内容区域的宽度。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似，只不过计算的是上下内边距和边框值。
（2）另一种方式则更为直观。使用这种方式的话，元素的显示宽度就等于width 属性的值。内容宽度、内边距和边框都包含在里面。height属性与之类似。要使用这种模式，仅需对元素设置 box-sizing: border-box;。
11.6 控制元素的显示类型和可见性
默认情况下，元素会按照它们在HTML 中自上而下出现的次序显示（这称为文档流，document flow），并在每个非行内元素的开头和结尾处换行。
1. 指定元素的显示方式display:
- block：让元素显示为块级元素；
- inline：让元素显示为行内元素；
- inline-block，让元素显示为行内元素，同时具有块级元素的特征，即可以为元素的四条边设置width、height、margin、padding等属性；
- none，隐藏元素，并将其从文档流中完全移除。
设置为 display: inline; 的元素不接受 padding 的设置，但 padding-top 和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素本身的空间
2. 控制元素可见性
visibility 属性的主要目的是控制元素是否可见。与 display 属性不同的是，使用visibility 隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。隐藏元素的空白区域仍然会在文档流中占据位置。
- hidden：让元素不可见，但在文档流中保留它；
- visible：让元素显示出来。
11.7 设置元素的高度和宽度
可以为很多元素设置高度和宽度，如分块内容、段落、列表项、div、图像、video、表单元素等。
同时，可以为短语内容元素（默认以行 内方式显示）设置 display: block; 或display: inline-block;，再对它们设置宽度或高度。、
设置元素高度或宽度：
(1) 输入 w，其中的w 是元素内容区域的宽度，可以表示为长度（带单位，如 px、em 等）或父元素的百分数。或者使用auto 让浏览器计算宽度（这是默认值）。
(2) 输入 height: h，其中的h 是元素内容区域的高度，只能表示为长度（带单位，如 px、em 等）。或者使用 auto 让浏览器计算高度（这是默认值）。
还有min-width、min-height、 max-width 和 max-height 属性用来设置最小和最大尺寸。
width 和 height 不是继承的。
如果不显式设置宽度和高度，浏览器就会使用 auto。对于大多数默认显示为块级元素的元素，width 的 auto 值是由包含块的宽度减去元素的内边距、边框和外边距计算出来的。
11.8 在元素周围添加内边距
内边距就是元素内容周围、边框以内的空间。可以改变内边距的厚度，不能改变它的颜色或纹理。显示在内边距区域的颜色和纹理是元素的背景，是通过background、background-color或者 background-image 设置的。
内边距的值可以使用像素、百分数、em 或 rem的组合。
padding 的简记法：同 border 和 margin 属性一样，padding 也可以使用简记法，从而不必使用padding-top、padding-right 等属性为每个边都单独设定内边距。
- padding: 5px;——使用一个值，这个值就会应用于全部四个边。
- padding: 5px 9px;——使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
- padding: 5px 9px 11px;——使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边
- padding: 5px 9px 11px 0;——使用四个值，它们会按照时钟顺序，依次应用于上、右、下、左四个边。
也可以输入 padding-top: x;、padding-right: x;、padding-bottom: x;或者padding- left: x; 单独为一个边添加内边距。
11.9 设置边框
可以在元素周围创建边框，或针对元素的某一边设置边框，并设置它的厚度、风格和颜色。
1. 定义边框风格
输入 border-style: type，其中的type可以是none、dotted （点线）、dashed （虚线）、solid （实线）、double （双线）、 groove （槽线）、ridge （脊线）、 inset （凹边）或outset （凸边）。
2. 设置边框宽度
输入 border- n，这里的n 是需要的宽度（含单位，如4px）。
3. 设置边框颜色
输入border-color: color，这里的color是颜色名称、十六进制值或 RGB、HSL、RGBA、 HSLA颜色。
4. 使用简记法同时设置多个边框属性border。
可以指定所有三种边框属性（如 border:1px solid 和 border-right: 2px dashed green;）。
border-top、border-right、border-bottom 或 border-left 将边框效果限制在某一条边上。
border-property，这里的property 可以是style（风格）、width（宽度）或color（颜色），仅使用单个属性设置边框。
border 简写属性及各个边框属性（border-width、border-style 和 border-color）均可接受一至四个值。
如果使用一个值，那么它会应用于全部四个边；
如果使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边；
如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边；
如果使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。
要让边框显示出来，至少必须定义边框样式。如果没有定义样式，就不会显示边框。边框样式的默认值是border-style: none。
11.10 设置元素周围的外边距
外边距是元素与相邻元素之间的透明空间。
设置元素外边距的方法：
- 输入 margin: x，其中的x 是要添加的空间量，可以表示为长度、相对父元素宽度的百分数或auto。
- 也可以输入margin-top: x;、 margin-right: x;、margin-bottom: x;或者 margin-left: x; 为元素的一条边应用外边距。
如果元素位于另一个元素的上面，对于相互接触的两个 margin（即元素相互接触的下外边距和上外边距），仅使用其中较大的一个，另一个外边距会被叠加。左右外边距不叠加。
外边距不是继承的。
当 em 值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。
对于内边距和外边距的设置， 建议使用相对单位。
如果要对内边距和外边距使用百分数，通常不会将它们用于上下边距的值，因为这样的值是基于其包含块的宽度的。
11.11 使元素浮动
可以通过 float 属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像或者其他元素周围，也可以使用这种技术创建多栏布局等。
让文本环绕元素float:
- left：让元素浮动到左边，其他内容围绕在它右边；
- right：让元素浮动到右边，其他内容围绕在它左边；
- none：让元素完全不浮动。（none是默认值，因此只有在特定情况下需要覆盖某个浮动元素的样式规则时才需要用到它。）
使用 width 属性显式地设置元素的宽度，以便有空间放置围绕它的内容。
float 属性不是继承的。
11.12 控制元素浮动的位置
浮动的元素对文档流的影响与非浮动元素的影响是不同的。浮动元素会让接下来的内容环绕在它周围。不过，它并不会影响父元素或其他祖先元素的高度，因此从这一点来说，它不属于文档流的一部分。
可以使用 clear 属性清除浮动效果。
控制元素浮动位置clear:
- left：阻止元素浮动在该元素的左边；
- right：阻止元素浮动在该元素的右边；
- both：阻止元素浮动在该元素的左右两边；
- none（默认值）：允许元素浮动在该元素的左右两边。
如果要让浮动元素的祖先元素在高度上包含浮动元素，并消除浮动，可以使用clearfix或overflow 方法替代。
要使用clearfix 方法，只需要在样式表中引入.clearfix 的规则，然后为浮动元素的父元素（该元素为希望清除浮动的元素）添加clearfix 类.
clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
使用overflow 创建自清除浮动元素
.container {
overflow: hidden;
}
应该将clear属性添加到不希望环绕浮动对象的元素上。而 clearfix 和overflow 方法是应用于浮动元素的父元素或祖先元素的。
浮动元素的 display 属性会变成display: block;，哪怕将其设置为 display: inline;（无论是浏览器的默认样式还是手动显式设置），该属性值依然为 block。
11.13 对元素进行相对定位
每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
记住，既要指明采用相对位置，还要给出偏移量。
偏移自然流中元素的步骤：
(1) 输入position: relative;。
(2) 输入 top、right、bottom 或 left。再输入 :d，这里的d 是希望元素从它的自然位置偏移的距离，可以表示为绝对值（如10px）、相对值（如 2em）或百分数。值可负可正。
其他元素不会受到偏移的影响，仍然按照这个元素原来的盒子进行排列。设置了相对定位的内容可能与其他内容重叠，这取决于top、right、bottom 和 left 的值。
使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用 z-index属性指定它们的叠放次序。
对元素设置 position: static，可以覆盖 position: relative 设置。static 是元素的默认值，这就是元素出现在常规文档流中的原因。
定位不是继承的。
11.14 对元素进行绝对定位
通过对元素进行绝对定位，即指定它们相对于 body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流。
这与相对定位不同，绝对定位的元素不会在原先的位置留下空白。
这与让元素浮动也不同。对于绝对定位的元素，其他元素不会环绕在它的周围。事实上，其他内容不知道它的存在，它也不知道其他内容的存在。
对元素进行绝对定位的步骤：
(1) 输入position: absolute;。
(2) 根据需要，输入 top、right、bottom或 left。再输入 :d，这里的d 是希望元素相对于其祖先元素偏移的距离（如 10px 或 2em）或相对于其祖先的百分数。
(3) 根据需要，对希望成为绝对定位参照体的祖先元素添加 position: relative;。如果跳过这一步，将对元素相对于body 计算偏移量。
由于绝对定位的元素脱离了文档流，因此它们可能会相互重叠，或与其他元素重叠。
如果不为绝对定位的元素指定偏移量，这个元素将显示在它的自然位置上，但不会影响后续元素在文档流中的位置。
还有一种定位类型称为固定定位。当访问者滚动浏览器窗口时，页面内容通常随之上下移动。如果对元素设置 position: fixed;，它就会固定在浏览器窗口中。当访问者上下滚动浏览器窗口时，该元素不会随之移动，页面的其余部分仍照常滚动。
使用相对定位、绝对定位或固定定位时，可以使用 z-index 属性指定相互重叠的元素的叠放次序。
对元素设置position: static 将覆盖position: absolute; 的设置。
11.15 在栈中定位元素
当你开始使用相对定位、绝对定位和固定定位以后，很可能发现元素相互重叠的情况。
在栈中定位元素：
输入 z-index: n，其中的n 是表示元素在定位过的对象堆中的层级的数字。
z-index 的值越大，元素在堆中就越高。
z-index 属性仅对定位过的元素（即设为绝对定位、相对定位或固定定位的元素）有效。
z-index 属性不是继承的。
11.16 处理溢出
元素并不总是包含在它们自己的盒子里。可以使用 overflow 属性控制元素在盒子外面的部分。
决定浏览器如何处理溢出overflow:
- visible：让元素盒子中的所有内容可见，这是默认项；
- hidden：隐藏元素盒子容纳不了的内容；
- scroll：无论元素是否需要，元素上添加滚动条；
- auto：让滚动条仅在访问者访问溢出内容时出现。
overflow 属性不是继承的。
11.17 垂直对齐元素
使元素垂直对齐vertical-align:
- baseline：使元素的基准线对齐父元素的基准线；
- middle：使元素位于父元素中央；
- sub：使元素成为父元素的下标；
- super：使元素成为父元素的上标；
- text-top：使元素的顶部对齐父元素的顶部；
- text-bottom：使元素的底部对父元素的底部；
- top：使元素的顶部对齐当前行里最高元素的顶部；
- bottom：使元素的底部对齐当前行里最低元素的底部；
- 元素行高的百分比，可以是正数，也可以是负数；
- 某个值（正负均可，单位为像素或 em）分别按照特定的值向上或者向下移动元素。
可以使用 vertical-align 设置表格单元格中内容的对齐方式。除了表格以外，vertical-align 属性仅适用于行内元素，不能应用于块级元素。
11.18 修改鼠标指针
修改指针形状cursor:
- pointer表示停留在链接上时通常显示的指针形状（）、default表示箭头（）、crosshair（）、move（）、wait（）、help（）、text（）或 progress（）；
- auto 显示特定情形下通常使用的指针形状；
- x-resize 显示双向箭头，这里的x 是其中一个箭头需要指向的方向，可以是 n（北）、nw（西北）、e（东），等等。例如，e-resize 指针显示成 。
不同浏览器、不同系统的指针形状可能有细微的差异。
第12章 构建响应式网站
响应式 Web 设计（responsive Web design）方法植根于以下三点：
灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以根据环境进行缩放。
灵活的、基于网格的布局，也就是流式布局。对于响应式网站，所有的width 属性都用百分数设定，因此所有的布局成分都是相对的。其他水平属性通常也会使用相对单位（em、百分数和 rem 等）。
媒体查询。使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。
12.2 创建可伸缩图像
制作可伸缩图像的步骤：
(1) 对任何想做成可伸缩图像的图像，在HTML 的 img 标签中省略 width 和 height 属性。
(2) 在样式表中，为每个想做成可伸缩图像的图像应用 max- 100%。
图像缩放的可用空间是由其父元素建立的内容区域。如果父元素有水平方向上的内边距，可用空间就会相应减小。
一定要使用 max- 100% 而不是 100%。它们都能让图像在容器内缩放，不过， 100% 会让图像尽可能地填充容器，如果容器的宽度比图像宽，图像就会放大到超过其本来尺寸，有可能会显得较为难看。
不要忘了对图像进行优化，让文件尺寸尽可能小。
可以使用 background-size 属性对背景图像进行缩放（对 IE8 无效）。
还可以使用 video, embed, object { max- 100%; } 让 HTML5 视频及其他媒体变成可伸缩的（同样也不要在 HTML中为它们指定 width 和 height）。
12.3 创建弹性布局网格
创建弹性布局需要使用百分数宽度，并将它们应用于页面里的主要区域。
可以使用下面的公式计算需要使用的百分数：
要指定的宽度（以像素为单位）／容器宽度（以像素为单位）＝值
创建弹性布局的步骤：
对于需要某个宽度实现预期布局的元素，设 置 percentage;，其中 percentage表示你希望元素在水平方向上占据容器空间的比例。通常说来，不必设置 100%;，因为默认设置为 display: block; 的元素（如 p 以及其他很多元素）或手动设置为 display: block; 的元素在默认情况下会占据整个可用空间。
作为可选的一步，对包含整个页面内容的元素设置 max- value;，其中 value表示你希望页面最多可增长到的最大宽度。通常，value以像素为单位，不过也可以使用百分数、em 值或其他单位的值。
如果父元素有水平方向上的内边距，它为子元素建立的容器就会变小。
还可以对元素设置基于百分数的margin 和 padding 值。也可以使用em 值。内边距和外边距的 em 值是相对于元素的font-size 的，而基于百分数的值则是相对于包含元素的容器的。
对于设置了body { font-size: 100%; } 的页面，对 font-size、margin、padding 和max-width 使用 em 值还有一个好处——如果用户更改了浏览器默认字体大小，那么页面也会跟着变大或变小。
将 box-sizing 属性设置为 border-box，就可以很方便地对拥有水平方向内边距（使用 em 或其他的单位）的元素定义宽度，而不必进行复杂的数学计算来找出百分数的值。
12.4 理解和实现媒体查询
可以使用三种方式针对特定的媒体类型定位 CSS：
第一种方式是使用 link 元素的 media属性，位于 head 内。
第二种方式是在样式表中使用 @media 规则。
第三种方式，即使用 @import 规则（会影响性能）。
媒体查询增强了媒体类型方法，允许根据特定的设备特性定位样式。要调整网站的呈现样式，让其适应不同的屏幕尺寸，采用媒体查询特别方便。
下面列出了可以包含在媒体查询里的媒体特性：
width（宽度）
height（高度）
device-width（设备宽度）
device-height（设备高度）
orientation（方向）
aspect-ratio（高宽比）
device-aspect-ratio（设备高宽比）
color（颜色）
color-index（颜色数）
monochrome（单色）
resolution（分辨率）
scan（扫描）
grid（栅格）
还有一些非标准的媒体特性，如-webkit-device-pixel-ratio （WebKit①设备像素比） -moz-device-pixel-ratio（Mozilla②设备像素比）
除了 orientation、scan 和 grid 以外，上述属性均可添加 min- 和 max- 前缀。min-前缀定位的是“大于等于”对应值的目标，而 max- 前缀定位的则是“小于等于”对应值的目标。
以下是媒体查询的基本语法。
- 指向外部样式表的链接：
<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
- 位于样式表中的媒体查询：
@media logic type and (feature: value) {
/* 目标CSS样式规则写在这里 */
}
logic（逻辑）部分是可选的，其值可以是 only 或 not。only 关键字可以确保旧的浏览器不读取余下的媒体查询，同时一并忽略链接的样式表。not 关键字可以对媒体查询的结果求反，让其反面为真。例如，使用 media="notscreen" 会在媒体类型为 screen 以外的任何类型时加载样式表。
type（类型）部分是媒体类型，如screen、print 等。
feature: value 对是可选的，但一旦包含它们，它们必须用括号包围且前面要有 and 这个字。feature 是预定义的媒体特性，如 min-width、max-width 或者 resolution。对 color、color-index和monochrome特性来说，value 是可选的。
可以使用 and 将多个特性和值的组合串接起来，还可以创建一系列媒体查询（使用逗号分隔每个媒体查询）。在用逗号分隔的媒体查询列表中，如果有一个媒体查询为真，则整个媒体查询列表为真。
12.6 兼容旧版IE
是 Internet Explorer 8 及以下的版本不支持媒体查询。这意味着这些浏览器只会呈现媒体查询以外的样式，即基准样式。
对于 IE8（及更早的版本），有三种解决方法：
- 什么都不做。让网站显示基本的版本。
- 为它们单独创建一个样式表，让它们显示网站最宽的版本（不会形成响应式的网页）。一种做法是复制一份常规的样式表，将其命名为 old-ie.css 之类的文件名。将媒体查询语句去掉，但保留其中的样式规则。在 HTML中添加条件注释，从而让不同的浏览器都能找到正确的样式表。
- 如果希望页面有响应式的效果，就在页面中引入 respond.min.js。
第13章 使用Web字体
CSS 规则 @font-face 为 Web 字体创造了可能，该样式规则允许 CSS 链接到服务器上的一种字体供网页使用。
第14章 使用CSS3进行增强
14.2 理解厂商前缀
CSS3 规范要达到 W3C 的推荐标准（即定稿）状态要经过数年。浏览器则通常在W3C 开发标准的过程中就会提前实现这些特性。在包含某个特性的初始阶段，浏览器通常会使用厂商前缀实现这类特性。这样，每个浏览器都可以引入自己的 CSS 属性支持方式，从而可以获取反馈，而且一旦标准发生改变也不会造成影响。
每个主流浏览器都有其自身的前缀：-webkit-（Webkit/Safari/旧版本的Chrome）、-moz-（Firefox）、-ms-（Internet Explorer）、-o-（Opera）。应该将前缀放在 CSS 属性名的前面。如今，在多数情况下，我们一般只需要-webkit 前缀。
14.3 为元素创建圆角
使用CSS3，可以在不引入额外的标记或图像的情况下，为大多数元素（包括表单元素、图像，甚至段落文本）创建圆角
1. 为元素创建四个相同的圆角
- -webkit-border-radius: r，这里的r 是圆角的半径大小，表示为长度（带单位）。
- border-radius: r，这里的r 是圆角的半径大小。这是该属性的标准短形式语法。
2. 为元素创建一个圆角
- -webkit-border-top-left-radius: r，这里的r 是左上方圆角的半径大小，表示为长度（带单位）。
- border-top-left-radius: r。创建左上方圆角。这是该属性的标准长形式语法。
此外，还可以单独创建其他方位的圆角：
创建右上方圆角：用 top-right 替换
创建右下方圆角：用 bottom-right 替
创建左下方圆角：用 bottom-left 替
3. 创建椭圆形圆角
- -webkit-border-radius: x/y，其中x 是圆角在水平方向上的半径大小， y 是圆角在垂直方向上的半径大小，均表示为长度（带单位）。
- border-radius: x/y
4. 使用border-radius 创建圆形
- -webkit-border-radius: r，这里的r 是元素的半径大小（带长度单位）。要创建圆形，可以使用短形式的语法，r 的值应该等于元素高度或宽度的一半。
- border-radius: r，这是标准的无前缀语法。
不支持 border-radius 的旧的浏览器仅会以方角呈现元素。
border-radius 仅影响施加该样式的元素的角，不会影响其子元素的角。因此，如果一个子元素有背景，该背景就有可能显示在一个或多个父元素的角的位置，从而影响圆角样式。
有时元素的背景（这里讲的不是子元素的背景）会透过其圆角。为了避免这种情况可以在元素的border-radius 声明后面增加一条样式规则：background-clip: padding-box;。
border-radius 属性不是继承的。
14.4 为文本添加阴影
使用text-shadow元素，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。
1. 为元素的文本添加阴影text-shadow:
分别输入表示 x-offset（水平偏移量）、y-offset（垂直偏移量）、 blur-radius （模糊半径）和color的值（前三个值带长度单位，四个值之间不用逗号分隔）。
2. 为元素的文本添加多重阴影text-shadow:
（1）分别输入 x-offset、y-offset、blur-radius 和 color 的值（前三个带长度单位，四个值之间不用逗号分隔）。blur-radius 的值是可选的。
（2）输入 ,（逗号）。
（3）对四种属性使用不同的值重复上述步骤。
3. 将text-shadow 改回默认值
输入 text-shadow: none;。
text-shadow属性不需要使用厂商前缀。
x-offset 和 y-offset 值可以是正整数，也可以是负整数。blur-radius 值必须是正整数。这三个值都可以为 0。
不能像边框和背景那样单独地指定四个属性值。
text-shadow 属性是继承的。
14.5 为其他元素添加阴影
使用 text-shadow 属性可以为元素的文本添加阴影，使用 box-shadow 属性则可以为元素本身添加阴影。它们的基础属性集是相同的，不过box-shadow 还允许使用两个可选的属性——inset 关键字属性和 spread 属性（用于扩张或收缩阴影）。
如果你希望兼容旧版 Android、Mobile Safari 和 Safari 浏 览器，那么 box-shadow 需要加上 -webkit- 厂商前缀。
box-shadow 属性接受六个值：带长度单位的 x-offset 和 y-offset、可选的带长度单位的 blur-radius、可选的 inset 关键字、可选的带长度单位的 spread 值及 color 值。如果不指定 blur-radius 和 spread 的值，则设为0。
1. 为元素添加阴影
- -webkit-box-shadow:分别输入表示 x-offset、y-offset、blur-radius、spread 和color 的值（前四个值均带长度单位）。
- box-shadow: 分别输入表示 x-offset、y-offset、blur-radius、spread 和color 的值。
2. 创建内阴影
- -webkit-box-shadow:分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。
- -webkit-box-shadow: 输入 inset，再输入一个空格，分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。
- box-shadow:
3. 为元素应用多重阴影
- -webkit-box-shadow:
(1) 分别输入表示 x-offset、y-offset、blur-radius、spread 和 color 的值（前四个值均带长度单位）。如果有必要可以将 inset 关键字包含在内。
(2) 输入,（逗号）。
(3) 对每种属性使用不同的值重复上述步骤。
- box-shadow:
4. 将box-shadow 改回默认值
- -webkit-box-shadow: none;。
- box-shadow: none;。
可以使用负的spread 值，让整个阴影比应用样式的元素小一些。
inset关键字可以让阴影位于元素内部。
box-shadow 属性是不继承的。
14.6 应用多重背景
为单个HTML元素指定多个背景是CSS3引入的一个特性。
1. 为单个元素应用多重背景图像
(1) 输入 background-color: b，这里的b 是希望为元素应用的备用背景颜色。
(2) 输入 background-image: u，这里的u是绝对或相对路径图像引用的 URL 列表（用逗号分隔）。
(3) 输入 background-position: p，这里的p 是成对的 x-offset 和 y-offset（可以是正的,也可以是负的；带长度单位或者关键字，如 center top）的集合，用逗号分隔。对于第 (2) 步中指定的每个 URL，都应有一组 x-offset 和 y-offset。
(4) 输入 background-repeat: r，这里的r 是 repeat-x、repeat-y 或 no-repeat 值，用逗号分隔，第 (2) 步中指定的每个 URL 对应一个值。
对于多重背景图像，可以使用标准的短形式语法，即使用逗号分隔每组背景参数.
指定多重背景不需要使用厂商前缀。
14.7 使用渐变背景
渐变背景也是 CSS3 中的新特性，通过它可以在不使用图像的情况下创建从一种颜色到另一种颜色的过渡。
使用 CSS 创建渐变有两种主要的方式：线性渐变和径向渐变，每种方式都有不同的必选参数和可选参数。除非指定一种颜色向另一种颜色过渡的位置，否则浏览器会自行决定不同颜色之间的过渡。
根据渐进增强的原则，最好为不支持背景渐变属性的浏览器提供一个备用选项。在CSS 中，它可以位于背景渐变规则的前面。
1. 创建备用背景颜色
输入background: color 或者background- color: color，这里的color 可以是十六进制数、RGB 值以及其他任何支持的颜色名称，另外也可以使用图像。最好不要将 RGBA、HSL 或 HSLA 值作为备用背景颜色，因为IE8 及以前的版本不支持。
2. 定义线性渐变background: linear-gradient(参数);
3. 定义径向渐变background: radial-gradient(参数);
4. 指定颜色
输入至少两种颜色，每个颜色之间用逗号分隔。指定的第一个颜色出现在渐变的开始位置，最后一个颜色出现在渐变的结束位置。对于径向渐变，它们分别为最里边的颜色和最外边的颜色。
5. 指定颜色和颜色的停止位置
根据“指定颜色”中的说明进行操作。如果需要，对每个颜色值指定一个百分数以控制颜色出现在渐变中的位置。这个值可以是负数，也可以是大于100% 的数。
14.8 为元素设置不透明度
opacity: o，这里的o 表示元素的不透明程度（两位小数，不带单位）。
opacity的默认值为1。该属性值可以使用 0.00（完全透明）至 1.00（完全不透明）之间的两位小数。例如，pacity:.09;、opacity: .2; 或者 opacity: 75;。小数点前的0是可选的。
opacity 属性与使用 RGBA 或 HSLA设置的 alpha 透明背景色是两个容易混淆的概念。opacity影响的是整个元素（包括其内容），而background-color: rgba(128,0,64,.6); 这样的设置仅影响背景的透明度。
Internet Explorer 9 之前的版本并不原生支持 opacity 属性，但对于它们，可以使用专有的滤镜效应.。
无论显示成什么样子，opacity 属性并不是继承的。opacity 的值小于 1 的元素的子元素也会受到影响，但这些子元素的opacity 值仍为1。
14.9 生成内容的效果
:before 和 :after 伪元素与 content 属性结合使用，从而创建所谓的生成内容（generated content）。生成内容指的是通过 CSS 创建的内容，而不是由HTML 生成的。
不过，生成内容并不是为页面添加段落或标题。使用生成内容可以添加符号，创建用于添加样式的空内容元素，还可以做很多其他的事情。
14.10 使用sprite 拼合图像
浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动设备上尤为明显。为了解决这一问题，可以将多个图像拼合成单个背景图像（sprite），再通过 CSS 控制具体显示图像的哪一部分。其中的秘密就是 background-position 属性。
第15章 列表
HTML 包含专门用于创建项目列表的元素。你可以创建普通列表、编号列表、符号列表以及描述列表，可以在一个列表中嵌套另外一个或多个列表。
所有的列表都是由父元素和子元素构成的。父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。
下面列出了三种列表类型以及组成它们的元素：
- 有序列表，ol为父元素，li为列表项。
- 无序列表，ul为父元素，li为列表项。
- 描述列表，dl 为父元素，dt 和 dd 分别代表 dl 中的术语和描述。描述列表在 HTML5之前称为定义列表。
除非使用CSS另行指定，有序列表中的项目使用阿拉伯数字（1、2、3 等）进行编号。
默认情况下，无序列表的项目前面显示实心的圆点。
15.2 选择标记
创建列表时，无论是有序列表还是无序列表，都可以选择出现在列表项目左侧的标记的类型。
1. 选择标记
在样式表中，输入 list-style-type:marker，这里的marker是以下属性值中的一种：
disc（圆点，●） 、 circle（圆圈，○） 、 square（方块，■）、
decimal（数字，1、2、3……）、
upper-alpha（大写字母，A、B、C……）、
lower-alpha（小写字母，a、b、c……）、
upper-roman（大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ……）、
lower-roman（小写罗马数字，i、ii、iii、iv……）。
2.显示无标记列表
在样式表规则中，输入list-style-type: none。
15.3 使用定制的标记
在目标列表或列表项的样式规则中，
(1) 输入list-style: none; 以取消常规的标记。
(2) 输入 background: url(image.ext) repeat-type horizontal vertical;，其中
image.ext 是要作为定制标记的图像的路径和文件名，
repeat-type 是 no-repeat、repeat-x 和repeat-y 中的一种（通常设为 no-repeat），horizontal 和vertical 值表示列表项目中背景图像的位置。
(3) 输入 padding-left: value;，这里的value 应不小于背景图像的宽度，以防列表项目的内容覆盖到定制标记的上面。
默认标记在默认情况下位于列表项目的外面，而定制标记显示在列表项目的里面，因为定制标记是为列表项目本身应用的背景图像。
15.4 选择列表的起始编号
1. 设置整个列表编号方案的初始值
在 ol 开始标签中输入 start="n"，这里的n 表示列表的初始值。
2. 修改有序列表中某列表项目的编号
在目标 li 项目内输入 value="n"，这里的n 代表该列表项目的值。
如果使用 start 和 type，请始终使用数字。即便决定使用字母或罗马数字对列表进行编号，也应使用数字。
value 属性的值会覆盖 start 属性的值。
列表可以包含一个以上的带 value 属性的 li。
15.5 控制标记的位置
控制标记位置list-style-position:
- inside： 让标记缩在文本块内。
- outside： 让标记显示在列表项目文本的左边（这是默认的设置）。
如果列表项目中的文本显得较为拥挤，则可以通过设置 line-height 增大文本行间距。
list-style-position属性是继承的。
15.6 同时设置所有的列表样式属性
CSS 也为 list-style 提供了简写形式。它将 list-style-type、list-style-position 和较少使用的list-style-image放到了一条属性中。
可以指定三个list-style 属性，也可以指定其中的任意一个，指定多个属性时顺序任意。任何没有显式地指定的属性都会设为其默认值（list-style-type 的默认值为 disc，list-style-image 的默认值为 none，list-style-position的默认值为outside）。
list-style 属性是继承的。这也是我们可以将它应用到父元素ol 或 ul 上的原因。
15.8 创建描述列表
HTML 提供了专门用于描述成组出现的名称（术语）及其值之间关联的列表类型。
根据 HTML5 规范，“由名称及其值构成的组合可以是术语和定义、元数据主题和值、问题和答案，以及任何其他的名 – 值组。”
每个列表都包含在 dl 中，其中的每个名 – 值组都有一个或多个 dt 元素（名称或术语）以及一个或多个 dd 元素（它们的值）。