CSS

盒模型

• 盒子即为一个容器，分为四部分：Margin(盒子间距），Border（边界），Padding（边界与内容的填充部分，可以通过它改变背景颜色），Content（盒子内的内容)。
  -padding属性设置时，一个值即为四个方向，两个值代表上下和左右，四个值代表上右下左。如果分不清可以直接修改padding-bottom/left/right/top。
  -margin可以把盒子分开。
  -border边界宽度，样式和颜色均可修改（border-radius可以把边界设置为圆角）

布局

• 块级元素会独自占据一行。（display属性定义为block)
  -内联元素不用另起一行，宽高，到顶部，底部的距离都不可以设置，内联元素的宽度即为内容的宽度。（display的属性为inline）
  -行内块状元素，这个元素会和前一个元素排在一行内，而且可以设置宽高和边距。
  -float会让容器漂浮在标准流上面，也可以让两个块级元素排在一行。float：left\right
  会让你的元素从左到右排列。

弹性盒子

• 弹性盒子由两部分组成：弹性容器（.flex-container）弹性子元素（.flex-item）弹性子元素默认在一行内。
• flex-direction可以用来修改子元素的排列方式。
  1. row（从左到右横向排列）
  2. row-reverse(横向反向排列)
  3. column（居左竖向排列）
  4. column-reverse（居左竖向反向排列）
• justify-content（内容对齐，把子元素沿着主轴线对齐）
  1. flex-start（向行头紧挨着对齐）
  2. flex-end（向行尾紧挨着对齐）
  3. center（居中紧挨着对齐）
  4. space-between（子元素平均分布在一行中，两侧无空隙）
  5. space-around（子元素平均分布在一行中，两侧有空隙，空隙为一半间隔）
• align-items(盒子在纵轴方向的对齐方式)
  1. flex-start（最上侧一排）
  2. flex-end（最下侧一排）
  3. center（中间一排）
  4. baseline（与flex-start形式相同）
  5. stretch（横向排列，竖向拉伸）
• flex-wrap（调整子元素的换行方式）
  1. nowrap（默认，所有盒子存放在同一行，盒子可能溢出容器）
  2. wrap（盒子排列为多行，溢出的盒子自动换为下一行）
  3. wrp-reverse（以wrap的排列方式为基础上下翻转）
• align-content（类似于align-items，但它不是调整子元素的对齐方式，而是调整行的对齐方式）
  1. stretch（各行伸展占据剩余空间）
  2. flex-start（向上堆叠）
  3. flex-end（向下堆叠）
  4. center（向容器中间位置堆叠）
  5. space-between（各行平均分布）
  6. space-around（各行平均分布，上下位置有空隙）
• 用order排序(数字越小排位越靠前，包括负数)
• margin：auto（完美居中）
• align-self（设置item自身在纵轴上的对齐方式）
  1. auto
  2. flex-start（上方）
  3. flex-end（下方）
  4. center（中间）
  5. baseline（上方）
  6. stretch（拉伸占据一整行）
• flex（可以设置盒子宽度占比）
  

  JS

  赋值

• js对变量的定义是弱定义
• 用let对新建变量进行声明
• const常用来声明常量
  

  object

• let person中person即为一个对象，其下包含许多元素，我们可以通过.person来调用它的元素
• object，数组，函数，这三种基本数据类型在赋值时，赋值的都是他们的地址，修改会影响它引用的值
  

  函数

• function fname（）{console.log（"文字"）} 这个函数就会在控制台输出：“文字”
  

  循环语句

• for循环和do while循环，与java类似
  

  控制语句

• 用if，else语句来控制，if后面的条件为true或者flase，可以嵌套，但要对应好括号。并且一个else一定要有一个if对应
  

  input标签

• 通过input用户可以输入信息
• 把input标签放在form标签下，通过formname.inputname.value获取用户输入的信息
• 使用document.getElementById（inputId）.value同样可以获取用户输入的信息
• input标签有着许多type属性，可以在网上查询
  

  API

• js已经规定好的函数可以直接使用，可以自行百度
• 弹出警告窗windows.alert（）
• 在控制台打印信息console.log（）
  

  Dom树

• html的嵌套关系使他们构成了一棵树
• 可以通过他们的id获取树上的特定元素document.getElementById
• 也可以获得class为特定值的元素列表document.getElementByClass
  

  innerHTML

• 在树上获取一个特定元素后可以用innerhtml把这个元素储存在一个变量里，但是这样原来的容器就变成了空的。
  document.getElementById("hhhhhh")innerHTML=abc
• document.getElementById("hhhhhh")innerHTML=document.getElementById("hhhhhh")innerHTML+abc这样原容器和变量的内容都存在

第二次培训的内容差不多就这些，感觉内容还是比较多的，弹性盒子也学习了，就是js的内容可能还没有太理解（因为真的很多），之后实践一下再深入了解，应该不会有太大问题。

赵梦