摘要：
1、flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 注意：设置为flex布局以后， 子元素的float、clear、vertical-align属性将失效。 2、容器的属性（父元素） 阅读全文
摘要：
SPA: 单页Web应用（single page web application）将所有web活动局限于一个html页面中，利用js通过hash或者浏览器history api来实现无刷新路由跳转，前后端通过ajax数据通信，避免了浏览器的刷新重新加载，为用户提供流程的操作体验。这意味着前端接管了路 阅读全文
摘要：
实现水平垂直居中的方法有很多，在这里我只介绍三种种易用且常见的方法，这三种方法对于固定宽高和不定宽高都有效。 1、transform 方案 2、flexbox 方案 3、grid方案 阅读全文
摘要：
常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应 左侧固定，右侧自适应 1、子元素 float:left 2、子元素 width:calc() 3、父元素 display: flex 左右2列固定，中间自适应 1、子元素 width:calc() 2、父元素 display: fle 阅读全文
摘要：
清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。 清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。 1、父级添加伪类 2、父级添加overflow属性 可以通过触发BFC的方式，可以实现清除浮动效果 阅读全文
摘要：
事件修饰符 .stop: 阻止事件冒泡 .prevent: 阻止默认行为 .capture: 添加事件使用捕获模式 .self: 事件只能有元素自身触发 .once: 事件只能触发一次 .passive: 按键修饰符 .enter .tab .delete(删除或退格键) .esc .space . 阅读全文
摘要：
reduce()方法接收一个函数作为累加器，reduce为数组中的每一个元素依次执行回调函数，接收四个参数：初始值（上一次回调返回的值），当前元素，当前索引，原数组。 语法：reduce（callback， [initialValue] callbck包含四个参数： previousvalue：上一 阅读全文
摘要：
在我们日常开发中可能会有这样的需求：侧边栏的高度需跟内容区域高度一致，但是内容区域高度不固定。 这里只需利用border，就可轻松实现。 html部分如下： css部分如下： 效果如下： 阅读全文
摘要：
水平居中分为块状元素和行内元素，而块状元素又分为定宽块状元素和不定宽块状元素。 1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。 <p style="text-align: center;">行内元素水平居中</ 阅读全文