当前位置：网站首页>JS笔记1

JS笔记1

2022-07-17 00:14:00 【Object not found】

当元素没有设置宽高时，如何实现垂直居中显示？

①flex弹性布局

解释：父元素设置宽高大小，子元素不设置

<style>

//父元素增加弹性布局

div

{

display:flex;

width:80%;

height:500px;

flex-direction:row;//设置主轴的方向

justify-content:center;//主轴中子元素的排布方式

align-items:center;//侧轴上中子元素的排布方式

background:

}

div span

{

background:

}

</style>

②定位+transform

div

{

//演示时添加父元素宽高或者只加高度也可以

width:80%;

height:500px;

position:relative;

background:

}

div span

{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

background:

}

③display:table和display:table-cell

注意：

1.display:table-cell会被float和position等属性破坏效果

2.table-cell指的是让标签元素以表格单位格的形式呈现，

vertical-align:用来指定行内元素或表格单位格元素的垂直对齐方式

div

{

//演示时添加父元素宽高或者只加高度也可以

width:80%;

height:500px;

display:table;

}

div span

{

display:table-cell;

//因为是行内元素对齐需要水平和垂直居中哦

vertical-align:middle;

text-align:center;

}

④:before和display:inline-block

div

{

//演示时添加父元素宽高或者只加高度也可以

width:80%;

height:500px;

text-align:center;

}

div::before{

content:””;

height:100%;

vertical-align:middle;

display:inline-block;

}

div span

{

display:inline-block;

}

var、let、const的区别

①可以跨块访问，不可跨函数访问

当调用函数时创建与赋值，调用后销毁

②如果省略var操作符，意为全局变量

注意：局部作用域中定义全局变量难维护，不推荐

在严格模式下，可能会抛出ReferenceError

③var支持预解析，变量提升（变量或函数声明提升到作用域顶部）

④var定义的全局变量可以挂载到window对象，使用window访问

①只能在块作用域访问，不跨块、跨函数访问

②不能重复声明（冗余声明），只能声明一次

③不会变量提升，当创建后未完成语法绑定（声明），访问会抛出异常ReferenceError，变量到可以访问之间的时间称为暂时死区

④let在全局作用域中声明的变量不会成为window对象的属性

var name=”xx”;console.log(window.name);//xx

var age=18;console.log(window.age);//undefined

⑤for循环中的var、let声明（重要，异步）

const

①定义常量，声明后一定要赋值（不赋值报错），定义后不可修改（修改报错）

声明对象时，修改对象内部属性不报错

原因：基本数据类型的值储存栈内存，应用数据类型储存栈区的是对象堆内地址，修改对象属性，不修改对象栈区地址，如果重新给对象赋值会报错

②for循环中不适用，循环中迭代变量（变量自增）

如果声明不修改的变量或每次迭代创建新变量，例如：for-in和for-of循环

	var	let	const
块	√	√（只能在块区域）	√（只能在块区域）
函数	×	×	×
声明	多次	一次	一次
声明赋值分开	√（在局部作用域中，声明未var表示全局变量，不推荐）	√	×（声明后一定要赋值，否则异常）
变量提升	√	×（未语法绑定异常）	×
是否挂载在window	√	×	×
for循环	全局变量，外部可调用，为最后一次结果	局部变量，不可调用	同let（如果变量不修改可使用）