总结的学到的重要知识点：

CSS部分：

浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框的边缘，或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear（消除浮动）：

clear 属性规定元素的那一侧不允许其他浮动元素（left、right、both）。对于css的消除浮动，这个规则只能影响使用消除的元素本身，不会影响其他元素。

定位：常用的（relative相对定位；absolute绝对定位；fixed固定定位）

relative ：

相对于原来位置移动，元素设置此属性之后任然处于文档流中，不影响其他元素的布局；

最外层容器设置了relative定位，在没有设置宽的情况下，宽度是整个浏览器的宽度。

absolute：

元素脱离文档流，如果设置了偏移量，会影响其他元素的位置定位；

绝对定位是相对于里元素最近的设置了绝对或相对定位的父级元素决定的，元素没有设置宽度的情况下，宽度由元素里面的内容决定，脱离文档流原来的位置相当于是空的，下面的元素会将其位置占据；

父类或祖先存在定位元素，那么以该父类的位置进行定位。一般采用“子绝父相”；如果父类元素不需要定位，而子类需要定位，那么父类一般要设置为相对定位relative

fixed：

使元素的位置与文档流无关，因此不占据空间；元素与其他元素重叠。fixed 元素定位相对于浏览器窗口是固定位置。

弹性盒子（display：flex）: 

一种页面需要适应不同的屏幕大小及设备类型时确保元素拥有恰当的行为布局方式。引入弹性盒子模型的目的是提供一种更加有效的方式来对一个容器的子元素进行排列、对齐和分配空白空间。为盒子模型提供最大的灵活性。

@media 媒体查询：针对不同的媒体类型定义不同的样式。可以针对不同的屏幕尺寸设置不同的样式，特别是需要设计响应式的页面时很有用。当重置浏览器的大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

演示：

@media screen and (max-width: 300px) {

    body {

        background-color: lightblue;

    }

响应式布局与自适应布局：

响应式：为确保页面在所有终端上都能显示令人满意的效果。理解为融合了流式布局加弹性布局再搭配媒体查询的技术使用。即：创建多个流式布局，分别对应一个屏幕分辨率范围。也可以看做是流式布局和自适应布局设计理念的融合。特点：每个屏幕分辨率下会有一个布局样式，元素的位置和大小都会发生变化。设计方法：使用媒体查询和流式布局。

自适应布局：

在不同分辨率下创建多个静态布局，每一个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局（页面元素的位置发生改变）。特点：屏幕分辨率发生变化时，页面元素的位置会发生变化，而大小不会变化。 设计方法：使用@media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围下设计可以适配范围内的设备最好的体验，在同一个设备下的布局是固定的。

拓展：流式布局：

是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变，代表作《栅栏系统》。特点：屏幕分辨率变化时，页面元素的大小会变化，但布局不会。

Sass使用：

变量：变量以$符号开头，赋值方法与css属性的写法一样。用到的时候直接调用定义的变量；变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可以在任何地方使用（全局变量）。将局部变量转化为全局变量只需要在其变量后面添加 !global 就可以来实现！

引入：在css3中@import，在css样式表中使用外部的样式表文件，例：@import url（"style/index.css"）  在css3中由于@import 可能会造成延迟加载，有的地方导致没有样式。sass解决了这个问题，他能将多个scss合并为一个。例@import "style/index.scss"

嵌套：允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且让复杂的css结构更易于管理

继承：@extend指令告诉sass 一个选择器的样式从另一个选择器继承，如果一个样式和另一个样式几乎相同，只有少量区别，那么？@extend 继承就会显得很有用。@extend 很好的体现了代码的复用。实例：

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

转化的css代码：

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

混合：Sass中的混合是通过@mixin 指令来定义的，混合容许咱们的定义，能够在整个样式表中重复使用的款式，防止应用无意义的类。

Sass中通过@mixin指令定义混合。

用法：@mixin 在前后面接混合名称和参数以及混合的内容块。在选择器中应用混合，通过@include 来应用混合。@include调用会把混合器中的所有款式提取进去放在@include 被调用的中央。

实例：

@mixin my-text {

    font-size: 12px;

    color: #fdef92;

    font-weight: bold;

}

p {

    @include my_text(); 

}

编译成css：

p {

    font-size: 12px;

    color: #fdef92;

    font-weight: bold; 

}

注意：混合尽管好用，也不能乱用，如果一段代码的应用频率比较高，那么就能够将这段代码形成一个混合。反之大量的重用可能会导致生成的样式表过大，导致加载迟缓。如果能找到一个很好的名字形容这些属性润饰款式，那么就可能结构一个合适的混合器，反之混合器并不适宜。

JS部分：

JS数据类型：两大类（基本数据类型；引用数据类型）

基本数据类型：数值（number）；字符串（string）；布尔类型（Boolean）；空（null）；未定义（undefined）

引用数据类型：object对象；function函数

基本、引入数据类型的区别：数据储存时，基本数据类型在变量中存的是值，引入数据类型在变量中储存的是空间地址；

基本数据类型操作的是值，引用数据类型操作的是空间地址。

JS条件语句：

if（ a == 1 ）{

    console.log(a)

} else if（ a == 2 ）{

    console.log(a)

} else {

    console.log(a)

}

switch（a）{

    case 1：

    console.log(a)

    case 2：

    console.log(a)

    default：// 如果a!==1也!==2,那么就执行这条代码

    console.log(a)

}

JS循环语句：for循环; while循环

DOM操作: 

click事件函数: 三种实现方式: