flex布局 js基础

flex布局

display：flex； 弹性盒子

1）flex-direction 调整主轴方向

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

2）justify-content 主轴子元素排列

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

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

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

4）flex-wrap属性 子元素是否换行

wrap    换行
no-wrap    不换行

5）flex-flow 属性： 复合属性，flex-direction和flex-wrap

flex-flow:row-wrap

6）align-content属性 子元素整体，在父元素中的对齐方式

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

---

子元素属性

1）flex属性 份数

flex:1

2）align-self属性 自己的对齐方式

stretch         拉伸
center          居中
start           左对齐
end             右对齐

3）order属性 排序

---

​

JS基础 **js的变量**

​

1）var定义的变量会使变量提升

1.例如:

console.log(num)   //可以在没创建前输出  提升
var num = 100      //如果说不想让变量提升的话，可以使用let和const来定义变量

2）定义的函数也会变量提升

1.例如：

Demo()                //可以在封装函数前进行调用，函数的提升
function Demo(){
    var num = 100     //局部变量
    console.log(num)
    num = 100         //全局变量
}

3）函数分为两种

1.普通函数

function Demo(){
    console.log(this)
}
Demo()  //调用函数   普通函数的this指向是指向windows的

2.构造函数

function Demo(){
    console.log(this)
}
new Demo()  //调用函数  使用new调用  就是构造函数了，并且里面的this指向和普通函数的this指向是不一样的，构造函数的this指向是指向构造对象的

4）改变this指向的三个方法

1.call

function Demo(name,age){
    console.log(this)
}
var obj = {}
Demo.call(obj,'小崔',19)   //原本的Demo的this指向是windows，通过call进行修改this指向
                          //call是立即执行的

2.bind

function Demo(name,age){
    console.log(this)
}
var obj = {}
//调用有两种方法
//第一种
Demo.bind(obj,'小崔',19)()   //他不会立即执行 需要在后面再次调用一次
//第二种
let f = Demo.bind(obj,'小崔',19)   //把它赋值到f
f()                               //在调用f

3.apply

function Demo(name,age){
    console.log(this)
}
var obj = {}
Demo.apply(obj['小崔',19])  //调用的话需要添加数组[]包裹 立即执行

总结

call：立即执行

apply：立即执行 参数要放到数组中

bind：不会立即执行

---

驼峰式命名法

驼峰命名法分为两种

1.小驼峰

function getBook(){
    //首字母不大写，后面的单词首字母大写  小驼峰
}

2.大驼峰

function GetBook(){
    //首字母大写，并且后面的单词首字母也大写
}