8月16日知识总结

flex布局

父元素属性

- flex-direction   调整主轴方向

  ```
  row                   行排布
  row-reverse            同一行反向排布
  column                列排布
  column-reverse        同一列反向排布
  ```

- justify-content        主轴子元素排列

  ```
  flex-start          从头部排列
  flex-end            从尾部排列
  center                居中排列
  space-around        平分剩余
  space-between        两边贴边，平分剩余
  ```

- align-items         侧轴方向，子元素的排列

  ```
  flex-start            从上到下
  flex-end            从下到上
  stretch                拉伸（子元素去掉高度）
  center                居中
  ```

  

- flex-wrap属性      子元素是否换行

  ```
  wrap    换行
  no-wrap    不换行
  ```

  

- flex-flow 属性：  复合属性，flex-direction和flex-wrap

  ```
  flex-flow:row-wrap
  ```

- align-content属性            子元素整体，在父元素中的对齐方式

  ```
  flex-start        侧轴头部排列
  flex-end        侧轴尾部排列
  center            居中排列
  space-around    侧轴平分空间
  space-between    两侧贴边，平分剩余空间
  ```

#### 子元素属性

- flex属性                份数

  ```
  flex:1

- align-self属性        自己的对齐方式

  ```
  stretch            拉伸
  center            居中
  start            左对齐
  end                右对齐
  ```

- order属性       排序

元素分类

     行内元素

     块级元素

    行内块元素

布局分类

1.float    浮动

**浮动元素的顶部，在标准文档流的底部**


1. 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
2. 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
3. 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
4. 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

### 2.position 定位

- relative    相对定位：相对原来位置，偏移一定距离

- absolute  绝对定位：相对于position不为static的父元素，偏移一定距离

  **父相子绝：父元素relative，子元素absolute**

- fixed         固定定位：相对浏览器定位

- static        没有定位：

  

### 3.flex布局

#### 父元素属性

- flex-direction   调整主轴方向

  ```
  row                   行排布
  row-reverse            同一行反向排布
  column                列排布
  column-reverse        同一列反向排布
  ```

- justify-content        主轴子元素排列

  ```
  flex-start          从头部排列
  flex-end            从尾部排列
  center                居中排列
  space-around        平分剩余
  space-between        两边贴边，平分剩余
  ```

- align-items         侧轴方向，子元素的排列

  ```
  flex-start            从上到下
  flex-end            从下到上
  stretch                拉伸（子元素去掉高度）
  center                居中
  ```

  

- flex-wrap属性      子元素是否换行

  ```
  wrap    换行
  no-wrap    不换行
  ```

  

- flex-flow 属性：  复合属性，flex-direction和flex-wrap

  ```
  flex-flow:row-wrap
  ```

- align-content属性            子元素整体，在父元素中的对齐方式

  ```
  flex-start        侧轴头部排列
  flex-end        侧轴尾部排列
  center            居中排列
  space-around    侧轴平分空间
  space-between    两侧贴边，平分剩余空间
  ```

#### 子元素属性

- flex属性                份数

  ```
  flex:1
  ```

  

- align-self属性        自己的对齐方式
  stretch            拉伸
  center            居中
  start            左对齐
  end                右对齐

- order属性       排序

### 4.grid布局

- grid-template-columns属性 ：设置列宽

  css
  .grid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;            #各占三分之一
      column-gap:24px;                            #列间距
      row-gap:24px;                                #行间距
  }
 

- align-items    竖直方向上对齐子元素

- justify-items    水平方向上对齐子元素
  center        居中对齐
  end            靠右对齐
  space-between    两端对齐
 

- justify-content    对轨道水平方向对齐

  ```
  center               居中对齐
  end                    靠右对齐
  space-between         两端对齐

- align-content        对轨道竖直进行对齐
  center        居中对齐
  end            靠下对齐

变量提升

1.用var定义的变量会变量提升

  2.定义的函数会变量提升

  3.在函数体内，直接定义变量 num=100，在全局作用域下也可以访问

js作用域

全局作用域

- 函数作用域

- 块作用域

数据类型

基础数据类型：

Number  String  Boolean  Undefined  nul symbol

- 复杂数据类型

Object  Array  Function