css布局系列-居中相关的布局
1. 居中相关的布局 1.1 水平居中布局 效果图如下： 方案一. inline-block + text-align 分析：display设置为inline-block的元素，具有文本元素的性质，其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式，text-align: …
标签：布局
1. 居中相关的布局 1.1 水平居中布局 效果图如下： 方案一. inline-block + text-align 分析：display设置为inline-block的元素，具有文本元素的性质，其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式，text-align: …
标签：布局
概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰…
标签：事件处理
SPA应用已成为主流，Angular、React、Vue三大框架已经占据前端开发的大半江山，但随着SPA的流行，弊端也随着出现，不仅首屏加载慢，而且不利于SEO，所以vue全家桶或者react全家桶，都是推荐通过服务端渲染来实现路由的。 下面让我们来了解何为服务端渲染 服务端渲染 1.概念 当用户第…
本文将从以下十一个维度为读者总结前端基础知识 JS基础 1. 如何在ES5环境下实现let 对于这个问题，我们可以直接查看babel转换前后的结果，看一下在循环中通过let定义的变量是如何解决变量提升的问题 babel在let定义的变量前加了道下划线，避免在块级作用域外访…
1.CSS盒模型，在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border m…
一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析…
今天的兼容性问题主要发生在“前端三毒”身上，它们分别是： IE 6 IE 7 IE 8 2.问题一：宽度计算问题 案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> …
标签：兼容
浏览器渲染一个页面有两条线程：一条是渲染js脚本，一条是渲染css脚本。但是两条线程是互斥的。 回流：当render tree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。 重绘：当一个元素自身的宽高，布局，及显示或…
回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。 浏览器的渲染过程 本文先从浏览器的渲染过程来…
前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。 问题的解决，一般来说有这样几种思路： UI 组件按需加载 路由懒加载 组件重复打包 gzip 这些加…
