第三部分 表现层的CSS

第11章 介绍层叠样式表

1. CSS的优点

• 精准的样式和对布局的控制
• 更少的工作
• 更易用的网站

2. 样式表

• 样式表由一个或多个样式规则组成
• 规则主要包括两个部分：
  • 用来标识受影响的一个或多个元素的选择器
  • 提供显示指令的声明

3. 选择器

3.1. 元素类型选择器

3.2. 组合选择器

通过逗号隔开多个选择器，将相同的样式属性列表应用到很多元素 h1,h2,h3{...}

3.3. ID选择器

标志是#字符，也叫做hash标志 li#sleestak{...}，因为id值在文档中是唯一的，因此可以忽略元素名 #sleestak{...} 也可以作为关联选择器的一部分#resources a{...}

3.4. 关联选择器

后代选择器

用空格隔开的列表表示，可以嵌套多层 ol a em{...}，还可以和组合选择器组合使用 h1 em, h2 em, h3 em{...}

子选择器

用>符号表示，用于直接子代

相邻同胞选择器

用+表示，用于直接来自同一父元素的元素上

一般同胞选择器

用～表示，用于源于同一父辈，并且在它之后发生的元素，是CSS3的新内容

3.5. 类选择器

用.符号表示，p.special{...} 忽略元素差别时.special{...}

3.6. 通用选择器

用*表示，匹配任何元素，还可以用作关联选择器 #intro *{...}，选择了#intro里的所有元素

3.7. 伪类选择器

用:表示，紧跟在元素名称后。

链接伪类：

• :link 对于没有被点击的链接应用样式
• :visited 对已经被点击的链接应用样式
  • :visited样式规则只能使用以下属性：color、background-color、border-color、outline-color。此外，不能使用任何透明值，包括transparent、rgba、hsla

用户操作的伪类：

• :focus 应用于元素被选择并且准备输入时
• :hover 应用户鼠标指针悬停在元素上时
• :active 应用于当元素正在单击或触动的处理过程中

当将样式应用到含有5个伪类的a元素时，它们的出现顺序对于正常运行很重要。例如：如果将:link和:visited放到最后，将覆盖其他状态并阻止它们的出现。链接伪类所需要的顺序是:link、:visited、:focus、:hover、:active其中，:focus大概率是为键盘用户提供，:hover也非常有可能应用相同的样式

结构伪类：

• :root
• :empty
• :first-child
• :last-child
• :only-child
• :first-of-type
• :last-of-type
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()

输入伪类

• :enabled
• :disabled
• :checked

位置伪类

• :target

语言伪类

• :lang()

逻辑伪类

• :not()

3.8. 伪元素选择器

用::表示，但也可以使用单冒号进行向后兼容

首字母和首行

• ::first-line 选择元素内文本的首行
  • 能应用的属性只有：color、text-decoration、font相关、vertical-align、background相关、word-spacing、text-transform、letter-spacing、line-height
• ::first-letter 选择元素内文本的首字母
  • 能应用的属性只有：color、text-decoration、font相关、vertical-align（if float is none）、background相关、word-spacing、text-transform、letter-spacing、line-height、padding相关、margin相关、border相关、float

用::before和::after生成内容，需要注意的点：

• 伪元素选择器紧跟在目标元素之后，没有任何空格
• 伪元素规则中既插入内容，又指定如何在一个声明块中设置它的样式
• content属性是必须的，提供要插入的内容，没有该属性，选择器什么都做不了
• 如果想要插入一个图像，请指定不带引号的URL
• 生成的内容不会成为文档DOM的一部分，只存在于浏览器的显示中，不能被诸如屏幕阅读器之类的辅助设备访问

3.9. 属性选择器

简单属性选择器：element[attribute]

• 选择有特定属性的元素，而不管它的值

精确属性值选择器 element[attribute="value"]

• 选择某个属性值为特定值的元素

部分属性值选择器 element[attribute~="value"]

• 选择某个属性值的内容包含特定值的元素，特定值在属性值中是单独的单词

连字符分隔属性选择器 element[attribute|="value"]

• 选择某个属性值的内容包含用连字符分开的特定值的元素

起点子串属性值选择器 element[attribute^="value"]

• 选择某个属性值的内容以特定值开始的元素

结尾子串属性值选择器 element[attribute$="value"]

• 选择某个属性值的内容以特定值结尾的元素

任意子串属性值选择器 element[attribute*="value"]

• 选择某个属性值的内容包含特定值的元素，特定值在属性值中可能是嵌入的状态

4. 声明

• 声明由“属性：值；”对组成。规则中的花括号和所有声明，统称为声明块。
• 一些样式表属性可以被继承，而一些则不能。通常，与文本样式相关的属性（font-size、color、style等）都可以继承，而border、margin、background等影响元素周围面积的属性往往不能继承。
• 应用于具体元素的任何属性将覆盖该属性的继承值。

5. 将样式信息应用到HTML文档的方式

5.1. 外部样式表

• 独立的、纯文本的包含很多样式规则的文档。
• 必须使用.css后缀名。
• 可以以@charset at-rule开头来声明字符编码，只有在使用UTF-8以外的编码时才需要，但使用@charset时，它必须是样式表的第一个元素，在它前面不能有任何字符，包括注释或样式规则

应用外部样式表的方法

• 使用链接元素
  • link元素定义了当前文档和外部资源之间的关系，link元素位于文档的头部
  • link元素里必须包括两个属性:
    • rel="stylesheet"定义被链接的文档与当前文档的关系；
    • href="url"提供.css文件的位置。
  • 可以用多个link元素链接不同的样式表，都会发挥作用，如果有冲突，根据规则的顺序和层叠关系决定谁生效。
• 使用@import导入
  • @import at-rule规则是添加样式表的另一种方式，无论是在外部的.css样式表文档中，还是在style元素中。
  • 必须在样式表的开始处出现，并在所有选择器之前。
  • 可以导入多个样式表，都会发挥作用，但后面文件的样式规则优先于前面的规则
  • 还可以使用媒体查询将样式表的导入限制为特定的媒体类型或查看环境。媒体查询出现在@import规则之后，以逗号分隔的列表中。如下：
    • @import url(print_style.css) print;只有在文档打印的时候被导入和使用
    • @import url(small_device.css) screen and (max-width:320px;);为小型设备提供一个特殊的样式表
  • 还可以提供不带url()符号的URL，如@import "/path/style.css"

5.2. 嵌入样式表

位于HTML文档中，使用style元素，只对该文档有效。必须位于head元素中。

5.3. 内联样式

使用元素本身的style属性，在单个元素上应用属性/值对，多个属性用分号隔开，尽量不用内联样式，除非必须覆盖嵌入样式表或外部样式表中的样式。

6. 样式冲突

层叠，当多个样式信息源争夺页面上元素的控制权时所发生的情况。权重是基于样式规则源的优先级、选择器的特异性和规则顺序来考虑的。

6.1. 信息源的优先级

当没有应用任何样式信息到网页时，将根据浏览器内部样式表显示，称为默认显示，也叫用户代理样式表。个人用户可以提供自己的样式，称为用户样式表/读者样式表，会覆盖浏览器默认值。如果作者为文档提供了样式表，也叫作者样式表，就会覆盖用户和用户代理样式。但当使用者将样式标识为“重要”，则会覆盖所有竞争样式，这使得用户可以保留设置以适应残疾的情况。优先级从高到低的样式信息源列表如下：

• 任何被读者（用户）标记为！important的样式规则
• 任何被作者标记为！important的样式规则
• 作者编写的样式表
• 读者（用户）创建的样式表
• 浏览器的默认样式规则（用户代理样式表）

6.2. 选择器的特异性

当单个样式表中的两个规则发生冲突时，将使用选择器类型来确定获胜者。为了计算特异性，首先画3个[] [] []；现在计算选择器中ID数量，结果放在第一个方框中；接下来，计算选择器中类和伪类数量，结果放在第二个框中；计算元素名称数量，结果放在第三个框中。对特异性进行逐框比较，第一个不是平局的方框决定哪个选择器胜出。优先级特异性从大到小：

• 带有style属性的内联样式
• ID选择器
• 类选择器
• 独立元素选择器

6.3. 规则顺序

层叠遵循“最后赢家”的规则，在样式表中，如果相同权重的样式规则冲突，那么最后出现的规则是最终的规则。

7. 分配重要性

如果不想规则被后来的冲突规则覆盖，那么就在属性值之后、分号之前添加一个!important指示器。即使浏览器在文档后面遇到内联样式，规则也不会被覆盖，因为带有!important指示器的规则不能被作者的样式表的其他规则覆盖。覆盖这个规则的唯一方法是，使用读者（用户）样式表中也被标记为!important的冲突规则。要注意：最佳实践表明，应该谨慎地使用!important。

8. CSS3

CSS3不同于之前的版本，它被分成了若干个单模块，每个模块都有其相应的属性，如动画、多列布局和边界。虽然一些模块正处于标准化进程中，但其他的仍属于实验性的，这样，浏览器开发人员就能够开始逐一使用属性，而不是等待整个规范是否“ready”。现在每个CSS模块都在自己的轨道上，每个模块都有自己的级别号，没有更大的、包罗万象的CSS版本。

9. 对备份使用规则顺序

一些新的属性不被所有浏览器支持，不过浏览器有一个内置行为---忽略它们不理解的任何声明。因此我们可以策略性的使用规则顺序：将广泛支持的属性作为备份放在前面，新的可能不被支持的属性放在最后。这样，不支持的浏览器就会忽略新属性、使用旧属性，支持的浏览器会使用新属性，因为它在最后。

10. CSS计量单位

10.1. 绝对单位

具有预定义的含义或现实世界中的等价物，除了px，其他不适合出现在Web页面

• px 像素，在CSS3中定义为等于1/96英寸
• in 英寸
• mm 毫米
• cm 厘米
• q 1/4毫米
• pt 点，1/72英寸，是印刷设计中常用单位
• pc 12点，1/6英寸，印刷设计中常用单位

10.2. 相对单位

子元素不继承父元素的相对值，而是继承结果的计算值；IE9支持vm而不是vmin，2017年及以前所有版本的IE和Edge不支持vmax）

• em 与当前字体大小相等，基于文本大小的计量有助于在调整文本大小时保持所有内容的比例
• ex 大约是自体中小写“x”的高度
• rem 等于根元素（html）的em大小，根元素字体大小默认是16px
• ch 0宽度，等于当前字体和大小中0的宽度
• vw 等于当前视窗（浏览器窗口）宽度的1/100
• vh 等于当前视窗高度的1/100
• vmin 等于vw或vh的值，以较小的为准
• vmax 等于vw或vh的值，以较大的为准

第12章 格式化文本

1. 基本字体属性

1.1. font-family

• 属性值：一个或多个用逗号隔开的字体名称或通用字体库名称。
  • 所有的字体名称，除了通用字体库，首字母必须大写；
  • 用空格隔开字母的字体名称必须放在引号内；
  • 通用字体库名在样式规则中不用大写
  • 五个通用字体库：
    • serif 某些字母最后的笔画带有装饰性的衬线或平板状的附加部分
    • sans-serif 字体中字母笔画平直，在最后没有衬线
    • monospace 也称为恒宽字体，一行中的所有字母占用同样大小的空间
    • cursive 模仿手写外观
    • fantasy 纯粹是装饰性的，适用于标题和其他显示类型
• 默认值：依赖于浏览器
• 适用对象：所有元素
• 是否可继承：是

1.2. font-size

• 属性值：长度单位｜百分比｜xx-small｜x-small｜small｜medium｜large｜x-large｜xx-large｜smaller｜larger
  • 百分比在元素继承的基础上增大和减小尺寸
  • 使用相对关键字（smaller｜larger）来调整文字尺寸，使之比周围文字更大或更小，用于对照父元素文本的字体尺寸来调整字体尺寸
  • 为了保持浏览器的默认大小，将root元素的字体大小设置为100%html{font-size:100%;}
  • 使用em指定字体大小时，是相对于该元素的继承大小，在使用em时，请密切注意并以考虑上下文的方式编写样式规则
• 默认值：medium
• 适用对象：所有元素
• 是否可继承：是

1.3. font-weight 字重（粗细）

• 属性值：normal｜bold｜bolder｜lighter｜100｜200｜300｜400｜500｜600｜700｜800｜900
  • 600及以上的数值通常表示粗体
• 默认值：normal
• 适用对象：所有元素
• 是否可继承：是

1.4. font-style 字体样式（斜体）

• 属性值：normal｜italic｜oblique
  • 浏览器通常显示的oblique和italic完全相同，斜体显示
• 默认值：normal
• 适用对象：所有元素
• 是否可继承：是

1.5. font-variant 字体变量（小型的大写字母），同时该属性升级为CSS3中所有以font-variant-开头的所有属性的快捷属性

• 属性值：normal｜small-caps
• 默认值：normal
• 适用对象：所有元素
• 是否可继承：是

1.6. font 字体快捷属性

• 属性值：font-style font-weight font-variant font-stretch font-size/line-height font-family｜caption｜icon｜menu｜message-box｜small-caption｜status-bar
  • 使用font等快捷属性时要小心，任何省略的属性都将重置为其默认值
  • 只有CSS2.1版本的font-variant（small caps）可以在font快捷方式中使用
  • 这个属性中属性值的顺序很重要，按顺序，font属性至少应包括font-size属性和font-family属性值。遗漏一个或者放错顺序将导致整个规则失效
  • 其他属性值是可选的，而且可以出现在font-size属性值前面的任何位置。若省略则其值将会设置为normal状态
  • 系统字体关键字（caption｜icon｜menu｜message-box｜small-caption｜status-bar），它们表示系统字体，即操作系统用于图标和菜单项的标签等内容的字体。这些值被认为是shorthand值，因为一个关键字封装了用于每个用途的字体、大小、样式和字重
• 默认值：依赖列表中每个属性的默认值
• 适用对象：所有元素
• 是否可继承：是

2. CSS字体模块第3级新添加的属性，浏览器的支持不一致

2.1. font-stretch 字体拉伸（压缩和扩展

告诉浏览器在字体族中选择一种普通的、压缩的或扩展的字体

• 属性值：normal｜ultra-condensed｜extra-condensed｜condensed｜semi-condensed｜semi-expanded｜expanded｜extra-expanded｜ultra-expanded
• 默认值：noraml
• 适用对象：所有元素
• 是否可继承：是

2.2. font-variant-ligatures 字体变量连字

2.3. font-variant-position 字体变量位置

2.4. font-variant-caps 字体变量大写

2.5. font-variant-numeric 字体变量数字

2.6. font-variant-alternates 字体变量替换

2.7. font-variant-east-asian 东亚字体变体

2.8. font-size-adjust 字体大小调整

2.9. font-kerning 字体间距

2.10. font-feature-settings 字体特性设置

2.11. font-language-override 字体语言覆盖

3. 免费可用于商业目的的开放字体源

fontsquirrel.com

4. 字体嵌入式服务器

• 谷歌网络字体（免费） www.google.com/webfonts
• Adobe中的Typekit www.typekit.com
• fonts.com
• Cloud Typography www.typography.com/cloud/welco…
• Typotheque www.typotheque.com/fonts
• Fonts Live www.fontslive.com
• Fontstand（按月租用字体） fontstand.com/

5. 改变文本颜色

5.1. color

用来改变元素的前景颜色，前景由元素包含的文本和边框组成

• 属性值：颜色值（名称或数字表示）
  • CSS2.1定义了17个标准颜色名称：black、white、purple、lime、navy、aqua、silver、maroon、fuchsia、olive、blue、orange、gray、red、green、yellow、teal
  • CSS Color Module Level 3 颜色示例 learningwebdesign.com/colornames.…
• 默认值：依赖于浏览器与用户习惯
• 适用对象：所有元素
• 是否可继承：是

6. 文本行设置

6.1. line-height 行高，定义了文本中基线之间的最小距离

• 属性值：数值｜长度｜百分比｜normal
  • 当指定单独一个数字时，数字作为与当前字体尺寸相乘的比例因子，用来计算line-height的值
  • 行高也可以用CSS长度单位指定，em和百分比都是基于当前字体的尺寸
  • 使用比例因子（数值）和相对值（em或%）的区别在于它们如何继承。使用数值，则其后代继承乘数；使用相对值，则其后代继承根据当前元素字体大小计算出来的值
• 默认值：normal
• 适用对象：所有元素
• 是否可继承：是

6.2. text-indent 文本缩进，只缩进块的第一行

• 属性值：长度计量｜百分比
  • 百分比值是根据父元素的宽度计算的，作为百分比值（不是计算值）传递给其后代元素
  • 指定一个负值，会导致文本的第一行左边缘挂出（也称为挂起缩进）
• 默认值：0
• 适用对象：块容器
• 是否可继承：是

6.3. text-align 水平文本对齐

• 属性值：left｜right｜center｜justify｜start｜end
  • 文本左边对齐｜文本右边对齐｜位于文本块的中间｜与左右边都对齐
  • CSS3添加的start和end值，指定文本应该对齐的行框的一侧，适用于垂直书写和从右向左书写的语言
• 默认值：start
• 适用对象：块容器
• 是否可继承：是
• CSS3定义的两个与文本对齐相关的新属性：
  • text-align-last 用于对齐最后一行文本
  • text-justify 用于更精细地控制如何在对齐文本中插入空格

6.4. text-decoration 下划线和其他“修饰”

• 属性值：none｜underline｜overline｜line-through｜blink
• 默认值：none
• 适用对象：所有元素
• 是否可继承：否，但因为所画的线也会通过子元素，所以它们看起来也被“修饰”了

CSS3文本模块包括对textdecoration的增强：

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-skip
• text-underline-position

6.5. text-transform 改变字母大小写

• 属性值：none｜capitalize｜lowercase｜uppercase｜full-width
  • 与源代码一样｜每个单词首字母大写｜所有字母小写｜所有字母大写｜如果字符存在，则选择字符的“全宽”版本
• 默认值：none
• 适用对象：所有对象
• 是否可继承：是

6.6. letter-spacing 在字母之间插入空格

• 属性值：长度计量｜normal
  • 当指定一个em计量值，这个计算后的值会传递给子元素，即使子元素尺寸小于父元素
• 默认值：normal
• 适用对象：所有对象
• 是否可继承：是

6.7. word-spacing 在单词之间插入空格

• 属性值：长度计量｜normal
  • 当指定一个em计量值，这个计算后的值会传递给子元素，即使子元素尺寸小于父元素
• 默认值：normal
• 适用对象：所有元素
• 是否可继承：是

6.8. text-shadow 文本阴影

• 属性值：“水平移动” “垂直移动” “模糊半径” “颜色”｜none
  • 第一个和第二个数量值为负时，阴影会向左向上移动，颜色属性被遗漏的话，阴影颜色与整个文本相同
  • 可以对同一元素应用多个文本阴影，如果改变位置和模糊量，可以给文本的外观多个光源
• 默认值：none
• 适用对象：所有对象
• 是否可继承：是

6.9. white-space 指定布局中空格的处理方法

pre表示空字符与源码中保持一致

6.10. vertical-align

指定一个内嵌元素的基线在垂直方向与周围文本的基线对齐，同样适用于给单元格（td）设定内容的垂直对齐方式

6.11. word-break（CSS3）如何在单词中计算文本换行

6.12. line-break（CSS3）如何在行中计算文本换行

6.13. text-justify（CSS3）

指定当text-algin为justify时，单词内部和单词之间添加空格的方式

6.14. text-align-last（CSS3）

指定当text-algin为justify时，文本块的最后一行应该如何对齐，通常最好让最后一行左对齐

6.15. tab-size（CSS3）

指定制表符的长度，以字符数或长度值表示

6.16. hyphens（CSS3）控制文本的连字方式。

• manual表示只有在源文件中添加了连字符时才会进行连接；
• auto将控制权交给浏览器；
• none则完全关闭连字符

6.17. overflow-wrap（CSS3）

指定浏览器是否允许断开文字以适应其边框内的文本

6.18. hanging-punctuation（CSS3）

确定标点符号是否可以位于行首或行尾元素的行框之外。

6.19. direction （CSS3）

指定文本的阅读方向，但不应该使用，而应该使用HTML的dir属性

• ltr 从左到右
• rtl 从右到左

6.20. unicode-bidi 与unicode的双向性有关

7. 改变列表的数字编号

7.1. list-style-type 选择出现在每个列表项之前的标记类型

• 属性：none｜disc｜circle｜square｜decimal｜decimal-leading-zero｜lower-alpha｜upper-alpha｜lower-latin｜upper-latin｜lower-roman｜upper-roman｜lower-greek
• 默认值：disc
• 适用对象：ul、ol和li（或显示值为list-item的元素）
• 是否可继承：是

7.2. list-style-position 标记位置

• 属性值：inside｜outside｜hanging（CSS3新增）
• 默认值：outside
• 适用对象：ul、ol、li（或显示值为list-item的元素）
• 是否可继承：是

显示值为list-item的元素

是对于任何HTML元素或其他XML语言中的元素，通过将其display属性设置为list-item执行类似于列表项的操作display:list-item;

7.3. list-style-image

可以将自己的图像作为编号；注意将list-style-type设置为disc作为备份，以防图像不显示或属性不被浏览器或其他用户设备所支持

• 属性值：url(location)｜none
• 默认值：none
• 适用对象：ul、ol、li（或显示值为list-item的元素）
• 是否可继承：是

7.4. list-style 快捷属性，以任意顺序组合类型、位置和图像的值

第13章 颜色和背景

1. 在样式表中写RGB值

• 数字的形式 color:rgb(200,178,230)
• 百分比值 color:rgb(78%,70%,90%)
• 十六进制数字 color:#C8B2E6，如果恰好是三对两位数字，可以将每对数缩成一个color:#FC0代表color:#FFCC00
• 增加透明值 color:rgba(0,0,0,.5) 第4个值代表alpha透明度，值从0（完全透明）到1（完全不透明）
• CSS3引入了HSL值 color:hsl(265,51%,81%)，HSL颜色表的相关网站：
  • hslpicker.com/
  • www.workwithcolor.com/hsl-color-p…
• 增加透明值 color: hsla(70, 60%, 58%, .65)

2. 颜色属性

2.1. color 前景色，包括文本和边框

2.2. background-color 背景色

背景色填充元素后面的背景，包括内容区域、内容周围的任意区域，并且一直扩展到边框的外边缘

• 属性值：颜色值（名称或数字）｜transparent
• 默认值：transparent
• 适用对象：所有元素
• 是否可继承：否

2.3. background-clip 裁剪背景

• 属性值：border-box｜padding-box｜content-box
• 默认值：border-box
• 适用对象：所有元素
• 是否可继承：否

2.4. opacity

使用不透明度，使一种元素（同时包括前景和背景）轻微透明

• 属性值：数字（0～1）
  • IE8及更早版本不支持该属性，可以使用带有Microsoft专有的filter属性，然后用opacity规则覆盖它{filter:alpha(opacity=50);opacity:.5;}
• 默认值：1
• 适用对象：所有元素
• 是否可继承：否

3. 背景图像

如果同时提供background-color和background-image属性，那么图像就贴在颜色上面。建议提供一个与背景色调类似的备份颜色，在图像下载失败时使用

3.1. background-image 给元素添加背景图像

• 属性值：url(图像的位置)｜none
• 默认值：none
• 适用对象：所有对象
• 是否可继承：否

3.2. background-color

3.3. background-repeat

• 属性值：repeat｜no-repeat｜repeat-x｜repeat-y｜space｜round
  • 自动拼贴｜关闭自动拼贴｜沿水平方向拼贴｜沿垂直方向拼贴
  • space，浏览器会计算背景区域的宽高可以容纳多少个背景图像，然后在每个图像之间添加等量的空间，结果是行、列都是偶数，且内有剪切图像
  • round，使浏览器水平和垂直的挤压背景图像（不一定是成比例的），以适应偶数倍的背景区域
• 默认值：repeat

3.4. background-position

提供水平和垂直两个方向的值来描述原图的位置

• 属性值：长度计量｜百分比｜left｜center｜right｜top｜bottom
  • 关键字定位法：默认的原图位置相当于left top，关键字成对出现，关键字可以以任何顺序出现，如果只提供一个关键字，遗失的关键字会假定为center，如下：
    • left bottom
    • right (center)
  • 长度计量法(如px或em):指定位置表示从元素的左上角到背景原图的左上角的偏移量，水平计量通常在前；负值是允许的
  • 百分比值法：以水平/垂直成对的方式提供，0% 0%对应左上角，100% 100%对应右下角。需要注意的是，百分比值同时适用于画布区域和图像本身，25%的水平值将该点定位在距离图像左边缘25%的位置上，该点距离背景定位区域的左边缘25%。100%的垂直值将图像的底边定位在定位区域的底边。如果只提供一个百分比，那么另一个百分比将假定为50%（居中）
  • 背景边缘偏移量：edge-keyword offset edge-keyword offset；如right 50px bottom 50px
• 默认值：0% 0%（同left top）
• 适用对象：所有元素
• 是否可继承：否

3.5. background-origin

定义背景定位区域的边界。当原图被放在元素的一角时，它被放置在边框内；只有重复的图像从边框下延伸到其外边缘。指定background-position如何计算

• 属性值：border-box｜padding-box｜content-box
• 默认值：padding-box
• 适用对象：所有元素
• 是否可继承：否

3.6. background-clip 定义背景绘画区域的边界

3.7. background-attachment

将背景从内容中解脱出来，当选择图像固定时，它留在浏览器视域的同一个位置

• 属性值：scroll｜fixed｜local
• 默认值：scroll
• 适用对象：所有元素
• 是否可继承：否

3.8. background-size 可以更改背景图像的大小

• 属性值：长度｜百分比｜auto｜cover｜contain
  • 长度单位（px或em）：通常第一个值用作水平计量，如果只提供一个值，则将其用作水平计量，垂直值被设置为auto
  • 百分比：根据背景定位区域计算的，50%水平值代表将图像宽度设置为定位区域宽度的50%。可以混合百分比和长度值；注意：放大位图时可能会出现模糊和像素化
  • auto关键字可以在任何方向调整图像大小以保持其比例，具有固定比例的图像，如位图会始终保持比例，而没有固定比例的图像，如SVG和CSS斜率，auto将宽度或高度设置为背景定位区域宽度或高度的100%
  • cover，浏览器会调整背景图像大小，使其足以覆盖背景定位区域的所有边，将只有一个图像，如果图像和定位区域不匹配，图像的部分可能落在定位区域之外
  • contain，图像大小刚好足以填充定位区域的宽度或高度（取决于图像的比例），整个图像是可见的，并“包含”在背景区域内，如果有剩余空间，背景图像将重复。
• 默认值：auto
• 适用对象：所有元素
• 是否可继承：否

3.9. background 快捷背景属性

• 属性值：bgacground-color background-image background-repeat background-attachment background-position background-clip background-origin background-size
  • 所有属性值都是可选的，可以以任何顺序出现
  • 当用坐标值表示backgroun-position属性时，横坐标在前纵坐标在后
• 默认值：参见独立属性
• 适用对象：所有元素
• 是否可继承：否

CSS3引入了将多个背景图像应用到单个元素的能力，为background-image应用多个值，以逗号分隔的列表；其他背景相关属性值也是逗号分隔的列表，列出的第一个值适用于第一个图像，第二个值适用于第二个图像，以此类推。最后一个列出的图像在底部，第一个在顶部。或者使用background快捷属性，以逗号分隔。

4. 渐变

是浏览器动态生成的图像，性能提示：

• 优点：不需要对服务器进行额外调用，下载所需的字节也比图像少；
• 缺点：所有动态呈现都需要时间和处理能力，可能会影响性能，径向渐变最成问题，尤其在移动设备上，可以考虑为移动设备提供一个单独的没有渐变的样式表

4.1. 线性渐变

沿着一条线改变颜色，从该元素的一个边缘到另一个边缘

linear-gradient()

• 提供了线的角度：
  • 角度描述：0deg表示向上，90deg表示向右，180deg表示向下
  • 关键词描述：
    • 上下左右：to top、to bottom、to left、to right
    • 四个角落：to top right、to top left、to bottom right、to bottom left
• 以及沿着纯色所在线的一个或多个点的起止色位置（color stop）
  • 可以有多组颜色值，用逗号分隔每组；组中颜色值在前，起止色位置在后；起止色位置可以使用百分比或任何长度计量，第一个和最后一个起止色不需要位置，默认为0%和100%

4.2. 径向渐变：在一个点开始，呈向外扩散的圆形或椭圆形

radial-gradient()

• 至少需要两个起止色位置
• 默认情况下，渐变填充可用的背景区域，其中心位于元素的中心，如果包含的元素是矩形，则结果是一个椭圆；如果元素是正方形，则结果为圆形
• 允许指定渐变的形状、大小和中心位置
  • 形状
    • circle，即使它位于矩形元素中，仍然会保持圆形
    • ellipse
  • 大小
    • 长度单位
      • 如果只提供一个长度，则它用于宽度和高度，从而形成一个圆
      • 当提供两个长度时，第一个是水平计量，第二个是垂直计量
    • 百分比，与长度单位类似，也可以将百分比与长度值混合使用
    • 关键字：可用于设置渐变射线相对于包含的元素上的点的长度
      • closest-side、closest-corner、farthest-side、farthest-corner
  • 位置 默认是at center center
    • 和background-position属性中介绍的定位语法相同，但应该在前面加上at关键字

4.3. 重复渐变

语法与单个渐变相同，但会导致图案在两个方向上无限重复起止色位置

• repeating-linear-gradient()
• repeating-radial-gradient()

4.4. 设计渐变网站

• www.colorzilla.com/gradient-ed…
• www.virtuosoft.eu/tools/css-g…
• CSS模式图库中使用渐变制作的野生背景模式 projects.verou.me/css3pattern…

5. 浏览器供应商前缀

• 允许开发人员开始在支持它们的浏览器上使用新的CSS特性。
• 如果使用其中一种CSS预处理器语法，可以利用它们的前缀mixin来解决；如果使用标准语法编写CSS，则可以在完成后通过后处理器（如Autoprefixer）运行它，Autoprefixer解析样式，然后自动为需要的属性和符号添加前缀

前缀	组织	最流行的浏览器
-ms-	Microsoft	Internet Explorer
-moz-	Mozilla Foundation	Firefox、Camino、SeaMonkey
-o-	Opera Software	Opera、Opear Mini、Opera Mobile
-webkit-	最初的Apple，现在开源	Safari、Chrome、Android、Silk、BlackBerry、WebOS等

第14章 盒子思想

1. 指定盒子尺寸

1.1. width 不适用于内联文本（非替换）元素，会被浏览器忽略

• 属性值：长度｜百分比｜auto
• 默认值：auto
• 适用对象：块级元素和可替代内联元素（如图像）
• 是否可继承：否

1.2. height 不适用于内联文本（非替换）元素，会被浏览器忽略

• 属性值：长度｜百分比｜auto
• 默认值：auto
• 适用对象：块级元素和可替代内联元素（如图像）
• 是否可继承：否

1.3. max-height、max-width、min-height、min-width

• 属性值：长度｜百分比｜none
• 适用对象：块级元素和可替换的内联元素（如图像）
• 当使用content-box时，该值仅应用于内容区域，padding、border、margin会使整个元素框变大
• 避免把max-、min-及宽度和高度与border-box模型一起使用，会导致浏览器问题

2. box-sizing

• 属性值：content-box｜border-box
  • 事实上，许多开发人员通过在根元素上设置boeder-box，然后将所有其他元素设置为继承来简单的设置文档中的所有内容。html{box-sizing:border-box; *,*:before,*:after{box-sizing:inherit;}}
• 默认值：content-box
• 适用对象：所有元素
• 是否可继承：否

3. overflow 处理内容溢出问题

• 属性值：visible｜hidden｜scroll｜auto
  • 内容全部可见｜内容区域边缘外的内容被忽略｜添加滚动条到元素盒子中，内容可滚动｜允许浏览器决定如何处理溢出，一般情况下，之后内容超出时才添加滚动条
• 默认值：visible
• 适用对象：块级元素和可替换的内联元素（如图像）
• 是否可继承：否

4. 填充 padding

4.1. padding-top、padding-right、padding-bottom、padding-left

• 属性值：长度计量｜百分比
  • 长度单位一般是em或px
  • 百分比是参考父元素的宽度，即便对于上下填充也是参考父元素的宽度
• 默认值：0
• 适用对象：所有对象
• 是否可继承：否

4.2. padding 填充快捷属性

• 属性值：长度计量｜百分比
  • 四个值：padding: top right bottom left;
  • 三个值：padding: top right/left bottom;
  • 两个值：padding: top/bottom right/left;
  • 一个值：padding: top/right/bottom/left
• 默认值：0
• 适用对象：所有对象
• 是否可继承：否

5. 边框 border

5.1. border-top-style、border-right-style、border-bottom-style、border-left-style

• 属性值：none｜solid｜hidden｜dotted｜dashed｜double｜groove｜ridge｜inset｜outset
  • hidden的值等于none
  • 如果没有指定宽度，将使用默认的中等宽度
  • 如果没有指定颜色，将使用元素的前景色（同文本）
• 默认值：none
• 适用对象：所有元素
• 是否可继承：否

5.2. border-style 边框样式，上右下左四个值

必须声明边框样式，否则其他的边框属性都会被忽略

5.3. border-top-width、border-right-width、border-bottom-width、border-left-width

• 属性值：长度｜thin｜medium｜thick
• 默认值：medium
• 适用对象：所有元素
• 是否可继承：否

5.4. border-width 边框宽度（厚度）

5.5. border-top-color、border-right-color、border-bottom-color、border-left-color

• 属性值：颜色名或RGB/HSL值｜transparent
• 默认值：元素的color属性
• 适用对象：所有元素
• 是否可继承：否

5.6. border-color 边框颜色

• 指定边框颜色时，将覆盖color属性设置的元素的前景色
• 将边框颜色设置为transparent允许背景穿过边框显示，但保留指定的边框宽度

5.7. border-top、border-right、border-bottom、border-left

- 属性值：border-style border-width border-color
- 默认值：每个属性的默认值
- 适用对象：所有元素
- 是否可继承：否

5.8. border 联合使用样式、宽度和颜色

• 可以包括任何顺序的样式、宽度和颜色的值，不需要声明所有的三个值，但如果遗漏了border-style，就不会显示边框
• 与其他快捷属性工作方式不同，有一个值集，并总是应用到元素的四个方向

5.9. border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

• 属性值：长度｜百分比
  • 单个值：圆角
  • 两个值：椭圆角，第一个值是水平半径，第二个是垂直半径
• 默认值：0
• 适用对象：所有元素
• 是否可继承：否

5.10. border-radius 提供圆角

• 属性值：长度｜百分比（顺时针方向）
  • 1个值：应用于四个角
  • 2个值：top-left/bottom-right top-right/bottom-left
  • 3个值：top-left top-right/bottom-left bottom-right
  • 4个值：top-left top-right bottom-right bottom-left
  • 椭圆角：（中间要用/分隔，否则会被误认为是圆角的值）
    • 水平半径/垂直半径（4个角水平垂直半径相同）
    • /分隔四个角的水平和垂直半径（可以为四个角设置不同的水平、垂直半径）：top-left top-right bottom-right bottom-left/top-left top-right bottom-right bottom-left

6. 轮廓 outline

轮廓看起来像边框，语法一样，但有一个重要区别：轮廓不会以元素盒子的宽度计算，是在边框的外边绘制，并与margin重叠。因为轮廓不会影响布局，所以它们是检查设计的好工具。注意：不能为元素盒子的特定边指定轮廓（要么全部要么没有）

6.1. outline-style 轮廓样式

• 属性值：auto｜solid｜none｜dotted｜dashed｜double｜groove｜ridge｜inset｜outset
  • 只是相比border-style增加了auto，让浏览器选择样式；此外，不能将outline-style设置为hidden
• 默认值：none

6.2. outline-width 轮廓宽度

• 属性值：长度｜thin｜medium｜thick
• 默认值：medium

6.3. outline-color 轮廓颜色

• 属性值：颜色名或RGB/HSL值｜invert
• 默认值：invert（背景颜色的相反值，但几乎没有浏览器支持）

6.4. outline-offset 轮廓偏移，移动轮廓到边框外的指定长度

• 属性值：长度
• 默认值：0

6.5. outline

• 属性值：outline-style outline-width outline-color
• 默认值：单个属性的默认值

7. 图片边框，可以用自己选择的图像填充边框盒子的边和角

• border-image-source 图像的位置
• border-image-slice 使用偏移量将图像分成9个部分
• border-image-width 指定边框区域的宽度
• border-image-repeat 指定图像应该沿边拉伸还是重复
• border-image-outset 将边框与内容推开指定的距离
• border-image: source slice/width/outset repeat; 快捷属性

8. 空白边 margin

8.1. margin-top、margin-right、margin-bottom、margin-left

• 属性值：长度｜百分比｜auto
  • 长度单位一般是em或px
  • 百分比是参考父元素的宽度，即便对于上下填充也是参考父元素的宽度
  • auto允许浏览器使用一定量的空白边来适应或填满可用的空间
• 默认值：auto
• 适用对象：所有对象
• 是否可继承：否

8.2. margin 空白边快捷属性

• 属性值：上右下左顺时针
  • 将固定大小的元素的左右两侧的margin设置为auto，会使元素在其容器中居中
• 空白边的行为
  • 上下空白边会与邻近元素的重叠，相邻的空白边重叠，只使用最大值
  • 上下空白边不重叠的只能是浮动或定位的元素
  • 左右方向的空白边不会重叠
  • 可以应用上下空白边到内联文本（不可替换）元素，但不会在元素上下添加垂直空间，也不会改变行高。
  • 应用左右空白边到内联文本元素时，在文本流中空白空间会在文本前后清晰出现，即使元素分布在很多行也是如此
  • 可替换元素的空白边会出现在所有方向上，因此会影响行高
  • 指定负数给空白边时，内容、填充和边框向相反的方向移动。

9. 分配显示类型 display

display 定义了元素在布局中生成的元素盒子的类型

• 属性值：inline｜block｜run-in｜flex｜grid｜flow｜flow-root｜list-item｜table｜table-row-group｜table-header-group｜table-footer-group｜table-row｜table-cell｜table-column-group｜table- column｜table-caption｜ruby｜ruby-base｜ruby-text｜ruby-base-container｜ruby-text-container｜inline-block｜inline-table｜inline-flex｜inline-grid｜contents｜none
  • list-item：列表项
  • table相关：表格的不同部分
  • ruby相关：用于东亚语言的ruby注释的值
  • 注意：使用CSS的display属性更改HTML元素的展示不会更改该元素在HTML中作为块级或内联的定义，将块级元素放在内联元素中总是无效的
  • 我们往往会使li元素显示为内联元素，这样可以将列表装入水平导航条中
  • 也可以使内嵌元素a显示为块元素从而可以指定宽和高
  • none，从普通流实体中移除内容，其所占据的空间也将关闭。但display设置为none的内容仍然会随文档一起下载，不会减少数据使用或下载时间
• 默认值：inline
• 适用对象：所有元素
• 是否可继承：是

10. 盒子阴影

box-shadow

• 属性值：“水平偏移量” “垂直偏移量” “模糊距离” “扩散距离” 色彩 inset｜none
  • 扩散值spread可以增加阴影的尺寸，使用负值可以缩小阴影的尺寸
  • 通常情况下，阴影颜色与元素的前景色相同，指定色彩会覆盖前景色
  • 警告⚠️：盒子阴影、文本阴影和渐变需要大量的处理能力，用得越多，性能就会越慢。
  • 盒子阴影总是应用于元素边框的外部，即使元素有半透明背景，在元素后面的区域也看不到盒子阴影
  • 通过添加inset关键字，可以使阴影显示在可视元素盒子的内部
  • 可以通过提供逗号分隔的值列表对一个元素指定多个盒子阴影，第一个值的阴影出现在最上面，其他的按顺序排在下面
• 默认值：none
• 适用对象：所有元素
• 是否可继承：否

第15章 浮动与定位

1. 普通流

• 在CSS布局模式中，元素依源代码中的顺序从上到下排列，在从左到右阅读的语言中从左到右。块元素一个接一个，填满浏览器窗口元素的所有可用宽度，内联元素和文本字符一行接一行地填满块元素。
• 当窗口或窗口元素重置大小的时候，块元素随着新宽度增大或缩小，内嵌元素内容会重新流动起来适应宽度。
• 普通流中的对象影响他们周围对象的布局（元素不交叠扎堆，他们互让空间）。

2. 浮动

简单的说，float属性尽可能远地向左或向右移动元素，允许后面的内容环绕它。

float

• 属性值：left｜right｜none
• 默认值：none
• 适用对象：所有元素
• 是否可继承：否
• 浮动元素的关键行为
  • 浮动元素像水流中的岛。它从普通流的位置中移除，同时继续影响周围元素。
  • 浮动元素位于“包含元素”的内容区域，不能扩展到其“包含元素”的填充区域
  • 包括margin，都在一起浮动
  • 浮动内联文本（不可替换）元素，必须指定浮动文本元素的宽度，否则其盒子的宽度将变得足够大以容纳其内容（auto）
  • 浮动内联元素表现为块元素，四个方向的margin都会呈现出来
  • 浮动元素的margin不会重叠（相邻上下margin不重叠）
  • 浮动块元素，必须提供浮动块元素的宽度，否则宽度为auto，会填满浏览器窗口或包含元素的所有宽度
  • 浮动元素不会高过其在源码中的参照物，意味着它不会上浮到网页的上角，如果希望从网页最上面开始，那么必须在源码中最先出现
  • 非浮动元素保持普通流，元素盒子仍然扩展了普通流的全部宽度，只有这些元素的内容环绕在浮动元素的周围。因此如果希望在浮动元素和环绕的文本之间留空白，则需要将margin应用于浮动元素本身。

3. 清除浮动元素

清除想要从浮动元素下面开始排列的元素，防止该元素紧接着浮动元素出现，强制它从浮动元素下面的“清除”空间开始

clear

• 属性值：left｜right｜both｜none
  • left使元素清除所包含块左边的所有浮动元素，right清除右边浮动元素，both清除两边的浮动元素
• 默认值：none
• 适用对象：仅块级元素
• 是否可继承：否

4. 浮动多个元素

当一系列连续元素浮动到相同方向时，元素从左依次排列，当空间不足以放下一个浮动元素时，会移到下方并向左移动直至碰壁（可能是浏览器窗口边缘），但如果前面其中一个元素很长，则向上撞到长浮动元素的边缘，而不是浏览器窗口边缘。之后的普通流中的下一个元素从它所能找到的最高点开始换行。

5. 包含浮动

• 默认情况下，浮动元素可以浮出包含它的元素。
• 如果容器中的所有元素都浮动，则流中没有元素可以撑开容器元素，解决这个问题的方式：

5.1. clearfix

• 使用:after伪元素在容器内容后面插入字符空间，将其显示设置为“block”，并在两侧清除它#container:after{content:""; display:"block"; clear:"both";}
• clearfix的未来：新的display的值flow-root可能会使clearfix hack彻底过时。容器元素的display值设置为flow-root将使元素自动展开以包含它的浮动。但目前仍处于实验阶段，一个潜在的缺点是，它禁止元素和它的第一/最后一个子元素之间的margin重叠，可能会产生不可预测的结果。

5.2. 将包含元素也设为浮动的

并将包含元素的宽度设为100%#container{float:left; width:100%;}

6. 用CSS形状进行精美文本环绕---渐进式增强

6.1. shape-outside

允许文本流入浮动的图像或元素中，但不能在浮动元素外部推开文本，即使设置的形状超出了浮动元素范围

• 属性值：none｜circle()｜ellipse()｜polygon()｜url()｜[margin-box｜padding-box｜content-box]
  • 使用circle()、ellipse()、polygon()提供环绕形状的路径坐标
    • circle(radius)：为要环绕的文本创建一个圆形，括号内的值表示圆半径，默认情况下，圆在浮动元素中垂直水平居中
    • ellipse(rx ry at x y)：创建椭圆形状，rx、ry表示水平和垂直半径，at之后的x、y是形状中心的x、y坐标，可以是特定计量值或百分比。
    • polygon(x y, x y, ..., x y)：允许使用路径上一系列以逗号分隔的x、y坐标创建自定义路径
  • 使用url()指定具有透明区域的图像（如GIF或PNG）。文本会流入图像的透明区域，并在不透明区域停止
• 默认值：none
• 适用对象：浮动
• 是否可继承：否

6.2. shape-margin 设置形状和环绕文本之间的空格

• 属性值：长度｜百分比
• 默认值：0
• 适用对象：浮动
• 是否可继承：否

6.3. shape-image-threshold

不透明度阈值，值是一个0～1之间的数字，表示透明度的百分比

• 如果有一个具有多个透明度级别的源图像，例如渐变阴影，该属性允许文本进入图像，但当遇到特定的透明度级别时就会停止。

7. 定位

7.1. position 指定position的属性

一旦确定了定位方法，接下来就需要指定最多四个偏移属性的组合

• 属性值：static｜relative｜absolute｜fixed
  • static 普通的定位方案，元素将与在普通文档流中一样定位
  • relative 将盒子相对于它在流中的原始位置移动，将保留元素在普通流中占据的空间，继续影响周围内容的布局
  • absolute 绝对定位元素从文档中完整地移除，并且相对于视窗或容器元素定位，它所占据的空间将被关闭。对周围元素的布局没有任何影响
  • fixed 固定定位的特性是将待在视窗的一个位置，即使在文档滚动的时候。从文档流中移除，相对于视窗而不是文档中的另一个元素定位
  • sticky 黏性定位是相对和固定的组合，其行为好像它是相对定位的，直到它被滚动到相对于视窗的指定位置，在这一点上保持固定
• 默认值：static
• 适用对象：所有对象
• 是否可继承：否

7.2. top、right、bottom、left

• 属性值：长度｜百分比｜auto
  • auto：浏览器添加足够的空间使布局正常运行
  • 通过给四个方向设置偏移值，就相当于间接设定了定位元素的尺寸（长宽），这仅发生在没有指定宽度和其他盒子属性时，否则，会发生冲突
  • 百分比：相对包含块的长和宽
• 默认值：auto
• 适用对象：可定位元素（元素的position属性值为relative、absolute或fixed）
• 是否可继承：否

7.3. 相对定位

• 文档流中的原始空间被保留。周围的内容就像元素还在那里一样布局，因此认为这个元素仍在“影响”周围内容
• 发生交叠。
• 通常用于为绝对定位元素创建“定位环境”

7.4. 绝对定位

• 当一个元素被绝对定位时，它曾经占据的空间被关闭
• 元素相对于最近的包含块定位
• 绝对定位元素总是表现为块级元素：所有方向的margin都生效，也允许给元素设置宽度

7.5. 堆叠顺序

• 多个定位元素可能会一个接一个地排列
• 默认情况下，元素按照在文档中出现的顺序堆叠
• 但可以使用z-index属性改变堆叠顺序

z-index

• 属性值：数字｜auto
  • 数字可能为正或者负，数字越大，元素显示在这个堆的层就越高
• 默认值：auto
• 适用对象：可定位元素
• 是否可继承：否

7.6. 固定定位

• 大部分情况下，固定定位与绝对定位工作方式相同
• 但固定元素的偏移量总是相对于视窗
• 意味着，即使网页的其他部分滚动，定位元素还保持固定。
• 常用于顶部、底部或侧面的、位置不变的菜单

8. 包含块，有时候称为“定位环境”

• 初始包含块由html元素创建，也就是视窗区域
• 如果定位元素没有包含在另一个定位元素中，那么它将相对于初始包含块确定位置
• 如果元素有一个祖先，且祖先的position属性设置为relative、absolute或fixed，元素将相对于祖先元素的边定位
• 当块元素用作包含块（设置其position属性为relative）时，定位元素相对于padding填充区域边缘而不是content内容区域边缘开始偏移
• 当内联元素用作包含块（设置其position属性为relative）时，定位元素相对于content内容区域边缘而不是padding填充区域边缘开始偏移

第16章 使用Flexbox和网格进行CSS布局

1. Flex 弹性布局

1.1. 优点

• 它允许项目在其容器中拉伸或收缩，防止浪费空间和溢出，使布局适合各种大小的视窗。
• 使所有相邻项目具有相同高度
• 简单的水平和垂直居中
• 改变项目显示顺序的能力，与源代码无关

1.2. 资源

• Flexbox的完整指南：css-tricks.com/snippets/cs…
• Flexbox Froggy：flexboxfroggy.com/
• Flexbox是什么：flexbox.io/
• Flexbox Playground：codepen.io/enxaneta/fu…
• Flexy Boxes：the-echoplex.net/flexyboxes/

1.3. 注意点

• float、clear、多列布局、vertical-align不适用于Flexbox模式下的元素
• 在Flexbox模式中，margin不会重叠。项目的margin放置在轴的起点和终点且不与容器的padding部分重叠，相邻项目的margin相加
• 规范建议避免在项目上设置margin和padding的百分比，因为结果不可预测

1.4. 设置Flexbox容器

• 设置元素的display属性为flex或inline-flex，该元素就称为一个flex容器，它的所有直接子元素都会自动哦称为该容器中的flex项。
  • inline-flex生成一个内联级别的flex容器盒子
  • flex
• 默认Flexbox中项的排列方向与页面所使用的语言方向相匹配

1.5. 控制容器内的“流”

将元素转换为flex容器后，可以在该容器上设置一些属性来控制项目在其中的流动方式。

1.5.1 指定流的方向

row与书写系统的默认方向保持一致，column垂直于书写系统方向，设置的方向成为主轴，与主轴垂直的方向成为侧轴

flex-direction

• 属性值：row｜column｜row-reverse｜column-reverse
• 默认值：row
• 适用对象：flex容器
• 是否可继承：否

1.5.2 换行

当容器中有大量项且不希望它们被压缩到可用空间中，则可以使他们进入其他行

flex-wrap

• 属性值：nowrap｜wrap｜wrap-reverse
  • nowrap：执行压扁操作，不换行
  • wrap：启用从侧轴开始到结束方向上的多行换行功能
  • wrap-reverse：启用从侧轴结束到开始方向上的多行换行功能
• 默认值：nowrap
• 适用对象：flex容器
• 是否可继承：否
• 默认情况下，当flex-direction为column时，容器将展开以包含项的高度，为了看到换行效果，需要为容器设置高度

1.5.3 与flex-flow结合

flex-flow 快捷属性

• 属性值：flex-direction flex-wrap
• 默认值：row nowrap
• 适用对象：flex容器
• 是否可继承：否

1.6. 控制容器中flex项的对齐

1.6.1 主轴对齐（用于容器）

justify-content 定义了如何在项目之间分配额外的空间

• 属性值：flex-start｜flex-end｜center｜space-between｜space-around
• 默认值：flex-start
• 适用对象：flex容器
• 是否可继承：否
• 在计算了项目的margin之后、以及项目被设置为flex的方式之后，才应用justify-content，如果项目的flex值允许它们增长以填充容器宽度，则不适合使用justify-content

1.6.2 侧轴对齐

align-items（用于容器）

• 属性值：flex-start｜flex-end｜center｜baseline｜stretch
  • baseline：对齐各项目中文本的第一行基线，而不考虑它们的大小
• 默认值：stretch
• 适用对象：flex容器
• 是否可继承：否

align-content 仅当侧轴上有多行时（flex-wrap：wrap），需要对齐使用

• 属性值：flex-start｜flex-end｜center｜space-around｜space-between｜stretch
  • baseline：对齐各项目中文本的第一行基线，而不考虑它们的大小
• 默认值：stretch
• 适用对象：多行flex容器
• 是否可继承：否

align-self（用于项目）当想单独为某个项设置不同的横轴对齐方式时使用

• 属性值：flex-start｜flex-end｜center｜baseline｜stretch
• 默认值：stretch
• 适用对象：flex项目
• 是否可继承：否

1.6.3 用margin对齐项目

• 可以使用margin将额外的容器空间放在一个或多个项目的指定边上，从而与其他项目分开
• 各项都有宽度，容器有剩余空间，则项目默认会依次排列在主轴起适位置，通过给某一项设置margin-right：auto，可以让容器剩余空间全部放在该项的右侧
• 但注意，此时justify-content属性不再生效，因为额外空间分配给margin之后不再有额外空间了

1.7. 确定项目如何在容器中伸缩（用于项目）

flex 快捷属性，关注如何在项目中分配空间，根据需要增加或缩小项目以使其适合

• 属性值：none｜"flex-grow flex-shrink flex-basis"｜initial｜auto｜n（整数）
  • initail：相当于flex：0 1 auto
  • auto：相当于flex：1 1 auto
  • none：相当于flex：0 0 auto
  • n：相当于flex：n 1 0px
• 默认值：0 1 auto
• 适用对象：flex项
• 是否可继承：否

flex-grow

• 属性值：number
  • 0：表示“关闭”增长开关，阻止增长
  • 1：表示“打开”增长开关，允许项增长，且当所有项都为1时，它们将均匀分配容器的剩余空间
  • n：该项分配到的容器空间是值为1的n倍
• 默认值：0
• 适用对象：flex项
• 是否可继承：否

flex-shrink

• 属性值：number
  • 1：表示“打开”收缩开关，允许项收缩
  • 0：表示“关闭”收缩开关，阻止收缩
  • n：从项目内部拿走一些空间，根据指定的比例缩小项目到适合的大小
• 默认值：1
• 适用对象：flex项
• 是否可继承：否
• 当flex项达到最小尺寸（由min-width/min-height）时，它们就停止收缩。默认情况下（min-width/min-height为auto时），最小值基于min-content大小

flex-basis

• 属性值：长度｜百分比｜content｜auto
  • auto：表示使用指定的width/height属性值作为项目大小，如果没有设置width/height属性，则使用内容宽度
  • content：明确设置为内容的宽度
• 默认值：auto
• 适用对象：flex项
• 是否可继承：否
• 定义了项目在任何换行、增长或收缩发生之前的初始大小，可以代替width或者height属性

1.8. 绝对flex与相对flex

• 相对flex：当flex-basis被设置为除0以外的任何大小时，额外空间分配给各项按比例
• 绝对flex：当flex-basis为0时，整个项目的大小都是按比例的，因为没有基础值，都是分配的额外空间，建议始终在0后面包含单位，首选0%，或者0px

1.9. 改变flex项目的顺序

order 应用于要移动的特定项目

• 属性值：n（整数，正数或负数）
  • 当项目具有相同order时，它们按照在源代码中出现的顺序排列
  • 当具有不同的order值时，从最低的order值排列到最高的order值
• 默认值：0
• 适用对象：flex项和绝对定位的flex容器的子项
• 是否可继承：否

1.10. 何时给flex项重新排序

• 虽然元素在可视浏览器中以不同顺序显示，但其他设备（如屏幕阅读器）仍然按照源代码中的顺序读取内容
• 如果有重新排序的逻辑原韵（而不是视觉原因），则重新排序源代码
• 不要因为更方便而使用order
• 如果逻辑顺序和视觉顺序打算分离，则使用order

1.11. 浏览器对Flexbox的支持

当前版本（2012）

• 语法：display：flex
• 支持：IE11+、Edge12+、Chrome21～28（-webkit-）、Chrome29+、Firefox22-27（-moz-）、Firefox28+、Safari6～8（-webkit-）、Safari9+、Opera 17+、Android 4.4+、iOS7～8.4（-webkit-）、iOS9.2+

“Tweener”版本（2011）

• 语法：display：flexbox
• 支持：IE10

旧版本（2009）

• 语法：display：box
• 支持：Chrome<21、Firefox2～21、Safari3.1～6、Android 2.1～4.3、iOS3.2～6.1

1.12. 在线资源

Flexbugs github.com/philipwalto…

2. Grid 网格布局

与Flexbox模块一样，Grid模块也依赖于页面所用语言的方向

2.1. 网格布局的工作原理，布局过程如下：

1. 使用display属性将元素转换为网格容器，元素的子元素自动成为网格项
2. 设置网格的列和行
3. 将每个网格项分配到网格上的一个区域

2.2. 网格术语

• 应用display：grid属性的元素将成为网格容器并定义网格格式的上下文，它的所有直接子元素自动成为网格项
• CSS网格的各个部分
  • 网格线
  • 网格单元
  • 网格区域
  • 网格轨迹

2.3. 声明网格 display

• display：grid 这为网格设置了上下文，可以指定需要多少行和列以及它们的宽度了
• display：inline-grid 内联网格的功能与块级网格相同，但它们可以在内容流中使用

2.4. 设置网格

2.4.1 定义网格轨迹（用于容器元素）

定义好之后，网格项按源代码顺序流进可用的网格单元

grid-template-rows、grid-template-columns指定每行/列的高度（值为每个行轨迹的高度/宽度列表

• 属性值：none｜轨迹尺寸和可选线名列表
  • 网格轨迹尺寸：轨迹尺寸列表的数目决定了行或列的数目，下例是一个三行三列的网格
  • 网格轨迹大小可选值：长度（px、em）｜百分比值（%）｜小数单位（fr）｜auto｜min-content、max-content｜minmax()｜fit-content()｜以及设置轨道宽度的重复模式：repeat()｜auto-fill｜auto-fit
    • 小数单位（flex系数）：允许开发人员创建轨迹宽度，根据可用空间进行扩展和收缩。非常适合固定和灵活的轨迹宽度组合：可以某些轨迹为固定值，剩余轨迹按比例分配剩余空间；也可以所有轨迹都按比例分配剩余空间：浏览器将所有轨迹的fr值求和，将剩余空间划分为相应部分再根据指定单位数分配给各轨迹
    • minmax(minValue,maxValue)：设置轨迹的最小宽度和最大宽度，以代替轨迹的大小，该函数中不允许将fr单位作为最小值。这种方法具有灵活性，但允许用户设置限制
    • min-content、max-content、auto：将根据内容的大小来调整轨迹的大小。默认情况下，min-content值是轨迹可以获得的最小值且内容不会溢出（除非被明确的最小宽度覆盖），也就是最长的单词或最宽的图像的宽度；max-content分配内容所需的最大空间量，即使这意味着将轨迹扩展到网格容器的边界之外，将与最宽的内容内容一样宽，而无换行，适用于不希望换行的短语或导航项；auto在一般情况下，使轨迹的大小足以容纳其内容，同时考虑其他限制，功能类似于minmax(min-content,max-content)，在如果没有足够空间的情况下允许换行。
    • repeat(重复次数,轨迹模式)：假设有10列，列宽交替grid-template-columns:20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;，其快捷方式可以是这样：grid-template-columns:repeat(5,20px 1fr)
    • auto-fill、auto-fit：代替repeat()中第一个值，即不指定重复次数，让浏览器根据可用空间自行确定。但不能与fr单位以及基于内容大小的关键字一起使用，且只能使用一个auto-repeat；可以在auto-repeat中使用minmax()，且可以将它与fr或基于内容的关键字一起使用，如果它们处于具有min长度的max位置。两者的区别是：auto-fill根据网格容器的高度创建合适的行数之后一直保留空间，即使内容不能填满所有行；auto-fit则会将没有内容的任何轨迹都从布局中删除。如果有剩余空间，则根据提供的对齐值进行分布。
  • 网格线编号：创建一个网格时，浏览器自动为每个网格线分配一个数字，在定位项目时可以引用这个数字。
  • 网格线名称：当然也可以给行分配名称，可能更直观！线名称添加在方括号中相对于轨迹的位置。
  • 网格线：通常每个网格线都有多个名称和数字，可以让我们选择最容易使用的方式，如果要给一条线起多个名称，只需要将所有名称包含在括号中
• 默认值：none
• 适用对象：网格容器
• 是否可继承：否

2.4.2 定义网格区域

使用grid-template-areas为一个区域指定名称时，将得到一组与之匹配的自动生成的网格线名称，如命名一个区域为“main”，则该区域的左侧和顶部网格线、右侧和底部网格线会分别自动被命名为“main-start”和“main-end”。反之亦然，如果在一个区域周围明确分配线名称为“portal-start”和“portal-end”，那么可以以名称“portal”使用区域，即使没有用grid-template-areas定义它。

grid-template-areas

• 属性值：none｜区域名系列
  • 是为网格中的每个单元格提供的名称列表，按行列出，每行用""括起来，当相邻单元格共享一个名称时，就会形成一个具有该名称的网格区域。如果网格有三列，则每行都必须提供三个名称，如果希望某个单元格不被命名，那在该位置输入一个或多个句点.作为空格占位符
• 默认值：none
• 适用对象：网格容器
• 是否可继承：否

grid 快捷属性

• 属性值：none｜行信息/列信息
  • 斜线前的完整格式如下：
  • 行名称和区域名称是可选的。完整示例如下：
  • 除了最简单的网格结构外，不建议使用grid或grid-template，代码会过于复杂，小错误就能使整个网格崩溃。
• 默认值：none
• 适用对象：网格容器
• 是否可继承：否

2.4.3 设置网格项

使用线定位：对正在定位的网格项元素指定起始行和结束行、起始列和结束列四个属性

• grid-row-start、grid-row-end、grid-column-start、grid-column-end
  • 属性值：auto｜网格线｜跨越的数量｜跨越“线名”｜编号“线名”
    • auto：默认情况下，一个项目占用一个轨迹宽度
    • 如果同时省略start和end，则是默认的auto，宽度为1个轨迹
    • 如果有start，但省略end，则宽度是从start开始1个轨迹
    • 提供start，end中使用span关键字来指定跨越多少轨迹
    • 提供end，跨度将搜索到轨迹的起点
  • 默认值：auto
  • 适用对象：网格项
  • 是否可继承：否
• grid-row、grid-column 快捷属性
  • 属性值：起始行列/结束行列
  • 默认值：查看单个属性
  • 适用对象：网格项
  • 是否可继承：否

按区域定位

• grid-area
  • 属性值：区域名称｜1～4行标识符
    • 区域名称：指向使用grid-template-areas命名的区域名称之一；或者指向一个使用“-start”和“-end”分隔区域时隐式创建的区域名
    • 1～4行标识符：从上往下逆时针方向提供定义区域的四条网格线列表，由斜线分隔 row-start / column-start / row-end / column-end
  • 默认值：查看单个属性
  • 适用对象：网格项
  • 是否可继承：否

2.5. 隐式网格行为

• 如果没有显示的放置指令，网格项将按顺序流入网格
• 创建一个命名区域，会隐式地生成后缀为“-start”和“-end”的网格线，反之亦然
• 动态创建行和列轨迹，以容纳与定义的网格不合适的项目（如将项目放在已定义的网格之外，或者项目比单元格或区域多），浏览器就会生成更多的轨迹，直到所有项目都被放置。默认情况下，自动添加的任何行列的大小都会根据内容自动调整，如果需要给隐式行列提供特定维度，使用grid-auto-*属性

2.6. 给自动创建的行列提供特定维度

2.6.1 提供轨迹大小

为自动生成的轨迹提供一个或多个轨迹大小，并应用于网格容器，如果提供多个值，则充当重复模式

grid-auto-rows、grid-auto-columns

• 属性值：轨迹尺寸列表
• 默认值：auto
• 适用对象：网格容器
• 是否可继承：否

2.6.2 网格项目洗牌

改变顺序

可以与Flexbox一样，将order属性应用到一个网格项元素，以改变它在呈现时出现的顺序

堆叠顺序

当将多个项目分配到网格区域时，项目依照在源代码中的顺序依次从下向上堆叠，但可以使用z-index属性更改堆叠顺序

2.6.3 控制项目自动流入网格的方式

grid-auto-flow 流的方向和密度

• 属性值：row或column｜密度（可选）
  • row或column：指定项目是按行还是按列输入，默认遵循文档的编写方向
  • 密度dense：默认情况下，项目放置在它们适合的第一个区域，如果单元格太小，无法容纳内容，则将跳过该单元格，直到找到足够大的单元格以便放置。如果包含dense关键字，则会尽可能密集地填充网格，从而允许项目不按顺序显示，以填充可用空间
• 默认值：row
• 适用对象：网格容器
• 是否可继承：否

2.6.4 重新访问grid快捷属性

• 将auto-flow关键字添加到行或列轨迹信息中，表示在所提供的维度上应该自动生成该轴上的轨迹。
• 如下例表示要显示的建立列，让行根据需要自动生成：grid: auto-flow 12em/repeat(5,1fr);
• 当将auto-flow应用于行时，grid-auto-flow设置为row
• 当将auto-flow应用于列时，grid-auto-flow设置为column

2.7. 间距和对齐

2.7.1 轨迹间距（沟槽）

grid-row-gap、grid-column-gap

• 属性值：长度（不能为负）
  • 设置grid-row-gap长度，会增加网格的行之间的空间
  • 设置grid-column-gap长度，会增加网格的列之间的空间
• 默认值：0
• 适用对象：网格容器
• 是否可继承：否

grid-gap

• 属性值：grid-row-gap grid-column-gap
• 默认值：0 0
• 适用对象：网格容器
• 是否可继承：否

2.7.2 网格和项对齐

• Flexbox和Grid共享对齐属性和值。
• self-start和self-end值查看项目内容的书写方向，并使用其开始或结束边进行对齐

对齐单个项目，当一个网格项没有填满它的整个网格区域时。对于没有显示地设置width和height属性的项，默认是stretch；如果指定了宽高，则默认是start

• justify-self 指定内联轴方向的对齐（水平）
  • 属性值：start｜end｜center｜left｜right｜self-start｜self-end｜stretch｜normal｜auto
  • 默认值：auto（查看justify-items的值，默认为normal）
  • 适用对象：网格项目
  • 是否可继承：否
• align-self 指定块轴方向的对齐（垂直）
  • 属性值：start｜end｜center｜left｜right｜self-start｜self-end｜stretch｜normal｜auto
  • 默认值：auto（查看align-items的值）
  • 适用对象：网格项目
  • 是否可继承：否
• margin 实现网格项在单元格或区域中向左向右、向上向下、居中对齐，还可以使用margin，只要项目具有指定宽高就可实现

对齐网格中的所有项：这些设置将被*-self属性覆盖

• justify-items 指定内联轴方向的对齐（水平）
  • 属性值：start｜end｜center｜left｜right｜self-start｜self-end｜stretch｜normal
  • 默认值：normal（不可替换元素stretch；替换元素start）
  • 适用对象：网格容器
  • 是否可继承：否
• align-items 指定块轴方向的对齐（垂直）
  • 属性值：start｜end｜center｜left｜right｜self-start｜self-end｜stretch｜normal
  • 默认值：normal（不可替换元素stretch；替换元素start）
  • 适用对象：网格容器
  • 是否可继承：否

对齐网格容器中的轨迹，stretch关键字仅当轨迹宽度或高度设置为auto时才有效。当在轨迹周围和轨迹之间分配空间时，会增加可能有的gap设置

• justify-content 指定内联轴方向的对齐（水平）
  • 属性值：start｜end｜left｜right｜center｜stretch｜space-around｜space-between｜space-evenly
  • 默认值：start
  • 适用对象：网格容器
  • 是否可继承：否
• align-content 指定块轴方向的对齐（垂直）
  • 属性值：start｜end｜left｜right｜center｜stretch｜space-around｜space-between｜space-evenly
  • 默认值：start
  • 适用对象：网格容器
  • 是否可继承：否

2.8. 在线网格资源

• gridbyexample.com
• labs.jensimmons.com
• jensimmons.com/writing
• jensimmons.com/post/feb-27…
• cssgridgarden.com

3. 多列布局

4. Autoprefixer在线转换添加前缀

autoprefixer.github.io

第17章 自适应Web设计

自适应Web设计（RWD）是一种设计和制作方法，它允许在各种设备上舒适地浏览和使用网站。核心原则是所有设备都是相同的HTML源代码，但根据视窗大小应用不同的样式来重新排列组件并优化可用性。

1. 为什么要使用RWD

自2007年以来，人们可以在各种尺寸的设备上浏览网页。2016年，移动互联网的使用量超过了台式电脑对网络的使用量。不管用户如何访问网站，都希望在使用时拥有类似的体验，这就是RWD的作用所在。

2. 自适应秘诀

1. 依靠手机内置的网页显示功能。默认情况下，移动设备会显示缩小的整个网页，用户可以缩放细节并滚动到页面各个部分。虽然技术可行，但远非最佳体验。
2. 创建一个单独的移动网站，专用于小屏幕。M-dot网站
3. RWD，谷歌倾向于使用m.或mobile.版本的单一URL自适应网站来推进这个进程

3. RWD的三个核心部分

3.1. 灵活的网格，流体布局

不保持静态宽度，而是允许它们挤压并流入可用的浏览器空间

• Flexbox使用flex属性来实现按比例调整页面区域及其网格的大小
• 网格布局中使用fr和minmax()单位
• 对于不支持CSS布局标准的较老的浏览器，可以将像素转换为百分比，不用担心舍入长的十进制字符串，浏览器知道如何处理，且不会影响额外的精度

3.2. 灵活的图像

图像和其他嵌入式媒体需要能够缩放以适应其包含的元素

• 使图像缩小，以适应其容器的大小：img{max-width:100%;}，当布局变小时，其中的图像按比例缩小以适应各自容器的宽度；当容器大于图像时，图像保持在原始大小。应用max-width属性时，可以忽略HTML文档中img元素的width和height属性，如果设置width属性，则要确保height属性设置为auto，否则，图像不会按比例缩放
• 自适应图像，为性能选择最佳的图像大小
• 其他嵌入式媒体，视频或其他嵌入式媒体，当宽度缩小时，视频不能保持其固有比例：1.为视频创建内在比率的一种策略www.alistapart.com/articles/cr…；2.插件FitVid.js可以自动化Koblentz的流宽视频技术。fitvidsjs.com

3.3. CSS媒体查询

可以向只满足某些条件（如宽度和方向）的设备提供规则集

• 媒体查询根据浏览器的特性应用不同的样式：宽度、垂直方向或水平方向、分辨率等。使的向小屏幕发送单列布局和向大屏幕动态发送多列布局成为可能
• 查询本身，包括一个媒体类型，后跟一个特定功能和一个要测试的值。标准之后是一组花括号，其中包含测试通过时要应用的样式，在样式表中使用媒体查询结构如下：

@media type and (feature:value){
    /* styles for browsers that meet this criteria */
}

3.3.1 媒体类型

在CSS2中引入的，作为将样式指向特定媒体的一种方式。当前定义的媒体类型是：

• all
• print
• screen 如果是为屏幕设计的，那么媒体类型是可选的，因此可以忽略它
• speech

3.3.2 媒体功能查询

CSS3引入，最常见的测试功能是视窗宽度，还可以测试最小宽度（min-width）和最大宽度（max-width）

• 最小宽度查询是创建移动优先自适应设计的首选
• 可通过媒体查询检测设备功能的完整列表如下：

3.3.3 如何使用媒体查询

• 可以在样式表中使用媒体查询
  • @media规则，规则的顺序非常重要，因为后面的会覆盖前面的，所以媒体查询需要在具有相同声明的任何规则之后。
  • 在RWD中，最佳实践是为不支持媒体查询的小屏幕和浏览器设置样式，然后在样式表中为以后越来越大的屏幕引入样式
• 有条件地加载外部样式表
  • 使用link元素中的media属性有条件地加载单独的.css文件。
    • 优点：有助于管理模块化样式表
    • 缺点：对每个额外的.css文件都需要额外的HTTP请求
  • 使用@import规则执行媒体查询。
• 媒体查询不能与内联样式一起使用

3.3.4 浏览器支持情况

几乎所有浏览器都支持媒体查询，除了IE8及更早的版本。

• 使用Respond.js poly-fill，为不支持的浏览器添加了对min-width和max-width的支持。github.com/scottjehl/R…
• 创建一个单独的样式表，通过使用条件注释只向IE8或更早版本的用户提供，其他浏览器会忽略。

3.3.4 选择断点

断点是引入样式更改的宽度

• 最佳实践：
  • 基于设备大小设置断点，常见的设备大小：（智能手机320px、iPad768px），但后来设备多达240px～3000+px
  • 基于模块的断点，为页面的各个部分创建断点。通常是为页面的每个组件创建断点，而不是一次更改整个页面。
  • 基于em的断点，在媒体查询中，em基于文档的基本字体大小（默认为16px，但用户或页面作者可以更改）。使布局与字体大小成比例。
• 网站的屏幕尺寸：screensiz.es

3.3.5 要了解浏览器窗口或设备如何响应媒体查询

可以查看mqtest.io

4. 视窗meta元素

• mobile Safari引入了视窗meta元素，允许我们定义初始视窗大小，使Web页面的宽度与屏幕的宽度相匹配 <meta name="viewport" content="width=device-width, initial-scale=1">
• meta元素也允许设置maximum-scale=1，可防止用户缩放页面，但强烈建议不要这样做，因为调整大小对于可访问性和可用性非常重要
• 媒体查询始终在工作，即使在页面最初加载之后也是如此。媒体查询中进行测试的宽度会传递给meta元素，meta元素使得页面大小和设备屏幕宽度匹配，让页面以全尺寸显示在屏幕上，因此，设置视窗是至关重要的一步。

5. 自适应设计

多数情况下，在各种视窗大小范围内保持优化的技巧包括以下几点：

• 内容层次结构
• 布局
• 排版
• 导航
• 图像
• 特殊内容，如表格、表单和交互功能

5.1. 条件加载

在这种方式中，小屏幕用户可以在需要的时候通过链接访问最重要的内容（评论、产品详细信息、广告、链接列表等）。他们可以得到这些信息，但不是一下子就能得到。同时，在较大的屏幕上，那些补充内容会自动显示在侧栏中。条件加载需要使用JavaScript来实现

5.2. 内容层次结构

应该努力实现内容的可访问性，无论使用何种设备访问站点，都可以访问相同的内容

5.3. 布局

5.3.1 布局和行的长度

太短或太长的文本行很难阅读，所以应该将没有不爱设置为45～75个字符（包括空格）的最佳行长度。文本行太长则需要更改布局，也可以增加文本的字体大小。

5.3.2 自适应布局模式

• 大部分是流体：对小屏幕使用单列布局；对中、大屏幕使用另一种流体布局，设置最大宽度以防止其变得太宽。通常比其他方案的工作量小
• 列下降：根据可用空间在一列、二列和三列布局之间切换。当没有多余的列空间时，侧栏列就会下降到其他列的下方，直到所有列都垂直堆叠在单列视图中。
• 布局开关：完全重新设计各种屏幕大小的布局
• 微小的调整：使用单列布局，并对类型、间距和图像进行调整，以使其在各种设备大小上都能正常工作。
• 画布外：在此模式中，页面组件位于屏幕的左侧或右侧不可见的位置，在请求时显示在视图中。主内容屏幕的边缘部分仍然可见，以便用户了解移动部件之间的关系

5.4. 排版

需要在从小屏幕到大屏幕的范围内进行微调，以使其清晰易读

5.4.1 可变字体

2016年底，OpenType发布了“可变字体”，可以通过使用font-*样式属性来更改可变字体的粗细、宽度、样式（斜体）、倾斜和大小。这项技术的神奇之处在于，可以交付一个字体文件（只是对服务器的一次调用），对齐进行拉伸和操作，以满足多种用途。

5.4.2 字体

在小屏幕上使用花哨字体时一定要测试其易读性。还要考虑小屏幕可能是通过蜂窝网络连接的，因此利用本地可用的字体可能比需要下载Web字体更好。

5.4.3 字体大小

不同的视窗宽度会对行长度造成严重破坏。可能需要为更宽的视窗增加文本元素的字体大小，以保持行长度在45～75个字符。也可以使用基于em的媒体查询来布局

5.4.4 行高

当屏幕变大时，可能需要调整行高。平均来说，行高应该在1.5左右。然而，在小屏幕上，更小的行高（1.2～1.5）更容易阅读。对于大屏幕，可以处理更大的行高（1.4～1.6）

5.4.5 margin

在小屏幕上，通过将主列的左右margin保持在最小值（2～4%）来最大限度地利用可用空间。随着屏幕增大，可能需要增加margin来控制行长度，并为布局添加一些受欢迎的空白。

5.4.6 导航

许多成功的小屏幕模式：

• 顶部导航：
  • 如果只有几个导航链接，可能正好放在屏幕顶部的一行或两行
  • 使用视窗单位的流体排版，要使文本的大小与视窗的大小成比例，需要使用vw和vh作为字体大小。
• 优先级+：
  • 最重要的导航链接出现在屏幕顶部的一行中，旁边还有一个more链接。
  • 优点：主链接在纯试图中，显示的链接数量可以随设备宽度的增加而增加
  • 缺点：难以确定哪些链接值得在主要的小屏幕上显示
• 选择菜单：
  • 对于中等大小的链接，一些站点使用select输入表单元素。轻点菜单将使用操作系统的“选择菜单”用户界面打开选项列表
  • 优点：很紧凑
  • 缺点：表单通常不用于导航，而且菜单可能会被忽略
• 链接到页脚菜单：
  • 在页面顶部放置一个菜单链接，链接到页面底部的完整导航。风险在于可能会让那些突然发现自己处于滚动条底部的用户感到迷惑
• 可折叠的子导航：
  • 当点击一个小箭头图标时展开的折叠选项通常用于显示和隐藏子导航。甚至可能被嵌套在几层深的地方。为了避免在折叠式子菜单中嵌套导航，一些站点只是简单地链接到包含该部分子导航列表的单独的登录页面。
• 推送和覆盖切换：
  • 在切换导航中，导航是隐藏的，但在点击菜单链接时向下展开。可以将主要内容推到其下方（推送切换）或在内容的前面向下滑动（覆盖切换）。
• 画布外/飞入
  • 将导航置于屏幕外面板中主内容的左侧或右侧，当点击菜单图标时，这些内容就会滑入视图

为手指设计

• 导航中的链接应该足够大，以便用拇指和指尖轻松定位。苹果的应用程序需要44px，这也是一个很好的标准。
• 触摸设备的另一个考虑因素是没有悬停状态。

5.4.7 图像

• 使用自适应图像标记技术为各种大小和分辨率的关键图像提供多个版本
• 使用最小版本作为默认版本，以防止不必要的数据下载
• 确保重要的图像细节在较小的尺寸中不会丢失，考虑用裁剪过的图像来替换小屏幕
• 避免将文本放在图像中，如果有必要，为小屏幕提供具有较大文本的替代版本

5.4.8 特殊内容

• 表单
  • Flexbox可以为表单字段及其标签添加灵活性和条件包装。
  • 要确保表单尽可能高效，没有不必要的字段
  • 可以通过添加足够的padding和margin以增加目标大小使标签可点击来选择输入
• 表格
  • 自适应表格通常有三种方法：滚动、堆叠和隐藏
  • 滚动：表格保持所需宽度，用户可以向右滚动以查看不适应的列
  • 堆叠：将条目堆叠在一个长而窄的滚动条中，每个条目重复表头。缺点是列表可能很长，且难以比较条目。
  • 隐藏：在页面首次加载到小型设备时隐藏某些信息列，并为用户提供单击以查看整个表格或打开和关闭特定列的选项。
• 交互元素
  • 就地图而言，在地图上添加一个链接可以触发设备的本地地图应用程序的打开，该应用程序旨在提供更好的小屏幕体验。其他交互组件可以适应较小的视窗

5.5. 关于测试

5.5.1 真实设备

• 创建设备实验室 buildingadevicelab.com
• 查看周围是否有设备实验室 opendevicelab.com
• 使用同步工具更顺畅的在多个设备上测试
  • browsersync.io
  • www.vanamco.com/ghostlab/

5.5.2 仿真器

www.mobilexweb.com/emulators

5.5.3 第三方服务

付费即可访问各种各样的设备模拟器

• browserstack.com
• crossbrowsertesting.com

第18章 过渡、变换和动画

1. CSS过渡

1.1. 当运用一个过渡时，需要使用一些CSS属性：

• 哪些CSS属性需要更改（transition-property）
• 需要持续多久（transition-duration）
• 以何种方式加速过渡（transition-timing-function）
• 开始前是否应该有一个暂停（transition-delay）

1.2. 过渡需要一个开始状态和一个结束状态

• 第一次加载时出现的元素是开始状态
• 结束状态由状态改变来触发：:hover、:focus、:active，也可以使用JavaScript来改变元素（如添加一个class属性），并使用它作为一个过渡触发器

1.3. transition-property 指定属性

可以标识正在变化的、要平缓过渡的CSS属性。一般规则是，如果它的值为颜色、长度或数字，则该属性可以是过渡属性。

• 属性值：属性名称｜all｜none
• 默认值：all
• 适用对象：所有对象，:before和:after伪元素
• 是否可继承：否

可设置动画的CSS属性

类别	属性值
背景	background-color、background-position
边框和轮廓	border-bottom-color、border-bottom-width、...
	border-spacing、outline-color、outline-width
颜色和不透明度	color、opacity、visibility
字体和文本	font-size、font-weight、letter-spacing、word-spacing
	line-height、text-indent、text-shadow、vertical-align
元素盒子计量	height、width、max-height、min-height、...
	margin-bottom、...、padding-bottom、...
位置	top、right、bottom、left、z-index、clip-path
变换	transform、transform-origin

1.3. transition-duration 需要持续多长时间

设置了动画完成需要的时间，以s或ms为单位。0.2s似乎是一个受欢迎的UI元素过渡时间

• 属性值：时间
• 默认值：0s
• 适用对象：所有元素，:before和:after伪元素
• 是否可继承：否

1.4. transition-timing-function 以何种方式加速过渡

该属性和持续时间是必须的，它们形成了过渡的基础。

• 属性值：ease｜linear｜ease-in｜ease-out｜ease-in-out｜step-start｜step-end｜steps｜cubic-bezier(#,#,#,#)
  • ease：缓缓启动，然后加速，最后缓慢停下
  • linear：从开始到结束，速度保持一致
  • ease-in：缓慢启动，然后加速
  • ease-out：快速启动，然后速度减慢
  • ease-in-out：缓缓启动，加速，最后再次减慢，与ease类似，但中间的加速不太明显
  • cubic-bezier(x1,y1,x2,y2)：Bezier曲线。创建自定义曲线Cubic-Bezier.com
  • steps(#, start｜end)：第一个值是步骤的数量，第二个关键字定义状态变化是否发生在每一步的开始或结尾
  • step-start：在持续时间刚开始时，改变一个步骤的状态（与steps(1, start)效果相同）。
  • step-end：在持续时间结束时，改变一个步骤中的状态（与steps(1, end)效果相同）。
• 默认值：ease
• 适用对象：所有元素，:before和:after伪元素
• 是否可继承：否

1.5. transition-delay 设置延时

指启动的动画有指定时间的延迟

• 属性值：时间
• 默认值：0s
• 适用对象：所有元素，:before和:after伪元素
• 是否可继承：否

1.6. transition 快捷过渡属性

transition: property duration timing-function delay;只要duration（必需的）出现在delay（可选的）之前，顺序就不重要。

1.7. 应用多个过渡

• 为每个transition-*属性列出所有的值，并用逗号分隔。这些值根据它们在列表中的位置进行匹配，如果一个列表中的值少于其他列表，浏览器就重复该列表开始的值
• 将transition属性的值排成一行，用逗号分隔每一组值

2. CSS变换

2.1. transform

1. CSS3变换模块为作者提供了旋转方向、重新定位、调整大小以及在二维和三维空间中倾斜HTML元素。变换改变了元素的显示方式，但不是基于运动或时间的。
2. 不过，可以使用transition或关键帧动画从一个变换状态设置到另一个变换状态的动画。
3. 当一个元素变换时，它的元素框保持其原来的位置，并影响周围的布局

• 属性值：rotate()｜rotateX()｜rotateY()｜rotateZ()｜rotate3d()｜translate()｜translateX()｜translateY()｜scale()｜scaleX()｜scaleY()｜skew()｜skewX()｜skewY()｜none
  • 变换角度（旋转）：rotate()的值是一个角度（正数：顺时针；负数：逆时针）。默认围绕元素中心点旋转，但可以使用transform-origin改变旋转点
  • 变换位置（转换）：translate()，在页面上给元素渲染一个新的位置。
    • translateX()允许在水平轴上移动元素
    • translateY()沿垂直轴移动
    • translate()结合了x和y的值，如果提供一个值，则会假定为x值，y默认为0
    • 值可以是长度值或百分比值。百分比值以边界框的宽度来计算。
  • 变换大小（缩放）：使元素显示更大或更小
    • scale()快捷、scaleX()水平、scaleY()垂直。
    • 值是无单位的数字，表示尺寸比例。
    • 如果只给scale()提供一个值，会将该值视为两个方向上的缩放比例
  • 使它倾斜（skew）：通过指定度数来改变垂直、水平或两个方向上的角度
    • skew()快捷、skewX()、skewY()
    • 如果只给skew()提供一个值，则会用于x，y默认为0
• 默认值：none
• 适用对象：可变换元素
  • 包含替换内容的HTML元素，如img、canvas、表单输入和嵌入式媒体
  • 元素的display设置为block、inline-block、inline-table（或任何table-*类型）、grid和flex
  • 不可变化元素包括：不可替换的内联元素：如em、span；表列和列组
• 是否可继承：否

2.2. transform-origin

• 属性值：百分比｜长度｜left｜center｜right｜top｜bottom
  • 值是一个或两个关键字，第一个时水平偏移量，第二个时垂直偏移量，一个值则同时用于两个方向
• 默认值：50% 50%
• 适用对象：可变换元素
• 是否可继承：否

2.3. 应用多个变换

• 通过列出的函数和它们的值，用空格隔开即可
• 值得注意的是，变换执行的顺序和它们所列的顺序相同

2.4. 3D变换

3. 关键帧动画

动画的过程有两个部分：

1. 使用@keyframes规则建立关键帧
2. 给需要动画效果的元素添加动画属性

3.1. 动画工具

对于想要添加一个简单的常见动画效果，可以先找到一个预先制作的效果，继而应用到设计中。

• daneden.github.io/animate.css…
• www.justinaguilar.com/animations/…
• angrytools.com/css/animati…

3.2. 建立关键帧

• @keyframes规则的一般语法：
  • animation-name表示动画序列名。
  • keyframe{property:value;}表示动画序列中的一个关键帧。其中keyframe可以是百分比值，也可以是关键字，from相当于0%，表示动画序列的开始；to相当于100%，表示动画序列的结束。

3.3. 添加动画属性

使用动画属性集，对文档中的一个或多个元素应用动画序列。动画属性包括：

• 使用哪个动画（animation-name）
• 应采取多长时间（animation-duration）
• 动画应该如何加速（animation-timing-function）
  • 关键字与CSS过渡中使用的关键字相同
• 是否在开始之前暂停（animation-delay）
• 动画应该重复多少次（animation-iteration-count）
  • 整数
  • infinite，无穷大
• 动画播放方向（animation-direction）
  • normal，正向
  • reverse，反向
  • alternate，从头开始前后来回播放
  • alternate-reverse，从结尾开始交替播放
• 动画填充模式，决定动画开始前和结束后发生的情况（animation-fill-mode）
  • none，默认值，动画显示没有通过@keyframes指定的任何属性值
  • forwards，动画播放后停留在最后一个关键帧
  • backwards，在动画延迟期间显示第一个关键帧
  • both，保留开始状态和结束状态
• 动画是否运行（animation-play-state）
  • play-state可以根据用户输入的JavaScript或悬停来打开和关闭
• 快捷属性（animation）

第19章 更多CSS技术

1. 对表单设置样式

1.1. 协调的字体

如果希望所有输入使用与页面周围文本相同的字体，可以强制表单元素继承字体设置：button,input,select,textarea{font-family:inherit;font-size:100%;}

1.2. 对不同表单控件设置CSS属性

1.2.1 文本输入（text、password、email、search、tel、url）

使用width、height、background-color、background-image、border、border-radius、margin、padding、box-shadow来改变盒子本身的外观。还可以使用color和字体属性来对输入的字段设置样式

1.2.2 textarea元素

• 可以向文本输入域一样进行样式设置
• textarea默认字体是等宽字体，需要改变字体以便与其他文本输入域相匹配
• 由于有多行，可以指定行高
• 有些浏览器的textarea右下角可以缩放，使用resize：none可以关闭该功能
• 默认情况下，textarea显示为inline-block，可以使用display属性将其更改为block

1.2.3 按钮输入（submit、reset、bitton）

• 可以将盒子属性应用到提交和重置按钮。
• 默认情况下，按钮被设置为border-box尺寸模型
• 大多数浏览器还默认添加了一点padding
• 也可以对按钮显示的文本设置样式

1.2.4 单选按钮和复选按钮

可以使用JavaScript改变这些按钮

1.2.5 下拉菜单和选择菜单

• 可以指定select元素的宽度和高度，但注意默认情况下，它使用border-box尺寸模型
• 有些浏览器允许对option元素设置color、background-color和字体属性，但也需要最好让浏览器按默认方式渲染

1.2.6 不能单独使用CSS更改的表单元素

用于input的range、color、日期选择器、文件选择器、option、optgroup、datalist、 progress、meter。

1.2.7 字段集和图例

• 可以将字段集看作其他的元素盒子，使用盒子属性调整它。完全关闭边框是保持表单整洁的一种方法，同时保持语义和可访问性
• 默认情况下，legend元素位于filedset的顶部边框之上，浏览器使它们难以改变。一些开发人员在legend中使用一个span或b元素，并对所包含的元素应用样式，以产生更加可预见的结果。有些人选择隐藏它，这样屏幕阅读器仍然可以读取它legend{width:1px;height:1px;overflow:hidden;}

2. 对表格设置样式

2.1. 调整表格单元格填充

将padding属性应用于td或th元素。

2.2. 调整表格单元格间距

2.2.1 border-collapse 显示表格单元格之间的边框

• 属性值：separate｜collapse
  • separate 分散的边框
  • collapse 压缩的边框
    • 优点是可以为tr、col、rowgroup、colgroup元素设置边框样式
• 默认值：separate
• 适用对象：表格和内联表元素
• 是否可继承：是

2.2.2 border-spacing 指定单元格边框之间的间距

• 属性值：水平长度值 垂直长度值
  • 水平值应用于列间
  • 垂直值应用于行间
  • 如果只提供一个，将同时应用于两个方向
• 默认值：0
  • 虽然默认是0，但浏览器通常会为过时的cellspacing属性添加2px的空间，因此需要将table元素中的cellspacing属性设置为0
• 适用对象：表格和内联表元素
• 是否可继承：是

2.2.3 empty-cells 指定在分散边框的表格中是否让空单元格显示背景和边框

• 属性值：show｜hide
• 默认值：show
• 适用对象：表格单元格元素
• 是否可继承：是

2.3 table-layout 表格布局

允许用户指定计算表格宽度的两种方法

• 属性值：auto｜fixed
  • fixed，使表格宽度基于为表格、列或单元格提供的宽度值
  • auto，使表格宽度基于表格内容的最小宽度
• 默认值：auto
• 适用对象：表格和内联表元素
• 是否可继承：是

2.4 caption-side 选边

可以定位表格中的caption元素

• 属性值：top｜bottom
  • top，默认出现在表格的上方
  • bottom，使caption元素定位在表格的下方
• 默认值：top
• 适用对象：表格标题元素
• 是否可继承：是

2.5 表格的display属性

CSS2.1中包含了许多display属性值，允许用户将表格的显示行为附加到元素上。其初衷是提供一种机制，为了将表格的显示行为应用于XML语言。近年来，表格display值已经成为实现页面布局效果的另一种方法，如垂直居中和灵活的列宽。

• table
• inline-table
• table-row-group
• table-header-group
• table-footer-group
• table-row
• table-column-group
• table-column
• table-cell
• table-caption

3. 重置和Normalize.css

为应用自己的样式获得一致的起点

3.1 css重置

一系列样式规则，可以覆盖所有的用户代理样式的样式规则，并创建一个尽量中性的初始样式。使用此方法，需要为使用的每个元素指定所有的字体和间距属性。真正的从头开始

• meyerweb.com/eric/tools/…
• web.com/eric/though…

3.2 Normalize.css

精心梳理了每一款现代浏览器的用户代理风格，并创建了一个样式表来调整它们的风格以保持一致性，而不是将它们全部关闭。提供一个合理的起点：段落的上下仍有一些空格，表格以降序粗体显示、列表具有标记和缩进，还包括使表单小部件保持一致的样式

• necolas.github.io/normalize.c…
• nicolasgallagher.com/about-norma…

4. 图像替换技术

有时，可能仍然需要以一种屏幕阅读器仍然可以访问的方式将文本元素替换为图像。常见的场景是使用徽标来代替标题中的公司名称。

• 较好的解决办法：
  • 使用一个基于CSS的图像替换技术，使用图像作为元素的背景，然后将文本转移，从而不再页面上呈现。最流行的是Phark技术，使用一个大的负缩进将文本移到可见页面的左侧text-indent:-9999px
• 任何图像替换方法的缺点是：
  • 意味着每个图像都需要一个额外的服务器请求。
  • 每次标题更改时也可能需要更多的工作来创建图形
  • 在图像替换之前，考虑是否可以使用Web字体或带有alt文本的内联图像来做到

5. CSS Sprite

减少图像请求数量的策略之一，将所有小图像放到大图像文件中，从而只需要为一个图像获取请求。包含多个图像的大图像称为Sprite。图像使用background-position属性在元素中定位，这样让只有用到的部分图像才是可见的。

• Sprite产生器
  • css.spritegen.com
  • responsive-css.spritegen.com

6. CSS特性检测

有一些方法可以检查浏览器是否支持特定的CSS属性及其功能，这样就可以利用最先进的CSS，同时也为不支持的浏览器提供周到的备份。

6.1 CSS特性查询

使用新的CSS at规则的特性查询，CSS3条件规则模块第3级引入了@supports规则，用于检查浏览器对特定属性和值声明的支持。工作原理类似于媒体查询，语法如下： 查询针对的是整个声明，包括属性和值。最佳实践是首先指定备份样式，然后使用一组针对支持该特性的浏览器的样式来覆盖它们。

6.1.1 操作符

@supports规则可以与三个操作符一起用来优化特性检测：not、and、or

• not 允许我们测试何时不支持特定的属性/值对@supports not (property:value){}。有朝一日，这将有助于提供备份样式，但对于当前的浏览器支持，可能会让不支持的浏览器跳过@supports规则中的所有内容，包括备份
• and 仅当满足两个或多个系列中的所有条件时才应用样式@supports (property1:value) and (property2:value){}
• or 当满足一系列条件中的任何一个时，这个对于供应商前缀属性特别有用@supports (-webkit-property:value) or (-ms-property:value) or (property:value)

6.1.2 创作技巧

• 特性查询不是检测Flexbox或任何比@supports本身拥有更好支持的属性的最佳工具。例如：Safari 8支持Flexbox，但不支持@supports，如果将所有Flexbox布局规则隐藏在一个特性查询中，Safari 8会忽略它们
• 网格布局是一个可以使特性查询工作的好地方，因为每个支持display：grid的浏览器也都支持@supports

6.1.3 优缺点

• 优点：允许我们以一种不依赖JavaScript的方式更快地利用新的CSS属性。下载并运行脚本比单独使用CSS要慢
• 缺点：有限的浏览器支持意味着@supports不如Modernizr影响深远

6.2 Modernizr

名为Modernizr的基于JavaScript的工具，是一个轻量级的JavaScript库，在后台运行，当页面在浏览器中加载时，会测试一长串HTML5和CSS3特性，对于它测试的每个特性，它将结果（支持/不支持）存储在一个JavaScript对象中，该对象可以通过脚本访问，也可以作为一个在html根元素中的类名，该元素可以在CSS选择器中使用。

6.2.1 如何工作

• 当Modernizr运行时，会在html元素中为检测到的每个特性追加一个类名。
  • 例如，如果将其配置为对Flexbox进行测试，它将在支持Flexbox的浏览器上将.flexbox类名添加到html元素中，在不支持的浏览器上将.no-flexbox添加到html元素中。
• 有了根元素上的类名，页面上的所有内容都成为该类的一部分，我们可以使用类名作为选择器的一部分，根据特性支持提供不同的样式集

6.2.2 如何使用

1. 下载Modernizr.js脚本 Modernizr.com，在网站上可以自定义脚本，使其只包含想要测试的HTML和CSS特性，然后单击Build按钮，点击Download，就可以保存脚本
2. 将其与项目的其他文件一起放到目录中，在需要使用链接样式表或其他脚本之前，将其添加在HTML文档的head中。
3. 打开HTML文档并将no-js类名分配给html元素。一旦检测到浏览器支持JavaScript，Modernizr就会将其改为js，如果js无法运行，将不知道特性是否被支持

6.2.3 优缺点

• 优点：允许我们针对特性的特性而不是整个浏览器进行设计；网站有详尽和清晰的文档，容易使用；可以在绝大多数浏览器上运行
• 缺点：依赖JavaScript，不能100%确定它会运行；也会比单独使用CSS进行特性检测稍微慢一些

第20章 现代Web开发工具

这些工具使Web开发人员工作更轻松，代码更健壮。这些高级工具的共同之处在于，它们通常与命令行界面（CLI）一起使用。

1. 命令行

～表示正在查看用户的根目录，用户目录是终端中的默认根目录

• 一些实用程序，在提示符处输入它们的名称即可运行
• 更常见的情况是需要以标志和参数的形式提供附加信息
  • 标志改变了实用程序的操作方式。它跟在命令名后面，有一个或两个破折号表示，许多情况下可以将标志缩写为其第一个字母
  • 参数提供特定函数所需的特定信息

1.1. pwd

print working directory，打印工作目录，从计算机根目录开始显示当前目录的完整路径。

1.2. ls

list，返回工作目录中的文件和目录列表。

• ls -a可以显示隐藏在目录中的点文件。（-a是all的缩写）
• ls -l指示计算机以长格式显示目录内容，包括全县设置和创建日期

1.3. cd

change directory，更改目录看，后加要切换到的目录的名称

• 在Mac上，将文件或文件夹的图标从Finder拖动到终端，将会自动填写好路径
• cd后跟一个空格cd ，会回到主目录
• cd ..，表示前往上一级

1.4. mv 移动文件和文件夹

1.5. cp 复制文件

1.6. mkdir 创建新的空目录

1.7. rm

删除工作目录中的文件或文件夹（注意，这个命令会完全删除文件）

1.8. man

manual，手册，显示传递给他的任何命令的文档，如man ls显示ls命令及其所有可用标志的描述。有些手册很长，回车键一次向下滚动一行；Fn+下箭头一次向下滚动一页；q退出手册页，返回到提示符

1.9. Linux bash 命令行的A～Z索引

ss64.com/bash/

2. CSS的强大工具：处理器

用于高效地编写CSS并优化生成的代码，使其在所有浏览器中都能工作

2.1. 预处理程序

建立在CSS之上的语言，采用了传统编程语言的省时语法特征。最流行的有Sass、LESS、Stylus。必须使用程序或脚本将生成的文件转换成浏览器可以理解的标准CSS文档。

• 由一个编写语法和一个程序组成，该程序将使用该语法编写的文件编译为浏览器中可以使用的普通CSS文件

2.1.1 Sass sass-lang.com

Syntactically awesome style sheet（语法上非常棒的样式表），最初，使用了缩进的、无括号的语法；后来的一个版本SCSS（Sassy CSS），基于括号CSS格式。最初是用Ruby语言编写的，大多数开发人员现在使用Node Sass来编译.scss文件。三个最流行的特性：

• 嵌套
  • 允许嵌套样式以匹配标记的结构
• 变量
  • 定义一次并在整个样式表中重复使用的值
  • 设置变量：$变量名:变量值;
  • 使用变量：css属性:$变量名;
• mixin
  • 可以重复使用的规则集
  • 设置：@mixin 名称{多个声明...}
  • 使用：应用这个样式组合，@include将其包含在声明中，并按名称调用选择器{@include 名称;其他声明...}
  • mixin是处理供应商前缀的一种流行的解决方案，包括一个参数，用$表示的一个值的占位符：如用于border-radius的mixin：

2.1.2 LESS lesscss.org

与Sass非常相似，但缺乏高级的编程逻辑特性（如if/else语句），语法上也有细微的差别。例如：

• 变量用@符号表示，不用$
• 使用JavaScript（less.js）而不是Ruby将LESS文件处理为常规的CSS文件
• 注意，将LESS文件编译成CSS需要大量的处理器，并且会使浏览器陷入困境。最好在发送到服务器之前将其转换为CSS

2.1.3 Stylus stylus-lang.com

结合了Sass的逻辑特性和基于JavaScript的编译器的便利性，还提供了最灵活的语法：可以包含尽可能多的CSS“标点符号”（括号、冒号和分号），在变量前加上或不加$，并将mixin名称视为常规属性

2.1.4 现有的mixin库

• compass-style.org
• bourbon.io

2.2. 后处理器

CSS优化工具通过提高跨浏览器的一致性、降低文件大小以获得更好的性能，并增强许多其他任务，使CSS变得更简洁、更标准。

• 可以接受你编写的CSS样式，扫描需要供应商前缀的属性，然后自动插入带前缀的属性
• 更常见的情况是使用Grunt或Gulp之类的任务运行器来实现后处理器

2.2.1 PostCSS postcss.org

是一个Node.js模块，可以解决各种CSS问题。解析CSS或Sass、LESS等类似CSS的语法，分析其结构，并将生成的“树”提供给插件来操作代码

• “树”的正式名称是AST，Abstract Syntax Tree，抽象语法树，是PostCSS插件的API。
  • 这个开放的API可以让任何人很容易地创建一个PostCSS插件。www.postcss.parts
  • 还有一些工具：
    • Stylelint（stylelint.io）：检查css文件的语法错误和冗余
    • CSSNext（cssnext.io）：允许通过尚未实现这些功能的浏览器的备份来使用未来的CSS第4级的功能
    • PreCSS（github.com/jonathantne…）：一组插件，允许编写类似Sass的语法并将其转换为标准的CSS
    • Fixie（github.com/tivac/fixie）：插入黑客，需要在旧版本的IE中起作用
    • 颜色格式转换器将可选的颜色格式（如HWB、HCL、hex+alpha通道）转换为标准的RGB或十六进制
    • Pixrem：将rem单位转换为不支持浏览器的像素
    • list-selectors：列出样式表中用于代码检查的选择器并对其进行分类

2.2.2 Rework github.com/reworkcss/r…

2.2.3 Pleeease pleeease.io

3. 构建工具

用于自动处理生成代码时遇到的重复性任务，通常被称为任务运行器。可以使用其在HTML、JavaScript、CSS和图像文件上定义和运行各种任务，以使它们准备好发布。也可以自动执行任务，为此，需要告诉构建工具“监视”文件和文件夹的更改。当检测到更改时，将触发相关任务，使其按照配置的方式自动运行。一些常见的任务：

• 连接。通常将样式表和脚本划分为较小的、专用的.css和.js块，在发布时，出于性能考虑，希望尽可能少地调用服务器，以便将这些小块链接到主文件中。
• 压缩和“缩小”。删除不必要的空格和回车，从而使文件尽可能小。构建工具可以压缩CSS和缩小JavaScript
• 检查HTML、CSS和JavaScript中的错误
• 使用工具优化图像，可以压缩目录中所有图像文件的大小
• 帮助提交或将更改推送到版本控制存储库（Git）
• 刷新浏览器以反映你刚刚对文件所做的任何更改（LiveReload插件）
• 从模板和内容数据结构构建最终的HTML文件
• 运行CSS前处理器和后处理器

3.1. Grunt gruntjs.com

是一个构建在开源的Node.js框架上的JavaScipt工具，可以使用命令行来操作它。有很多插件几乎可以执行所能想到的任何任务

3.2. Gulp gulpjs.com

优点：运行速度快一些，但比Grunt需要更多的技术知识，可以用实际的JS代码配置它

3.3. Webpack

3.4. Brunch

3.5. Browserify

3.6. Broccoli

4. Git git-scm.com

一个版本控制程序，可以跟踪以前的版本，并使团队轻松地在同一代码上协作。可以使用Git与GitHub进行交互，可以通过命令行、GitHub网站上的用户界面进行交互，也可以使用为Git命令提供的GUI界面独立应用程序进行交互。

4.1. Git

是在你的计算机上运行的版本控制程序。

4.1.1 使用Git的好处

• 如果出现问题，可以轻松地回滚到项目的早期版本
• 简化了在共享源代码上的协作。可以多个开发人员协作，将所有更改合并到一个主副本中。也可以推动在一个公共项目上进行松散的合作

4.1.2 Git是如何工作的

• 每次修改（提交）所使用的唯一ID（Git生成）、一条描述修改的消息（自己编写）和其他元数据都会被记录，Git为你的文件和文件夹保留一个副本，所有这些版本和提交日志都存储在一个存储库中，通常称为“repo”
• 一旦计算机上安装了Git，每创建一个新的存储库或克隆一个现有的存储库时，Git就添加一个目录和文件夹代表repo的元数据以及项目文件夹中的其他文件。初始化Git存储库之后，如果需要回到以前的版本，可以提交更改并利用“时间机器”的特性。
• 在一个项目中与其他人一起工作时，将使用hub模型，其中在中央服务器上有一个正式的存储库，每个团队成员将在其上创建一个本地副本，每个成员都在自己的机器上工作，提交到本地的repo，并按逻辑间隔将他们的工作上传到中央存储库。这就是为什么Git是一个分布式版本控制系统，而其他系统（SVN）需要将每个更改直接提交到服务器

4.1.3 Git术语

• 工作目录
  • 是计算机上执行实际工作的文件目录。工作副本是可以修改的
• 存储库
  • 本地Git存储库与工作目录中的文件放在一起。它包含一个项目在其开发的每一步中的所有文件的副本或快照，还包含每次更改时一起存储的元数据。
  • 可能还有一个项目的中心存储库，位于像GitHub这样的远程服务器上
• 提交
  • 是Git交互的最小单元，也是使用Git所要做的大部分工作。
  • 可以在工作时频繁的“保存”工作文档，但当想要有意地将该版本添加到存储库时，则需要“提交”更改。通常在工作流程中的逻辑暂停时提交。
  • 提交时，Git记录所有项目文件的状态，并更改分配元数据，包括用户名、电子邮件、日期和时间、唯一的多位数ID号和描述更改的消息。这些存储的记录被称为“提交”。
  • 提交类似于在提交时刻的整个存储库的快照，其中包含每个文件。
  • 提交是附加的，所以即使删除文件，Git也会向堆栈中添加提交
• 散列
  • Git为每次提交生成的唯一ID在技术上称为SHA-1散列（hash），是一个由40个十六进制字符组成的字符串。
  • 通常在项目中使用短散列。
• 暂存
  • 在提交更改之前，你首先必须让Git知道该文件（跟踪它）。这称为暂存文件，通过将其添加到Git来完成，git add filename。但其他工具可能会提供一个Add按钮来暂存文件，这会创建要提交到本地存储库但尚未提交的文件的本地索引
  • 在提交之前，需要“添加”任何已更改的文件，而不仅是新文件
• 分支
  • 分支是一系列连续的提交，有时也称为提交堆栈。
  • 任何给定分支上最新提交都是head。
  • 也可以将分支视为开发的线程
  • 项目通常有一个主分支或默认分支，通常称为master，它是项目的正式版本，要在分支上工作，需要将它提取出来（check out）
  • 在分支中工作时，在任何时候都可以启动一个新分支来做一些工作，而不会影响源分支。可以启动一个新分支来尝试新的功能，或者进行一些调试，或者尝试演示。
  • 分支通常用于诸如此类的小型的、特定的任务
• 合并
  • 是Git共享代码的撒手锏。可以将一个分支的提交合并到另一个分支中，或者可以合并位于不同计算机上的同一分支的不同版本。
  • Git试图将每个提交逐个合并到目标分支中。如果只有一个分支发生了变化，那么另一个分支可以简单地快进以赶上变化。如果两个分支都有不在另一个分支中的提交，那么Git将遍历每个提交，并逐行尝试合并差异。Git实际上会自动为你更改文件中的代码，这样你就不必寻找已更改的内容。
  • 但是，如果Git发现了冲突，就会为你提供冲突报告。源文件中指出了=======和<<<<<<<字符之间的冲突。当出现冲突时，人们需要通读列表并通过保留预期的更改和删除其他更改来手动编辑文件，解决了冲突之后，需要再次添加和提交文件
• 远程
  • 远程repo可以位于组织内的另一台计算机上，但也可能托管在像GitHub这样的远程服务器上。
• 克隆
  • 是对存储库及其包含的所有内容进行精确复制。从远程服务器窟窿一个repo到自己的计算机是很常见的。但也可以克隆到本地的另一个目录
• 推送push/拉取pull
  • 如果使用的是远程存储库，需要更改上传并下载到服务器。将数据从本地存储库移动到远程存储库的过程称为推送。
  • 当将提交推送到远程时，它们会自动与服务器上的当前版本合并
  • 为了用服务器上的版本来更新本地版本，可以拉取它，它会检索有关更改的元数据并将更改应用到工作文件
  • 可以把推送和拉取看作合并远程版本
  • 最好的做法是经常拉取远程主服务器来保持自己的副本是最新的，这有助于消除冲突
  • Git提示：总是先拉取后推送，以避免冲突
• 分叉forking
  • 将一个GitHub存储库的副本复制到你的GitHub账户中，这样就可以使用自己的副本，一旦进行了分叉处理，就需要将其克隆到自己的计算机上
• 拉取请求 pull request
  • 你的分叉副本不再直接连接到它被分叉的原始存储库，将无法推到原始存储库。如果有一些自认为对原始项目有价值的东西，那么可以执行拉取请求，请求拥有者将你的更改拉入原始主服务器中
  • 还可以对自己有权访问的repo执行拉取请求，而不仅是对已经进行分叉处理的存储库。例如在主项目分支上创建了一个分支，那么可以执行一个拉取请求，让团队检查所做的工作，并在合并更改之前提供反馈

4.2. GitHub gitub.com

是一个托管Git项目的服务。GitHub和类似的服务主要是围绕Git的基于Web的包装器，提供诸如问题跟踪、代码审查工具和用于浏览文件和历史的Web UI等功能。

4.2.1 其他针对企业级项目的Git托管服务

• Beanstalk （beanstalkapp.com）
• GitLab（gitlab.com） 对公共项目是免费的
• Bitbucket（bitbucket.org）

第四部分 JavaScript行为

第21章 JavaScript简介

JavaScript在1996年由欧洲计算机制造商协会（ECMA）标准化，因此有时它被称为ECMAScript

1. JavaScript是什么

• JavaScript是一种轻巧但是非常强大的脚本语言，在浏览器中、固有程序、PDF、电子书，甚至网络服务器中都需要JS
• 一种动态的编程语言，不需要任何形式的编译器，浏览器能有效地读取代码
• JS也是松散类型的编程语言，意味着在JS中不需要解释变量是什么
• 是一个客户端脚本语言。

2. JavaScript能做什么

• 对网站添加交互以及自定义行为
• 网页上的所有元素、属性和文本都能通过使用DOM的脚本来获得
• 对用户的输入做出反馈
• 变更网页内容、CSS样式或浏览器的行为
• 无需重新载入整个网页，只需要来自服务器的内容和信息，同时根据需要将其载入当前文档，这称为Ajax
• 弥补浏览器嵌入功能缺失的不足，或者将新浏览器中的一些功能添加到旧浏览器中，这些种类的脚本语言称为shim或polyfill

3. 给网页添加JavaScript

3.1. 添加脚本的方法

3.1.1 嵌入的脚本

• 在文档中嵌入一个脚本，只需要添加代码作为script元素的内容<script>代码...</script>
• 对于使用更严格的XHTML语法编写的文档，必须通过将代码包装在以下包装器中，将script元素的内容标识为CDATA：

3.1.2 外部脚本

在外部文件中嵌入一个脚本，并把它链接到网页，使用src属性，通过URL指向脚本文件，脚本元素中没有内容。<script src="my_script.js"></script>

• 优势：可以将相同的脚本用于多个网页
• 缺点：每个外部脚本都需要一个额外的服务器HTTP请求，这又会减慢运行速度

3.2. 脚本位置

• script元素可置于文档的任何位置，但普遍位置是文档的head和body的末尾
• 对大多数脚本而言，</body>标签之前的文档结尾是最合适的位置，因为浏览器会用于解析文档及其DOM结构。此时使用脚本，信息既是可用的，又运行迅速。此外，脚本下载以及运行阻碍了网页的显示，所以将脚本置于底部有助于改善性能。
• 然而，大多数情况下，可能在主题完全下载之前就让脚本做一些事情，因此，置于head中会收获更好的性能。

3.3. JS内置功能

3.3.1 alert()

向用户提供一个告示

3.3.2 confirm()

要求用户赞成或拒绝一项行为

3.3.3 prompt()

要求用户输入

4. 基础

4.1. JS普遍的语法规则

4.1.1 JS是区分大小写的

4.1.2 忽略空白

如制表符、空格等空白是被忽略的，除非它们是位于引号中的一串文本。这些只是为了方便人类

4.2. 语句

一个脚本由一系列语句构成。一个语句就是一个指令，告知用户做什么，语句最后的分号意味着这是指令的末尾。一个换行将会引发一个指令的结束，但最好用分号结束每个声明

4.3. 变量

变量就像一个信息容器。可以给它命名并且赋值，值可以是一个数字、一个字符串、DOM中的一个元素，或者一个函数。有助于日后通过名称来引用该值

4.3.1 声明变量

• 通过关键词var声明变量
• 声明变量也可以没有关键词。关键词会影响脚本中能够获取信息的那部分

4.3.2 赋值变量

• 单等号=表示赋值
• 可以通过重新声明来随时改变变量值

4.3.3 命名规则

• 必须以字母或下划线开始
• 在任何组合中必须包含字母、数字和下划线
• 不包含空格字符，可以使用下划线，或字母大写来替代
• 不包含特殊字符（如!、.、,、/、\、+、*、=）

4.4. 数据类型

4.4.1 未定义的 undefined

如果声明了一个变量，但没有赋值，那么该变量就包含一个undefined值

4.4.2 null

对变量赋值一个null，简单来说，定义该变量，但没有给予固定值

4.4.3 数字

可以使用+、-、*、/来进行加减乘除运算

4.4.4 字符串

• 在一组单引号或双引号中的字符。
• 使用+可将字符串连接为一个长字符串
• 如果将一个字符串和一个数字连接，那么JS会假定该数字应该视作一个字符串

4.4.5 布尔运算值

• 真值：true
• 假值：false
• 某种意义上说，JS的所有内容都具备一个固有的真值或假值，例如：null、undefined、0以及空字符串""都是固有的假值。而其他值则是固有的真值。虽然与布尔值不完全相同，但通常称为truthy和falsy

4.4.6 数组

一群数值的集合，这些数值能分配给单独的变量。数组中的数值依据它们在列表中的顺序号被检索来引用，第一个数字索引号是0

4.5. 比较运算符

在比较值中，我们做了断言，目标是获得固有真值或固有假值的结果

4.5.1 等于 ==

equal to

4.5.2 不等于 !=

4.5.3 等同于 ===

identical to

4.5.4 不等同于 !==

4.5.5 大于 >

4.5.6 大于等于 >=

4.5.7 小于 <

4.5.8 小于等于 <=

4.6. 数学运算符

4.6.1 加减乘除 +、-、*、/

4.6.2 +=

把值加到自己，a+=5相当于a=a+5

4.6.3 ++

增大数字的值 ，每次增加1，a++相当于a=a+1

4.6.4 --

减小数字的值 ，每次减小1，a--相当于a=a-1

4.7. if/else语句

• JS用来获取问题真假的方式
• 条件语言的结构：

if(true){
    //do something.
}else{
    //do other thing
}

4.8. 循环

4.8.1 for循环

基本结构：

for(initialize the variable; test the condition; alter the value;){
    //do something
}

• for()语句
  • 表述为：如果条件每次都是对的，就继续做下去
• var i=0;
  • 创建了一个值为0的新变量i
• i<=2;
  • 只要i小于或等于2，就可以继续循环
• i++
  • 循环运行时对i值加1。浏览器足够智能，这三部分有一部分缺失，循环就不能进行
• {script}
  • 每循环一次，{}中的内容就会运行一次，i变量也可以在循环执行的代码中使用

4.9. 函数

• 函数结构：function () {...}

4.9.1 JS的原生函数

• alert()、confirm()、prompt() 会产生浏览器级别对话框
• Date() 返回当前的时间和日期
• parseInt("123") 把一个包含数字的字符串数据类型变为一个数字数据类型
• setTimeout(functionName, 5000) 在以后运行一个函数

4.9.2 自定义函数

• 创建函数：function name() {...}
• 调用函数：name()
• 参数：函数运行时所使用的值或数据
• 返回值：函数中的return关键词能有效地将该函数转化为一个有动态值的变量。return关键词有一个特点：一旦JS得到返回值，那么函数也就结束了

4.9.3 变量作用域和var关键词

• 变量作用域（scope）：变量的可用性。
  • 全局变量：页面中能被任何脚本使用的变量
  • 局部变量：只有在本函数中使用的变量
• JS变量使用函数来界定其作用域。
  • 如果一个变量定义于函数之外，那么它就是全局变量。
  • 当在函数中定义变量：
    • 希望它是局部变量时，通过在变量名称前添加var关键词来实现；
    • 为了将函数中的局部变量转化为全局变量，需要忽略var关键词。
• 将变量置于全局作用域之外，IIFE（Immediately Invoked Function Expression，立即调用的函数表达式）
  • 如果要确保所有的变量都在全局作用域之外，可以将所有的JS放在如下的封装中：(function(){...}())
  • 全局变量的问题是，在页面中可以在所有的脚本中共享。全局变量越多，就越有可能陷入一种“冲突”，即全局变量名与你所设定的相同，这可能导致变量无意中被重新赋值，而这又会导致脚本出错。

5. 浏览器对象BOM

除了能在页面中控制元素外，JS也可以实现对浏览器窗口本身的访问和操作。例如：获得或替换浏览器地址栏中的URL，打开或关闭浏览器窗口，...

• 在JS中，浏览器是window对象。window对象有若干个可以用来与之交互的属性和方法。

属性/方法	描述
event	代表事件的状态
history	用户已经在浏览器窗口中浏览的URL
location	对地址栏中的URL提供读/写的权限
status	设置或返回窗口状态栏中的文本
alert()	显示一个有详细信息的警示窗口和一个OK按钮
close()	关闭当前窗口
confirm()	显示一个有详细信息的对话框、ok按钮以及一个取消按钮
focus()	在当前窗口设置焦点

6. 事件

• 事件句柄“侦听”某些文档、浏览器或用户操作，并将脚本绑定到这些操作。
• 在脚本中，事件是由一个事件句柄来识别的。

事件句柄	事件描述
onblur	失去焦点的元素
onchange	表单字段的内容被更改
onclick	鼠标单击一个对象
onerror	当文档或图像加载时产生的错误
onfocus	元素获得焦点
onkeydown	按下键盘上的一个键
onkeyup	松开键盘上的一个按键
onload	图像或页面完成加载
onmousedown	按鼠标按钮
onmousemove	移动鼠标
onmouseout	从元素上移开鼠标
onmouseover	鼠标经过元素
onmouseup	放开鼠标按钮
onsubmit	在表单中单击提交按钮

6.1. 事件绑定

HTML4.0使得脚本与页面中的事件绑定，这些事件可以是由用户、浏览器本身或者其他脚本引起的。

6.2. 常用的对页面内项目应用事件句柄的方法

6.2.1 作为一个HTML属性

设定函数在标签的属性中运行。应避免使用。<body onclick="myFunction();"></body>

6.2.2 作为一个附加给元素的方法

• 使用window对象，附加到window的事件都应用于整个文档。
• window.onclick=myFunction;有些过时。
• 可以使用一个匿名函数而不是预定义函数：window.onclick=function(){}
  • 这个方法简单且易于维护。但有一个相当大的缺点：每次只能绑定一个事件，后添加的脚本会覆盖先添加的。

6.2.3 使用addEventListener()

• 使用window对象，附加到window的事件都应用于整个文档。
• 这个方法可以保持脚本中的逻辑，且可以运行单一对象的多个绑定。
• window.addEventListener("click",myFunction);
• 也能在匿名函数下使用。window.addEventListener("click",function(e){});

第22章 使用JavaScript和DOM

1. DOM简介

DOM为我们提供了一种访问和操作一个文档内容的方法。DOM也可以使用任何XML语言来完成，DOM也可以被其他语言访问，如PHP、Ruby、C++以及其他更多语言

• DOM是一种HTML和XML页面的编程接口（API），提供了一种文档的结构化地图，还有一组方法，以便与所含元素交互。实际上，就是把我们的标记方式转换成JS（和其他语言）可以理解的格式。从页面的doctype到文本中的每个文字，都可以通过DOM来访问并通过JS操作

1.1. 节点树

可以简单地把DOM看作文档树。页面内的每个元素都称为一个节点。元素、属性和内容是DOM节点树的所有节点。DOM是节点的集合：

• 元素节点
• 属性节点
• 文本节点

1.1.1 访问DOM节点

DOM中的document对象标识网页本身，且往往会作为DOM抓取的起点。

• getElementsByTagName() 通过元素名称访问节点
  • 此方法可以检索参数指定的任何元素或多个元素，将其包含在集合（collection）或节点列表（nodeList）中，节点按从上到下的顺序排列。nodeList的行为就像是数组，可以用索引来引用其中的特定节点
• getElementById() 通过id属性值访问节点
  • 此方法根据元素ID来返回一个单独的元素，把ID作为参数传递给该方法。
• getElementsByClassName() 通过类属性值访问节点
  • 这是一种比较新的访问DOM节点的方法，在IE8或更低版本中无法工作。
  • 以class属性值为基础来访问文档中的节点，返回一个节点列表
• querySelectorAll() 通过选择器访问节点
  • IE7或更低版本不支持
  • 允许访问CSS样式选择器代表的DOM节点
  • 返回一个nodeList，即使选择器只匹配一个元素
• getAttribute() 访问属性值
  • 获得附加到一个元素节点的属性值，参数是属性名

1.1.2 nodeList

nodeList是活动集合，如果在一个nodeList中循环遍历操作文档，可能会陷入无限循环（如，遍历所有段落并在此过程中添加新段落）

1.1.3 操纵节点

• setAttribute() 设定某属性为一个新的值。需要两个参数：要更改的属性、新的属性值
• innerHTML 提供了一个简单地访问和改变文本和标记元素的方法
• style 添加、修改或删除一个元素的样式，就像使用内联style属性一样。
  • 在JS和DOM中，CSS内有连字符的属性名都改为首字母大写的方式，这样-号就不会被误认为操作符

1.1.4 添加和移除元素

通过添加和删除节点来更改文档结构本身

• createElement() 创建一个新的元素，接受一个参数：需要创建的元素
• createTextNode() 为已经创建的元素或者页面上的元素输入文字，提供哟个文本字符串作为参数。
• appendChild() 将参数作为调用该方法的元素的子元素，需要一个参数：需要添加到DOM的节点
• insertBefore() 在一个元素之前插入另一个元素，需要两个参数：需要插入的节点、在哪个元素前面插入。调用该方法的元素是要添加元素的父元素
• replaceChild() 用一个节点取代另一个节点，包含两个参数：新的子节点、被取代的节点。调用该方法的元素是取代元素的父元素
• removeChild() 将一个节点或整个分支从文件树中移出去。需要一个参数：要移除的那个节点，需要所移除节点的父元素来调用

1.1.5 浏览器战争

需要支持旧版本IE的用户的话，有一组工具可以使用，比如polyfill和拥有很多helper函数的JS库，使得在不同的浏览器之间经常遇到的一些小怪事变得规范

2. polyfill

polyfill是一种模仿未来API并为旧浏览器提供后备功能的shim（衬垫）。大量的polyfill都有特定的工作任务，如使旧版本的浏览器识别新的HTML5元素和CSS3选择器，以及一旦问题出现就立即出现的新功能。

2.1. HTML5 shim（shiv）

如果不需要支持IE8及更早版本，就不需要HTML5 shim。

• 工作方式：运行DOM以寻找IE不能识别的元素，立即使用相同的可识别元素将其替换，从而使它们在DOM中对IE可见。
• shim必须在文档的head部分进行引用，以便能够在完成页面显示前将这些新元素“告知”IE。脚本在特定于IE的条件注释中被引用，且仅当浏览器小于IE9时才会运行：

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

• 禁用或不可用JS的较老版本的IE将接受不具有样式的元素

2.2. Selectivizr

如果不需要支持IE8及更早版本，就不需要Selectivizr。

• Selectivizr可以使旧版本的IE正确处理复杂的CSS3选择器。如:nth-child和::first-letter。
• 可以使用JS提取和分析样式表的内容，并修补浏览器原生的CSS解析器的缺陷所产生的漏洞。
• Selectivizr必须和JS库一起应用，指向脚本的链接位于指向库.js文件的链接之后的IE条件注释中

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
    <script type="text/javascript" src="selectivizr.js"></script>
    <noscript>
        <link rel="stylesheet" href="[fallback css]" />
    </noscript>
<![endif]>

• 因为撇开了原生的CSS解析器，所以在可用的浏览器中性能会有一些损失

2.3. Picturefill（自适应图像polyfill）

Picturefill支持picture元素，srcset和sizes属性，以及与基于视窗大小和分辨率交付图像相关的特性。

• 要使用Picturefill，请下载脚本并将其添加到文档的头部。第一个脚本为不能识别它的浏览器创建一个picture元素，第二个脚本调用Picturefill脚本本身，async属性告诉浏览器可以异步加载Picturefill

<head>
    <script>
        //Picture element HTML5 shiv
        document.createElement("picture")
    </script>
    <script src="picturefill.js" async></script>
</head>

• 缺点是没有JS的浏览器也不支持picture元素，只能看到图片的alt文本

3. JS库

一组预先写好的函数和方法，可以在自己的脚本中使用它们来完成常见任务，或简化任务的复杂性

• 缺点：一般而言，在一个大的.js文件中含有所有的功能，因此要求用户下载许多用不到的代码。

3.1. jQuery和其他库

免费的、开放的资源。能够用更方便的语法操作CSS、JS和DOM。

• 能够使用jQuery UI函数库来补充jQuery，增加了很多界面元素，诸如日程小窗口、拖放函数、扩展折叠列表、简单的动画效果。
• jQuery Mobile是另一个基于jQuery的库，提供了UI元素和旨在完善各种移动浏览器和各种怪癖的polyfill。

3.1.1 如何使用jQuery

下载js文件，将其装在服务器上并在script标签上指向它，就可以使用了。它含有所有预先编写的函数和语法快捷键。

• jQuery有一种称为就绪事件的语句，它可以检查文件并等待，直到可以操作。
• 如果要对DOM做任何事情，最好从设置脚本的阶段开始，在自定义script或js文件中包含此函数，其实是个不错的想法：

<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
    ...
})
</script>

3.1.2 使用jQuery编写脚本

• 内置的特性检测脚本和polyfill集合
• 用户选择元素的更短的、更直观的语法（jQuery的选择器引擎）
  • $("CSS选择器")
  • 允许以CSS都做不到的方式来将对象连在一起，如获取一个元素的父元素。$("sth").parent()

3.2. MooTools

3.3. Dojo

3.4. Prototype

4. Ajax是什么

异步JS和XML（Asynchronous JavaScript And XML），页面可以在后台从服务器获取数据，可以在更新页面的同时和用户进行顺利实时的交互，而无需重新加载页面。

• 不是一个单纯的技术，而是结合HTML、CSS、DOM和JS，包括XMLHttpRequest对象，允许数据以异步方式传输。Ajax可以为数据使用9哦那个XML，但更常使用JSON（JavaScript Object Notation，JavaScript对象符号）来进行数据交换。