js基础与flex布局

最新推荐文章于 2024-05-31 14:50:36 发布

原创最新推荐文章于 2024-05-31 14:50:36 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文深入探讨JavaScript中的变量提升和函数提升现象，解析var关键字导致的变量作用域问题，并介绍Flex布局的相关属性，如flex-direction、justify-content、align-items等，帮助理解前端开发中的布局技巧。

1.变量提升

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

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

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

   // 变量提升:用var定义变量，变量会提升到顶部，值为undefined
     console.log(num)
     var num = 100;


    /**********************/

    //var 变量提升
    var num;
    console.log(num)
    num = 100;

    console.log(num)
    num = 100;


    /*********************************/
    // var num=100;          //③全局变量，在任何位置可以访问
    function Demo() {

      // var num = 100;      //①局部变量
      num = 100;          //②定义的全局变量，在函数外部可以访问

    }
    Demo()
    console.log(num)


    /****************************/

    // 函数也会提升
    Demo()          //100

    function Demo() {
      num = 100;
      console.log(num)

    }

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属性排序