前端3+1(Day11)11.2

前端3+1(Day11)

常见css布局方式

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

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

  • 浮动布局

    float,会脱离文档流

  • 定位布局

    就是使用position

  1. 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
上一篇:Random随机数技术案例


下一篇:php excel导出列超过26个字母处理