我们这一章是“列阵”，经过一整章内容的布置，到这里我们的阵型也就摆的差不多了。到这里，项目的目录结构已经建好，页面结构已经划分清楚，设计风格也有了样子，最基础的组件也都准备好了。再往后的开发，就是在这个搭好的架子上进行添砖加瓦。

在我们这一章里，主要分成两部分内容。一部分是基础结构的建立，这里面包括建立项目目录和基础文件，确立页面的布局方式，以及开发布局需要的组件。而另一部分是一些基础组件的引入和开发，包括字体图标的使用、表单元素的设计与开发和按钮的设计与开发。这两部分内容由于存在依赖关系，所以在章节安排的时候是交叉着进行的。下来我们就来回顾一下这章里各节的内容，然后以问题的形式让同学们自测一下，看是不是对这些内容都掌握了。

一、项目的建立
这一节里我们建立了项目的目录结构，目前主要使用 src 和 demo 两个目录，src 用来存放样式框架内部的代码，而demo 目录用来存放这些样式的测试用例。其中在 src 下有一个 tuitui-ui.css 这个主文件，用来组织框架中的各种组件。这一节中最重要的知识点就是 Rem 布局中基准尺寸的指定和屏幕的适配。下面来看一下，下面几个问题是不是都能回答的上来。

• 如果让你设计一个样式的项目，你会把文件按哪几类拆分出来？为什么这么做？
• 是否了解媒体查询？它是什么原理？
• 手写一下使用媒体查询的情况下，指定当屏幕在 300px 到 400px 之间时某个元素的样式。

二、字体图标的使用
字体图标的使用这一节主要介绍了 Web 开发里图标的用法。首先介绍了文字图标和图片图标的优缺点；然后是结合着我们项目里使用的 Font Awesome 字体图标库介绍了字体图标的原理；再然后讲解了字体图标 Font Awesome 的引用和使用方法，这其中还插入了对视口的介绍以及使用 meta 标签指定页面的属性；最后就是对图标的定制，包括修改图标的样式、大小和旋转效果。这一节里会有以下的问题：

• 在开发过程中，你平时都是怎么处理需要用到的图标的？
• 字体图标相对于传统的图片图标，有哪些优点？
• 字体图标是什么原理？有哪些局限性？
• 使用 CDN 的方式引入静态文件有什么好处？
• viewport 是什么？在移动端的开发中，为什么通常要修改 viewport 的默认值？
• 图标的旋转效果，是怎么实现的？

三、页面布局的开发
这一节我们讲了页面最基本的上中下三段式的布局，介绍了固定定位常见的用法并使用固定定位的方式固定头部标题栏和底部导航栏的位置，而中间内容区使用的是普通的流式布局，最后还使用固定定位实现了一个遮盖全屏的蒙版层。下面看看这些内容可以引申出哪些问题：

• 上中下三段式布局怎么实现？是不是还有其他的实现方法？至少说出两种。
• 固定定位元素水平竖直居中都有哪几种方式？最少说出两种。
• 使用固定定位的元素，起点坐标会在哪里？
• 假如给一个固定定位的元素“width: 50%;”，这个 50% 的宽度是相对谁的？
• 如何使用固定定位实现页面蒙版？有哪两种实现方式？

四、布局组件的开发
布局组件的开发就是在页面布局的基础上，填充了头部标题栏和底部导航栏的样式。这一节里最重要的就是介绍了弹性布局的基础用法，并使用弹性布局完成了布局组件的开发。关于这块内容，可能会有下面的问题出现：

• 谈一下弹性布局，以及它的优势。
• 上一节中开发的页面布局用弹性布局怎么实现？
• 弹性布局中，用什么方式调整弹性盒子拉伸和压缩情况的？
• “flex: 1;”表示的是什么意思？它是哪几个属性的缩写?
• 单行文本竖直居中都有什么实现方式？
• 单行文本超长时，怎么用 CSS 隐藏超长部分，并显示省略号？

五、表单元素的开发
在表单元素的开发中，我们最先实现了一个 Panel 面板，用来承载表单元素的内容；然后实现了基础的输入框，带警示功能和带一键清空功能的输入框；最后实现了表单中的单选和多选的样式。这一节开发的工作比较多，而涉及到的知识点不算多，下来我们看一下这一节有什么内容：

• 什么是绝对定位？和固定定位有什么异同？
• 绝对定位坐标的参考值是谁？宽度和高度的参考值又是谁？
• 隐藏一个元素的方法有哪些？试着说出三种，以及它们的不同点。
• 单选和多选的开发中，怎样在父元素标记选中状态，然后让子元素的样式跟着调整？

六、按钮的开发
最后一个内容，就是按钮的开发，这一节里我们开发了几种不同用途和不同尺寸的按钮。这一节的内容大多在设计上，下面我们来看看从这节能提出哪些问题：

• 在设计一个组件的时候，希望它有多种不同的样式，应该怎么做？
• 怎样从多个角度定制同一个组件，让他们进行任意的排列组合？
• “user-select:none;”属性有什么作用，它的兼容性怎么样？
• vw 和 vh 单位有什么用，相对于百分比有什么好处？

结语

到这里，这一章“列阵”的工作就完成了。这一章奠定了这个项目的基础，搭建出了一个基本的框架。我们这部分的章节结构如下：

下一章我们即将进入“操练”环节，开始大批量的进行组件的开发。本章仍然算是准备工作，所以基础知识的部分介绍的比较多，而下一章开始，我们将要更多的介绍各种组件的设计思路和开发技巧。好，我们这一章的内容就到这里。