首先，经过了一个学期的学习，其实也就一个多月，我终于走完了HTML+CSS阶段，从来到学校到闭组，刚好走完了一整个阶段。下面来为此画上一个圆满的句号吧。
本阶段我一共整理了14篇笔记，敲了16个代码例子，做了4个网页，分别是华为官网、小米商城、自制游戏网页和小米登录表。华为官网是我这个阶段做的第一个网页，其中只是体现出盒子的布局，并没有其他复杂的东西；小米商城是我这几个网页中代码最多，用时最长的网页，内容多、布局复杂，难度主要体现在导航栏、侧拉栏和轮播图；自制游戏网页是特效最好的网页，其中布局较为简单，主要体现出旋转木马、手风琴和魔方三个动画（三个动画的详细制作见笔记：魔方、手风琴、旋转木马）；小米登录表是各方面最简单的网页，因为没有学JS，所以原网页中许多东西都无法实现，所以只用模仿它展示出来的样子就行，但是我多做了一个点击切换的效果（点击切换），即点击登录是登录页面，点击注册是注册页面（纯CSS制作），内容只做了一个登录的，注册的只有盒子，没有内容，这就是我的四个网页。
阶段后，我整理了一个脑图，如下：
阶段走完了，少不了考核，考核的过程中说实话，有一丢丢紧张，毕竟快要闭组了，要抓紧时间结尾了，但是在考核的过程中我发现大部分问题我还是能回答的很好的，有些问题虽然回答的不是很完美，但是也回答了个七七八八，但是还是有些问题没能回答好，flex布局、grid布局、高度塌陷和头部标签上面的几个标签。其中flex布局学习了，但是我的网页中没有用到过，所以对它的印象比较模糊；grid布局是根本没看过；高度塌陷，是因为我的网页有浮动的地方几乎都有固定高度，所以也没怎么去了解它；那几个标签就更不用说了，只是在最开始学的时候稍微了解了一下下，所以在这里，我再给它们做个总结：
1.flex布局
原理：通过给父盒子添加flex属性来控制子盒子的位置和排列方式
1.将父盒子设置为flex布局后，子元素的float、clear和vertical-align属性全部失效
2.属性值：flex-basis:
flex-direction: 设置主轴的方向
flex-wrap: 设置子元素是否换行，默认不换行，装不下会缩小子元素的宽度
justify-content 子元素对齐方式，使用之前先确定主轴是哪一个
justify-content: space-between; 两边贴边，平均分配剩余空间
align-items 设置侧轴上的子元素的排列方式，单行
align-content 换行的情况下，即设置多行的排列方式，在单行下没有效果
flex-flow 是flex-direction和flex-wrap的复合写法
align-self 设置一个盒子在侧轴上的排列方式
order 盒子的排列顺序，默认值是0
2.grid布局
Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而不再是单一的静态页面，可以称之为真正的栅格，grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局。
(1)使用grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行
(2)可以通过minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压
(3)使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
(4)grid-column-gap 创建列与列之间的间距
grid-row-gap 创建行与行之间的间距
grid-gap 默认值为0
grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同
[注意]grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距，间距(Gap)可以设置任何非负值，长度值可以是px、%、em等单位值。
(5)网格线
grid-row-start
grid-row-end
grid-column-start
grid-column-end
默认值为auto
通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1
(6)通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。
(7)grid-template-areas
像网格线名称一样，网格区域的名称可以使用grid-template-areas属性来命名。
(8)【grid-auto-flow】
网格默认流方向是row，可以通过grid-auto-flow属性把网格流的方向改变成column
(9)网格项目可以具有层级和堆栈，必要时可能通过z-index属性来指定
3.高度塌陷
解决方法
1.父级div定义 height
2.结尾处加空div标签 clear:both;
3.父级div定义 伪对象:after 和 zoom
4.父级div定义 overflow:hidden
5.父级div定义 overflow:auto
6.父级div 也一起浮动
7.父级div定义 display:table
8.结尾处加 br标签 clear:both
其中推荐使用第三种，建议定义公共类，以减少CSS代码。
4.了解头部上面那几个标签
1.<!DOCTYPE html> 声明为 HTML5 文档
2. <meta charset="utf-8">声明编码，其中utf-8是万国码
3. <meta http-equiv="X-UA-Compatible" content="IE=edge">使用X-UA-Compatible设置IE8的兼容模式，IE=edge告诉IE使用最新的引擎渲染网页
4.<meta name="viewport" content="width=device-width, initial-scale=1.0">
width:可视区域的宽度，值可为数字或关键词device-width；height:同width；intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别；maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上；user-scalable:是否可对页面进行缩放，no 禁止缩放。
以上就是对这次考核的总结以及问题的整理；
结束即代表新的开始，寒假开启JS之旅。
