前端3+1(Day11)11.2(Front end 3 + 1 (Day11) 11.2)

前端3+1(Day11)

常见css布局方式

  • 传统盒模型布局
  • 文档流布局

    块级元素占一行,行内元素共享一行

  • 浮动布局

    float,会脱离文档流

  • 定位布局

    就是使用position

  • flex布局
  • 常见属性父盒子

    flex-direction:定义文档的书写方向,就是主轴的方向

    flex-wrap:看换行的样式

    flex-flow:就是flex-direction和flex-wrap的简写

    justify-content:子容器在主轴的排列方式

    align-content:多根轴线的对齐方式

    align-items:子容器在交叉轴的排列方式

  • flex-direction:定义文档的书写方向,就是主轴的方向
  • flex-wrap:看换行的样式
  • flex-flow:就是flex-direction和flex-wrap的简写
  • justify-content:子容器在主轴的排列方式
  • align-content:多根轴线的对齐方式
  • align-items:子容器在交叉轴的排列方式
  • 常见属性子盒子

    order:子盒子的排列顺序,数值越小排列越靠前,默认为0
    .ele{
    order: num;
    }

    flex-grow:盒子总宽度-子盒子原来宽度,然后拉升占比例,然后分配
    .ele{
    flex-grow: ; /* default 0 */
    }

    flex-shrink:子盒子超过空间的压缩比例

    flex-basis:子盒子在不伸缩的情况下的原始比例(就是设置的原始的长度)
    .red{
    order: 99;
    flex-basis: 20px;
    /* flex-grow: 1; */
    flex-shrink: 2;
    width: 200px;
    height: 200px;
    background-color: rgb(172, 75, 75);
    }

  • order:子盒子的排列顺序,数值越小排列越靠前,默认为0
    .ele{
    order: num;
    }

  • flex-grow:盒子总宽度-子盒子原来宽度,然后拉升占比例,然后分配
    .ele{
    flex-grow: ; /* default 0 */
    }

  • flex-shrink:子盒子超过空间的压缩比例
  • flex-basis:子盒子在不伸缩的情况下的原始比例(就是设置的原始的长度)
    .red{
    order: 99;
    flex-basis: 20px;
    /* flex-grow: 1; */
    flex-shrink: 2;
    width: 200px;
    height: 200px;
    background-color: rgb(172, 75, 75);
    }

 + flex:是flex-grow,flex-shrink,flex-basis的简写

 + align-self:允许这个一个元素不按照align-item的要求,自己根据交叉轴区排列

   ```css
           .blue{
               /* flex-grow: 1; */
               width: 200px;
               height: 200px;
               align-self:flex-end;
               background-color: cornflowerblue;
           }

3. grid布局,可以进行二维布局
  
  - **当设置为网格,column,float,clear,vertical-align全部失效**
    
  

## 常见css布局

1. 水平垂直布局
  
2. 圣杯布局
  
3. 双飞翼布局
  

## JS常见的内置对象

1. 时间对象Date
  
2. 数组对象Array
  
3. 字符串对象String
  
4. 数学对象Math
  
5. 函数对象Function
  
6. 函数参数集合arguments
  
7. 布尔对象Boolean
  
8. 错误对象Error
  
9. 基础对象Object
————————

Front end 3 + 1 (Day11)

Common CSS layout

  • Traditional box model layout
  • Document flow layout
    Block level elements occupy one row, and intra row elements share one row
  • Floating layout
    Float, which will leave the document flow
  • Positioning layout
    Is to use position
  • flex布局
  • 常见属性父盒子

    flex-direction:定义文档的书写方向,就是主轴的方向

    flex-wrap:看换行的样式

    flex-flow:就是flex-direction和flex-wrap的简写

    justify-content:子容器在主轴的排列方式

    align-content:多根轴线的对齐方式

    align-items:子容器在交叉轴的排列方式

  • Flex direction: defines the writing direction of the document, that is, the direction of the spindle
  • Flex Wrap: look at the style of line breaks
  • flex-flow:就是flex-direction和flex-wrap的简写
  • justify-content:子容器在主轴的排列方式
  • align-content:多根轴线的对齐方式
  • Align items: the arrangement of sub containers on the cross axis
  • Common attribute sub box
    Order: the arrangement order of sub boxes. The smaller the value, the higher the arrangement. The default value is 0
    .ele{
    order: num;
    }
    Flex growth: total box width – the original width of the sub box, then the proportion of the sub box is pulled up, and then allocated
    .ele{
    flex-grow: ; /* default 0 */
    }
    Flex shrink: the compression ratio of the sub box over the space
    Flex basis: the original scale of the sub box without expansion (that is, the original length set)
    .red{
    order: 99;
    flex-basis: 20px;
    /* flex-grow: 1; */
    flex-shrink: 2;
    width: 200px;
    height: 200px;
    background-color: rgb(172, 75, 75);
    }
  • Order: the arrangement order of sub boxes. The smaller the value, the higher the arrangement. The default value is 0
    .ele{
    order: num;
    }
  • Flex growth: total box width – the original width of the sub box, then the proportion of the sub box is pulled up, and then allocated
    .ele{
    flex-grow: ; /* default 0 */
    }
  • Flex shrink: the compression ratio of the sub box over the space
  • flex-basis:子盒子在不伸缩的情况下的原始比例(就是设置的原始的长度)
    .red{
    order: 99;
    flex-basis: 20px;
    /* flex-grow: 1; */
    flex-shrink: 2;
    width: 200px;
    height: 200px;
    background-color: rgb(172, 75, 75);
    }

 + flex:是flex-grow,flex-shrink,flex-basis的简写

 + align-self:允许这个一个元素不按照align-item的要求,自己根据交叉轴区排列

   ```css
           .blue{
               /* flex-grow: 1; */
               width: 200px;
               height: 200px;
               align-self:flex-end;
               background-color: cornflowerblue;
           }

3. grid布局,可以进行二维布局
  
  - **当设置为网格,column,float,clear,vertical-align全部失效**
    
  

## 常见css布局

1. 水平垂直布局
  
2. 圣杯布局
  
3. 双飞翼布局
  

## JS常见的内置对象

1. 时间对象Date
  
2. 数组对象Array
  
3. 字符串对象String
  
4. 数学对象Math
  
5. 函数对象Function
  
6. 函数参数集合arguments
  
7. 布尔对象Boolean
  
8. 错误对象Error
  
9. 基础对象Object