JavaScript基础知识与Flex布局详解-优快云博客

本文介绍了JavaScript的基本数据类型，包括Number、String、Boolean等，并讨论了变量提升的概念和作用域，如全局作用域、函数作用域和块级作用域。接着详细讲解了Flex布局，包括flex-direction的使用，如row、column等，以及justify-content和align-items的子元素排列方式。此外，还简要提到了CSS的grid布局。

JavaScript的数据类型都有什么？

基本数据类型：Number、String、Boolean、Null、Undefined

复杂数据类型：Object、 Function、Array、Date、RegExp2

2.什么是变量提升

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

变量提升:用var定义变量，变量会提升到顶部，值为undefined

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

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

3.js作用域

全局作用域函数作用域块级作用域

父元素属性

flex-direction调整主轴方向

row 行排布 row-reverse 同一行反向排布

column 列排布 column 同一列反向排布

justify-content 主轴子元素排列

flex-start    从头部排列
flex-end   从尾部排列
center    居中排列
space-around 平分剩余
space-between 两边贴边，平分剩余

align-items 侧轴方向，子元素的排列

flex-start   从上到下
flex-end   从下到上
stretch    拉伸（子元素去掉高度）
center    居中

grid布局

 <div class="container">
    <header></header>
    <sidebar></sidebar>
    <content></content>
    <footer></footer>
  </div>

css

    .container {
      width: 300px;
      height: 400px;
      /* border: 1px solid #000; */

      display: grid;

      /* 设置列宽和行高 */
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px 100px;

      /*间隔*/
      grid-row-gap: 10px;
      grid-column-gap: 10px;

      /* 进行位置排布 */
      grid-template-areas:
        "header header header"
        "sidebar content content"
        "sidebar content content"
        "footer footer footer"
      ;


    }

    /*给子元素起名字*/
    header {
      grid-area: header;
      background: #ef757f;
    }

    sidebar {
      grid-area: sidebar;
      background: #ffc65f;
    }

    content {
      grid-area: content;
      background: #70cfff;
    }

    footer {
      grid-area: footer;
      background: #73db91;
    }