应用视觉设计

视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。

一、box-shadow

box-shadow 属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius 和颜色值。 其中 blur-radius和 spread-radius是可选的。

二、颜色

1、RGB和分裂补色

电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫三原色光模式（RGB Color Model）。 红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）， 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。

设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。

下面是使用分裂补色搭配法创建的三个颜色：

颜色	HEX 颜色码
橙色	#FF7F00
蓝绿色	#00FFFF
树莓红	#FF007F

补色搭配能形成强列的对比效果，让内容更富生机。 但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。 通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。

2、HSL

颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

hsl()使 CSS 更改颜色色调更加方便。 比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 回忆下 hsl() 里面的 s和 l 分辨代表饱和度和亮度。 饱和度代表灰色的占比，亮度代表白色和黑色的占比。 这在你想获取一个基准色的变种的情景下会十分有用。

所有元素的默认 background-color都是 transparent

3、线性渐变

linear-gradient()

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，90deg表示垂直渐变（从左到右），45deg表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序。

例如：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

repeating-linear-gradient()

和 linear-gradient()很像，主要区别是会重复指定的渐变

background: repeating-linear-gradient(90deg, yellow 0px, blue 40px, green 40px, red 80px);

渐变开始于 0 像素位置的 yellow，然后过渡到距离开始位置 40 像素的 blue。 由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 green，然后过渡到距离开始位置 80 像素的 red。

background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);

产生黄黑渐变：

三、transform属性

1、scale()

CSS 属性 transform里面的 scale()函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：

p {
  transform: scale(2);
}

transform属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 :hover），我们可以通过 transform属性非常方便地给元素添加交互。如：

p:hover {
  transform: scale(2);
}

2、skex()

skewX()：使选择的元素沿着 X 轴（横向）翻转指定的角度。

下面的代码沿着 X 轴翻转段落元素24度。

p {
  transform: skewX(24deg);
}

翻转前：

翻转后：

skewY()：使选择的元素沿着 Y 轴（纵向）翻转指定的角度。

3、rotate()

下面的代码图形原地旋转24度。

p {
  transform: rotate(24deg);
}

四、animation

animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。

1、animation

（1）animation-name用来设置动画的名称，也就是要在@keyframes里用到的名称。

（2）animation-duration设置动画所花费的时间。

（3）animation-fill-mode规定动画在播放之前或之后，其动画效果是否可见。

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

（4）animation-iteration-count控制动画循环的次数。如果想让动画一直运行，可以把值设置成 infinite。

（5）animation-timing-function用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。

有一些预定义的关键字可用于常见的选项：

默认值是 ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 ease-out：动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear：动画从头到尾的速度是相同的。

选学内容：cubic-bezier()函数，即贝塞尔曲线，可以更细致地控制动画的速度曲线。

2、@keyframes

@keyframes可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。 如果用一部电影来做类比，那么 CSS 里面的0%关键帧就像是电影里面的开场镜头；100%关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。100%关键帧的 CSS 属性就是元素最后的样子。

3、示例分析

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 为 anim的元素，我们在代码中将它的 animation-name设置为 colorful，同时设置 animation-duration为 3 秒。 然后我们把 @keyframes规则添加到名为 colorful 的动画属性上。 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。 注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

tips：你可以在按钮悬停时使用@keyframes改变按钮的颜色，此时@keyframes规则应该只有一个 100% 条目。

应用无障碍

一、alt

alt属性对于HTML5来说是必须添加的。

背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器不需读取。此时img仍然需要一个 alt属性，但可以设置为空字符串。

注意：对于有标题的图片，依然需要添加alt文本，因为这样有助于搜索引擎记录图片内容。

二、h1—h6

标题标签（包括h1到h6）有很高的使用率，它们用于描述内容的主题。 在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。 这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。

语义化的意思是，标签名能准确地表达它所含内容的信息类型。

在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。也即是说，h1标签的子标签应该使用h2标签，而非h3标签，以此类推。否则，会发生层级的错位，这会让使用屏幕阅读器的用户感到困惑。 尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。 但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。

三、main

main 标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。

main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。

四、article & section

article 是另一个具有语义化特性的 HTML5 新标签。 article 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

注意：section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分，通常必须要有标题。不推荐让无标题的部分使用section。 举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。 当内容组之间没有联系时，我们可以使用 div。

五、header

header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。

六、footer

footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。

七、nav

nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。

对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签，而是使用 footer 标签。

八、audio

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。 这可以通过页面上的文本或与字幕链接来实现。

audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

注意：多媒体内容通常同时包含音频与视频部分， 它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。 一般情况下，网页开发者不负责创建字幕，但是需要将它们添加到多媒体中。

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

九、figure & figcaption

HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。

对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。

因此可以将呈现图表的 div 标签修改为 figure 标签；将用于呈现图表标题的 p 标签改为 figcaption 标签。

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

figcaption 包含在 figure 标签中，并且可以与其他标签组合使用。

十、label

label 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

十一、fieldset & legend

将单选按钮包裹在 fieldset 元素中可以获得更好的可访问性

单选按钮通常成组出现，而且用户必须选择其中一项。fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了。

因此可以将包含单选按钮组的 div 标签替换为 fieldset 标签；将 p 标签替换为 legend 标签。

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

十二、time & datetime

HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。datetime 属性包含有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>

十三、使用自定义 CSS 让元素仅对屏幕阅读器可见

如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

注意区分以下情况：

1、display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。

2、如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。

3、overflow: hidden，屏幕阅读器不会忽略此元素。

十四、使用高对比度文本提高可读性

Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。

十五、色盲用户需求

1、考虑色盲用户的需求设置合适的对比度

颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。 首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。 其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。

色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5:1。 在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。

2、考虑色盲用户的需求仔细选择传达信息的颜色

色盲的形式有很多种， 它的表现可以从对特定波长光波的感知度较低，甚至完全无法看到颜色。 最常见的形式是对绿色的低感知度。

例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。 色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。 在表示重要信息的时候应避免使用这类相近颜色的组合。

十六、为链接添加描述性的文本

屏幕阅读器用户可以选择其设备读取的内容的类型， 包括表示“跳转到”的元素，跳转到主要内容，或者从标题中获取页面摘要。 用户还可以选择只听取页面中的超链接内容。

屏幕阅读器通过阅读链接文本（即 a 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 “click here”（点击这里）或者 “read more”（阅读更多），显然帮助有限。 相反地，应该在 a 标签中使用简洁的描述性语言来为用户提供更多的信息。

也就是说，不要使用类似Click here这种模糊的跳转说明，而是改成如information about batteries这样详细的说明。

十七、accesskey

HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 accesskey 属性可以让使用键盘的用户更高效率地导航。

HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。

<button accesskey="b">Important Button</button>

点击b即可跳转到该处。

十八、tabindex

HTML 的 tabindex 属性有三种与标签焦点相关的功能。 当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。

当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 我们可以通过将其他标签（如 div、span、p 等）的 tabindex 属性值设为 0 来让它们实现类似的效果。

tabindex 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。

注意：使用 tabindex 属性还可以让 CSS 伪类 :focus 在标签上生效。

tabindex 属性还可以指定元素的 tab 键焦点顺序， 将它的值设置为大于等于 1 的整数，就可以实现这个功能。

给元素设置 tabindex="1"，键盘将首先把焦点放在这个元素上。 然后它按照指定的 tabindex 值（2、3 等等）顺序循环，再移动到默认值和 tabindex="0" 项目。

响应式网页设计原则

一、媒体查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局。 视口是指浏览器中，用户可见的网页内容。 视口会随访问网站的设备不同而改变。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。

/*当设备宽度小于或等于 100px 时返回内容*/
@media (max-width: 100px) { /* CSS Rules */ }
/*当设备高度大于或等于 350px 时返回内容*/
@media (min-height: 350px) { /* CSS Rules */ }

二、图片自适应设备尺寸

img {
  max-width: 100%;
  height: auto;
}

设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比。

三、使排版根据设备尺寸响应

除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

• vw：如 10vw 的意思是视窗宽度的 10%。
• vh： 如 3vh 的意思是视窗高度的 3%。
• vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
• vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

视窗单位常用于flex布局中。

弹性盒子（flex）

给元素添加 display: flex 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。

一、flex-direction

只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

注意：flex-direction 的默认值为 row。

二、justify-content

flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。 幸运的是，我们可以通过 justify-content 属性的不同值来实现。

如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列； 如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。 子元素排列的方向被称为 main axis（主轴）。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 justify-content: center;，即 flex 子元素在 flex 容器中居中排列。 其他选择包括：

• flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
• space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
• space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

补充：space-around和space-evenly的区别：https://zhuanlan.zhihu.com/p/304674377

三、align-items

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，定义的是元素的左右对齐方式。

align-items 的可选值包括：

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。

补充：关于baseline的内容：http://www.qiutianaimeili.com/html/page/2021/07/20354eo9zcjqpct.html

四、flex-wrap

flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。

不过，使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

换行方向的可选值有这些：

• nowrap：默认值，不换行。
• wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
• wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

五、flex-shrink

flex-shrink是一个对于flex子元素使用的属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。

子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

六、flex-grow

与 flex-shrink 相对的是 flex-grow：flex-shrink 会在容器太小时对子元素作出调整；相应地，flex-grow 会在容器太大时对子元素作出调整。如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

七、flex-basis

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。

八、flex短方法属性

flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。例如，

flex: 1 0 10px;

会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 、flex-basis: 10px;。

九、order

order 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。order值越大，排得越靠前。

十、align-self

align-self 允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

网格（grid）

注意：在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

一、grid-template-columns & grid-template-rows

在一个网格容器中使用 grid-template-columns 属性可以添加一些列，示例如下：

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}

上面的代码会在网格容器中添加两列，宽度均为 50px。 grid-template-columns 属性值的个数表示网格的列数，每个值表示相应的列宽度。

grid-template-rows同理。

二、网格单位

在 CSS 网格中，可以使用绝对单位（如 px）或相对单位（如 em）来定义行或列的大小。 下面的单位也可以使用：

fr：设置列或行占剩余空间的比例，

auto：设置列宽或行高自动等于它的内容的宽度或高度，

%：将列或行调整为它的容器宽度或高度的百分比。

grid-template-columns: auto 50px 10% 2fr 1fr;

这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。

三、grid-column-gap & grid-row-gap

如果需要在列与列之间添加一些间距，我们可以使用 grid-column-gap：

grid-column-gap: 10px;

这会为我们创建的所有列之间都添加 10px 的空白间距。

grid-row-gap同理。

grid-gap：grid-gap 属性是前面出现的 grid-row-gap 和 grid-column-gap 的简写属性，它更方便使用。 如果 grid-gap 只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。 如果有两个值，那么第一个值表示行间距，第二个值表示列间距。

四、grid-column & grid-row

grid-column 属性是用于网格项本身的属性。

网格中，假想的水平线和垂直线被称为线（lines）。 这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

这是一个 3x3 网格的线条：

要设置一个网格项占据几列，你可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。

示例如下：

grid-column: 1 / 3;

这会让网格项从左侧第一条线开始到第三条线结束，占用两列。

grid-row同理。

五、justify-self

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。 你可以使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：

start：使内容在单元格左侧对齐，

center：使内容在单元格居中对齐，

end：使内容在单元格右侧对齐。

六、align-self

正如能设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿竖直方向的对齐方式。 为此，我们可以对网格项使用 align-self 属性来实现。适用于 justify-self 属性的属性值同样也可用于align-self。

七、justify-items & align-items

我们可以通过上面的方式分别设置子元素的对齐方式，也可以对网格容器使用 justify-items 使它们一次性沿水平轴对齐。 这个属性能接受我们在之前justify-self学到的所有值作为属性值，但与之前不同的是，它会将网格中所有的网格项按所设置的方式对齐。

align-items同理。

八、网格划分

你可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。 可以通过给容器加上 grid-template-areas 来实现：

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";

上面的代码将顶部三个单元格合并成一个名为 header 的区域，将底部三个单元格合并为一个名为 footer 的区域，并在中间行创建了两个区域：advert 和 content。

注意：在代码中，每个单词代表一个网格单元格，每对引号代表一行。 除了自定义标签，你还能使用句点（.）来表示一个空单元格。

九、grid-area

像上一个挑战那样，在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 grid-area：

.item1 {
  grid-area: header;
}

这样，class 为 item1 的网格项就被放到了 header 区域里。 在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为标题区域。

grid-area 属性还有另一种使用方式。 如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：

item1 { grid-area: 1/1/2/4; } /*起始行 起始列 终止行 终止列*/

这里使用了你之前学习的网格线编号来定义网格项的区域。 上例中数字代表这些值：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。

十、repeat()

如果一个网格共有 100 行且每行高度相同， 那我们就需要输入 100 个值，这显然不太实际。 为此，更好的方式是使用 repeat 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

以下为添加 100 行网格的例子，每行高度均为 50px：

grid-template-rows: repeat(100, 50px);

你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。 比如：

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相当于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意：1fr 50px 重复了两次，后面跟着 20px。

十一、minmax()

内置函数 minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。 例如：

grid-template-columns: 100px minmax(50px, 200px);

在上面的代码中，我们通过 grid-template-columns 添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。

十二、auto-fill()

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。

注意：如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。

十三、autofit()

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

注意：如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。

十四、嵌套网格

在网格中创建网格：将元素转换为网格只会影响其直接的后代元素（direct descendants，意思是一个元素的所有后代元素中，父级元素为该元素的所有元素）。 因此，如果我们把某个子元素设置为网格，就会得到一个嵌套的网格。

其他

一、blockquote

blockquote标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

可选的属性：

属性	值	描述
cite	URL	规定引用的来源。

注意：所有主流的浏览器均支持<blockquote>标签，但是没有浏览器能够正确地显示 cite 属性。不过，搜索引擎可能会使用该属性获得更多有关引用的信息。

二、cite

cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

按照惯例，引用的文本将以斜体显示。

用cite标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 a标签中，从而把一个超链接指向该联机版本。

cite标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。cite标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

三、option

option是html固有元素，因而无论怎么修改其CSS在浏览器上都是不起作用的。