我们要讲什么
- 上下左右居中的几种实现。
- ECMAScript核心语法结构
上下左右居中的几种实现
这个问题比较常见,咱们也简单说说吧。其实分为两种,一种行内结构,一种块结构。
行内结构居中
行内结构可以理解为文本,文本居中可以通过设置父元素的属性来实现。
text-align: center
水平居中line-height: height;
垂直居中。行高和高设置为一样的值。vertical-align: middle;
垂直居中。这个属性是用来设置对齐方式的,通过伪元素构建一个 height:100% 然后设置居中就ok了。
块级结构居中
块结构的特点,占满整行,所以设置要点是设置自己的属性来实现。
margin: auto;
水平居中,自动分配剩余空间,但是正常情况下,只有水平方向有剩余空间。position:fixed;top:0;right:0;bottom:0;left:0;
垂直水平居中,这个方法有个要点,就是定宽定高,不然就占满了。当然还有要 margin:auto 来分配剩余空间才可以。position:absolute;left:50%;margin-left:负一半宽度;top:50%;margin-top:负一半宽度
垂直水平居中,left
是基于父级来设置的,所以需要用margin
再拉回来,也需要定宽高。position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);
垂直水平居中,这个方案是上一个方案的优化版本,translate是基于自己的宽高来现实,所以可以用-50%
来拉回。
特殊的盒子实现居中
这个东西就是说一个特殊模型,所以他自身就支持完成水平垂直居中
- table-cell
vertical-align: middle;text-align:center
- flex 就不用多说了吧,不懂的去看看上节课。还不懂就要挨锤了
- grid
margin: auto;
ECMAScript 核心语法结构
ECMAScript 是一种由 Ecma国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262 标准化的脚本程序设计语言。可以理解为是JavaScript的一个标准,但实际上 JS 是 ECMA-262 标准的实现和扩展。
版本 | 时间 | 简述 |
---|---|---|
ECMAScript 1 | 1997年06月 | 首版 |
ECMAScript 2 | 1998年06月 | 格式修正,以使得其形式与ISO/IEC16262国际标准一致 |
ECMAScript 3 | 1999年12月 | 强大的正则表达式,更好的文字链处理,新的控制指令,异常处理,错误定义更加明确,数输出的格式化及其它改变 |
ECMAScript 4 | 未完成 | 更明确的类的定义,命名空间等等。2004年6月欧洲计算机制造商协会发表了ECMA-357标准,它是ECMAScript的一个扩延,它也被称为E4X(ECMAScript for XML) |
ECMAScript 5 | 2009年12月 | 首版 |
ECMAScript 2015 (ES6/ES2015) | 2015年6月17日 | 截止发布日期,JavaScript的官方名称是ECMAScript 2015,Ecma国际意在更频繁地发布包含小规模增量更新的新版本,下一版本将于2016年发布,命名为ECMAScript 2016。从现在开始,新版本将按照ECMAScript+年份的形式发布。 |
ECMAScript 2016 (ES7/ES2016) | 2016年 | |
ECMAScript 2017 (ES8/ES2017) | 2017年 | |
ECMAScript 2018 (ES9/ES2018) | 2018年 | |
ECMAScript 2019 | 2019年 |
这一课我真的觉得 ruanyifeng大佬的就很棒 ,这里我先大体介绍一下,之后有时间会开单张来介绍一些常规用法。如:Array数组对象的forEach、map、filter、reduce。
下面的介绍不全,只是其中的一部分
-
let/var/const
的区别关键字 绑定到顶层对象(特殊情况) 变量提升 块级作用域(if、for) 描述 var yes yes no 会变量提升,可多次赋值,无块级概念(function、try 的块有) let no no yes 只可声明一次,可多次赋值 const no no yes 只可以赋值一次
-
字符串扩展
-
repeat(n)
,重复字符串多少次, -
padStart(n,s),padEnd(n,s)
,字符串补全长度的功能,比如前面补 0 -
模板字符串
反引号标识 -
标签模板,其实也是一个偶然机会碰到这个东西的。有个prompt(1) to win,做这个题的时候发现了这种办法。
alert`123` // 等同于 alert(123)
-
-
正则的扩展
-
数值的扩展
- isNaN() ,NaN是唯一一个自己不等于自己的。
-
函数的扩展
-
默认值 ,
fucntion(a = 1){}
-
默认值解构,
// 写法一 function m1({x = 0, y = 0} = {}) { return [x, y]; } // 写法二 function m2({x, y} = { x: 0, y: 0 }) { return [x, y]; }
-
rest 参数 ,代替 arguments 对象
-
=>
函数()=>console.log(1)
等同于function(){return console.log(1)}
()=>{console.log(1)}
等同于function(){console.log(1)}
- this对象绑定为定义时候的对象
- 不可以当作构造函数
- 不可以使用arguments对象
-
-
数组的扩展
- 扩展运算符,
...[1,2,3]
分开插入,可以用来替代apply()
- Array.from(),将类数组转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
- Array.of() 用来修复
new Array(3)
的异常 - find() 和 findIndex(),查找元素或者下标
- fill() 填充一个数组
- entries(),keys() 和 values() 遍历
- includes() 判断是否存在,用来替代
~indexOf
- flat(),flatMap() 将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。还可以传入深度
- 扩展运算符,
-
对象的扩展
-
Proxy
-
Promise 对象
-
async 函数
课后作业(能写几种写几种,越多越好)
- 一行居中,多行居左,怎么实现?(水平居中)
- 一行居中,多行居中,怎么实现?(垂直居中)
- 实现一个重复字符串的函数。
最后,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),不管你在地球哪个方位, 不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)
如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路,越走越远。
更多文章: