前端3+1(Day11)11.2

前端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的要求，自己根据交叉轴区排列

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

3. grid布局，可以进行二维布局

• 当设置为网格，column，float，clear，vertical-align全部失效

  1. 网格轨迹：

  • grid-template-columns 定义列

  • grid-template-rows 定义行

  2. 网格单元：网格中的最小单位

  3. 网格线：划分网格的线，称为"网格线"

• 容器属性介绍：

  • display属性：display：grid创建一个网格容器

  • grid-template-columns:属性设置列宽

  • grid-template-rows:属性设置行高

    .wrapper {
      display: grid;
      /*  声明了三列，宽度分别为 200px 100px 200px */
      grid-template-columns: 200px 100px 200px;
      grid-gap: 5px;
      /*  声明了两行，行高分别为 50px 50px  */
      grid-template-rows: 50px 50px;
    }
    

    repeat()函数:接受简化重复的值，repeat(x,y),第一个参数表示重复的次数，第二个参数表示要重复的值

    .wrapper-1 {
      display: grid;
      grid-template-columns: 200px 100px 200px;
      grid-gap: 5px;
      /*  2行，而且行高都为 50px  */
      grid-template-rows: repeat(2, 50px);
    }
    

    auto-fill关键字：表示自动填充，让一行(或者一列)中尽可能的容纳更多的单元格

    .wrapper-2 {
      display: grid;
    /*auto-fill:表示不知道一行多少个，我就是让这一行尽可能多的放，且每一个单元格的列宽为200px*/
      grid-template-columns: repeat(auto-fill, 200px);
      grid-gap: 5px;
      grid-auto-rows: 50px;
    }
    

    fr关键字：就是一种单位，表示一种比例，占几等分，fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

    .wrapper-3 {
      display: grid;
    /*第一个列宽是200px，其他后面的两个站1/3，2/3*/
      grid-template-columns: 200px 1fr 2fr;
      grid-gap: 5px;
      grid-auto-rows: 50px;
    }
    

    minmax()函数，这个会产生一种长度范围，表示长度可在这个范围内，minmax(x,y),接受两参数，第一个是最小值，第二个为最大值

    auto关键字：长度有浏览器决定

    .wrapper-5 {
      display: grid;
      grid-template-columns: 100px auto 100px;
      grid-gap: 5px;
      grid-auto-rows: 50px;
    }
    

    grid-row-gap:设置行间距

    grid-column-gap:设置列间距

    grid-gap:是两者的结合体

    grid-gap：grid-row-gap grid-column-gap

    .wrapper {
      display: grid;
      grid-template-columns: 200px 100px 100px;
      grid-gap: 10px 20px;
      grid-auto-rows: 50px;
    }
    
    .wrapper-1 {
      display: grid;
      grid-template-columns: 200px 100px 100px;
      grid-auto-rows: 50px;
      grid-row-gap: 10px;
      grid-column-gap: 20px;
    }
    

    grid-template-areas,表示定义区域，一个区域由一个或者多个单元格组成

    grid-auto-flow规定着自动布局算法怎样运作，精确指定网格是如何排列的

    .wrapper-2 {
      display: grid;
      grid-template-columns: 100px 200px 100px;
      grid-auto-flow: row dense;   /*dense表示尽可能的不留空*/
      grid-gap: 5px;
      grid-auto-rows: 50px;
    }
    

    .wrapper-1 {
      display: grid;
      grid-auto-columns: 100px;
      grid-auto-flow: column;/*先列后行，就是竖着排*/
      grid-gap: 5px;
      grid-template-rows:  50px 50px;
    }
    

    justify-items：表示设置单元格内容的水平位置(左中右)

    align-items:表示设置单元格内容的垂直位置(上中下)

    .container {
      justify-items: start | end | center | stretch;/*表示stretch，表示充满整个区域*/
      align-items: start | end | center | stretch;
    }
    

    justify-content:整个内容区域在容器里面的水平区域

    align-content：整个内容区域的垂直位置

    .container { 
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly; 
    align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
    }
    

    justify-self:设置单元格的水平位置，但是他只作用于单个单元格。用法和align-items一致

    align-self:设置单元哥内容的垂直位置，但是他只作用于单个项目。用法和align-items一致

常见css布局

1. 水平垂直布局

2. 圣杯布局

3. 双飞翼布局

JS常见的内置对象

1. 值属性

• Infinity：无穷大

• NaN：表示这不是一个数字

• undefined：表示初始值，就是你自己没有赋值

• globalThis：

2. 函数属性

eval(),会将传入的内容当作字符串直接执行

console.log(eval('2+2')) 

uneval(),非标准，不建议使用

isFinite()，判断传入的参数值是否为一个有限数值

parseFloat(),转为字符型

parseInt(string，radix),转为数值型，解析一个字符串，返回指定基数的十进制整数，radix表示要被解析的字符串的基数

3. 基本对象

• Object

• Function

• Boolean

• Symbol

4. 错误对象：

• Error

5. 数字日期对象：

• Number

• BigInt

• Math

• Date

6. 字符串：

• String

• RegExp

7. 数组：

• Array

8. 使用键的集合对象

• Map

• Set

• WeakMap

• WeakSet