前端3+1(Day11)

常见css布局方式

1. 传统盒模型布局

• 文档流布局

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

• 浮动布局

  float,会脱离文档流

• 定位布局

  就是使用position

2. flex布局

• 常见属性父盒子

  • 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: <number>; /* 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

标签：flex,盒子,对象,前端,布局,11.2,grow,Day11,align
来源： https://www.cnblogs.com/summer-like-writing/p/15808482.html