2020年07月_一月清辉

翻译 CSS 发展史与 CSS的模块化

CSS 发展史手写源生 CSS行内样式、内嵌样式、link引入外部样式、@import导入样式使用预处理器 Sass/Less由于源生的 css 不支持变量，不支持嵌套等，因此催生出了像 sass/less 这样的预处理器。使用后处理器 PostCSSPostCSS 接收一个 CSS 文件，通过使用postcss，可以校验 css 语法或自动添加浏览器前缀Vue、React出现后，使用 css 模块化随着 react、vue 等基于模块化的框架的普及使用，我

2020-07-28 20:32:23 267

转载 css选择符类型

css选择符类型1、通用选择器：*2、类别选择器：.class3、id选择器：#id4、标签选择器：p5、后代选择器：div p6、子选择器：div > p7、群组选择器：div , p8、相邻同胞选择器：div +p9、伪类选择器：:link :visited :active :hover :focus :first-child10、伪元素选择器：:first-letter :first-line:before :after :lang(language)11、属性选择器：[a

2020-07-27 20:49:46 578

转载 css hack 是什么，有什么作用

什么是CSS hack针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hackCSS hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。CSS hack分类hack写法可分为3种：条件hack<!--[if IE]><style> .test{color:red;}</style><![endif]

2020-07-27 20:31:17 9581

转载 CSS几种特殊布局

圣杯布局1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。2、.left， .right的margin-left是为了让.main .left .right在同一行。3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。<!DOCTYPE html><html> <head> &lt

2020-07-27 20:17:58 157

原创 css的常用的选择器，你需要知道的

常用伪类选择器: link，链接没有被访问时前景色.例如：demo a:link {color:gray;}: visited，链接被访问过后前景色例如：demo a:visited{color:yellow;}: hover，鼠标滑过链接上时前景色例如： .demo a:hover{color:green;}: active，用于用户点击元素那一瞬间的效果: focus，用于元素成为焦点时，这个经常用在表单元素、选择框上。: nth-of-type(n) 、: f

2020-07-24 22:09:22 189

转载优化前端性能的方法

1、封装组件把所有经常需要用到的封装成组件，在需要的时候调用它。2、减少DOM操作dom操作是脚本中最耗性能的一个操作，例如：元素的增删改或dom集合的进行的操作3、压缩图片3.1 压缩图片体积，比如说熊猫在线图片压缩，或使用打包工具来压缩图片3.2 使用字体图标，比如说阿里图标4、减少http请求4.1 通过使用雪碧图，把很多小图片制作成一个大图，然后作为背景图片使用，定位即可4.2 把图片转化为base64编码，减少请求5、延迟加载假设我的网页很长，图片很多很多，只需要提

2020-07-23 20:06:04 157

原创 Arcgis之感觉图层被修改，以及ArcGISTiledMapServiceLayer与ArcGISDynamicMapServiceLayer对比

Bug:加载的图层服务切片为何感觉与生产不一样？问题描述：ArcGISDynamicMapServiceLayer获取图层，未设置返回的切片格式，默认是格式png,而该图层设置返回的切片格式是png32,则可能导致切片模糊（这是是数字出现了白色边框，使得数字不清晰）不设置返回的切片格式时，返回图层效果如下设置返回切片格式与图层发布时要求的格式一致时，返回图层效果如下解决方法设置返回切片格式var cjiwaterLayer = new esri.layers.ArcGISDynamic

2020-07-22 11:19:45 635

转载数组去重的几种方法

1、双重循环function norepeat(arr){ for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;){ if(arr[i]==arr[j]){ arr.splice(j,1); } j++; } } return arr;}var arr2=[11,6,5,4,8,6,1,15,4,6]

2020-07-21 20:55:07 13511 1

转载 Web前端开发，必须要了解的跨域解决方案

Web中的四种跨域的解决方案1、JSONP原生写法<script src="http://domain/api?param1=6&callback=jsonp"></script><script> function jsonp(data) { console.log(data) }</script>封装后写法<script> //参数obj说明： //eg:{ //

2020-07-20 20:55:24 2210

原创 JavaScript 可能问到的零星知识点

1、JavaScript的数据类型基本数据类型（值类型）：Number，String，Boolean，Undefined，Null复杂数据类型（引用类型）：Object，Array，Function，RegExp，Date，Error全局数据类型：Math2、new 操作符到底做了什么首先，创建一个新的空对象；其次，为这个空对象添加属性；（构造函数）最后，将this指向这个对象；3、改变函数内部this指针的指向函数（apply call）apply,call功能相同，但是传入的参

2020-07-20 19:12:01 2088

转载 Vue和React的对比，各自的优势、MVC和MVVM的对比、

MVC和MVVM的区别MVCMVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVVMMVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到

2020-07-20 11:47:07 5210 1

转载 JS获取字符串实际长度(包含汉字)的简单方法

方法一 String.chartCodeAt() 返回相应字符的编码原理：遍历字符串的每个字符，利用chartCodeAt()获取相应字符编码code，若code>=0 && code<=128,则长度+1，否则长度+2.String.prototype.GetLength = function() { var realLength = 0, len = this.length, charCode = -1; for (var i = 0; i <

2020-07-17 14:47:58 4380

原创 html你需要知道的问题

1、Doctype作用？严格模式与混杂模式如何区分？Doctype作用声明文件类型，让浏览器解析器知道应该用哪个规范来解析文档。严格模式又称标准模式，是指浏览器按照 W3C 标准解析代码。混杂模式又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码加粗样式。如何区分如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。html5没有DOCTYPE，HTML5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容，因此也就没有严格模式与混杂模式的区别。2、行内元素有哪些？块

2020-07-16 20:04:30 372

转载 css三栏布局

总结:1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上5、grid布局很强大，但是兼容性很差。1、绝对定位法<div id="left"></div><div id=

2020-07-15 21:06:15 150

转载 css两栏布局

情况一左定宽度右自适应宽度左浮动 + 右margin-left左右都浮动 + 左侧margin-right:-100%;margin:负值详解：当一个元素margin-top,margin-left使用负边距时，它把元素向这个特定的方向拉。但是当你将margin-bottom,margin-right使用负边距时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而覆盖自己。<!DOCTYPE html><html> <head&gt

2020-07-15 20:29:11 223

转载 CSS创建三角形的几种方法

结论：svg方法（polygon）canvas方法（moveTo 、lineTo、fill)border方法html字符正方形旋转方法代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*svg方法*/ .svg-triangle { width: 100px;

2020-07-15 20:03:25 294

转载 grid布局学习案例

参考链接http://www.voidcn.com/article/p-yemyzqru-byz.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { width:100%; background: #f3f3f3; text-align: c.

2020-07-14 20:56:57 485

原创 px、em、rem、vw、vh、vmax、vmin的区别

各距离单位的区别px：相对长度单位，是相对于显示器的屏幕分辨率而言的。优点：比较稳定和精确；缺点：如果用户对浏览器进行缩放，这时会使用我们的Web页面布局被打破；em：相对单位，基准点为父节点字体的大小.rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算.CSS3新加属性，chrome/firefox/IE9+支持)另外需注意chrome强制最小字体为12号，即使设置成 10px, 最终都会显示成 12px，当把html的font-size设置

2020-07-13 20:28:03 749

转载 css 元素水平垂直居中

方法一元素已知宽高 position+margin,移动50%父元素设置为：position: relative;子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽高距离的一半就可。<div class="box"> <div class="content"></div></div>.box { background-color: #FF8C00; width: 300

2020-07-13 19:48:34 148

转载 css清除浮动，以及BFC的学习

1、浮动的定义浮动元素停止的标准：浮动的元素可以向左或向右移动，直到它的外边框碰到父元素的边框或者其他浮动框的边框为止！（注意是其他浮动框的边框！敲黑板！）浮动的元素不在普通文档流中2、不清除浮动的影响导致页面布局混乱无法撑开父元素的高度清除浮动是指清除浮动所造成的影响。3、清除浮动的方法3.1 加高法给浮动的元素的祖先元素添加高度只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素，也就清除浮动带来的影响了工作上，我们不会给所有的盒子加高度，因为麻烦，并

2020-07-12 17:42:45 209

转载 CSS 盒子模型（Box Model）-----js获取容器的宽高位置尺寸

盒模型的组成：由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。盒模型有两种标准：一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。两种标准的区别：这两种标准对容器的 height 和 width 的计算方式不同，标准盒子模型只包括 content，IE盒子模型为 content + padding + border 。可以通过CSS属性 box-sizing 来对这两种标准进行切换，当值为 content-bo.

2020-07-12 16:09:41 2178

原创 Vue面试常见问题汇总以及参考链接

1、vue-router 导航守卫参考链接https://blog.csdn.net/yiyueqinghui/article/details/1072915092、Vue源码可能会问到的问题参考链接https://blog.csdn.net/yiyueqinghui/article/details/1068733613、Vue更新时所使用的patch算法(diff算法)参考链接https://blog.csdn.net/yiyueqinghui/article/details/106870

2020-07-11 22:34:25 361

转载 Vue Router 路由（路由守卫）---route

1、是什么简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。2、导航守卫分类导航守卫分为：全局的、组件内的、单个路由独享三种2.1 全局的指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发const router = new VueRouter({ ... })router.beforeEach((to, from, next

2020-07-11 22:28:55 13867

转载 CSS 外边距(margin)重叠及防止方法

外边距重叠1、外边距重叠时边距计算规则在规范文档中，2个或2个以上的块级盒模型，垂直相邻的margin会重叠。最终的margin值计算方法如下margin同正，则取最大值；margin同负，则取最小值；margin一正一负，则取二者之和。2、外边距重叠解决方案：外层元素margin边距用padding代替外层元素 overflow:hidden;内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolut

2020-07-11 17:24:20 1275

原创 js获取本地时间与网络时间

js是客户端执行的，所以，js的一切关于时间的函数，如Date.now()都是以客户端为准的，获取的是客户端的时间，即本地时间。1、本地时间与网络时间本地时间：客户端显示的时间（一般是与网络时间一致，但是电脑时间是可调整的，故可能不准确）js中的Date方法获取的时间就是客户端的时间网络时间：互联网时间。当我们有倒计时的需求时，不可能以客户端的时间为准，如果客户端时间不予网络时间一致，整个项目就完蛋了，所以我们需要获取服务端时间2、网络时间获取方法我们获取服务器时间是发起ajax请.

2020-07-10 11:30:16 11297

原创 CSS面试常见问题汇总以及参考链接

1、display、opacity、visibility的区别参考链接https://blog.csdn.net/yiyueqinghui/article/details/107243352

2020-07-10 10:24:40 223

转载 display、opacity、visibility的区别？

共同点都让元素不可见二者区别隐藏后是否占据原有空间display：none 从渲染树中消失，不占据空间，不能点击visibility：hidden 从渲染树消失，占据空间，不能点击opacity：0 从渲染树消失，占据空间，可以点击性能display：none 引起页面回流与重绘，性能消耗大visibility：hidden 只造成本元素的重绘，性能消耗较少opacity：0 只造成本元素重绘，性能消耗较少这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的继承

2020-07-10 10:21:14 1031

原创 HTML面试常见问题汇总以及参考链接

1、重绘与回流重绘与回流的参考链接https://blog.csdn.net/yiyueqinghui/article/details/107233565完善中。。。。。。

2020-07-09 17:52:48 213 1

转载浅谈JS重绘与回流

1、什么是重绘、回流重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。常见的重绘操作有：1，改变元素颜色2，改变元素背景色 ……回流(reflow)：当元素样式的改变影响到了页面布局时，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。常见的回流操作有：1，页面初次渲染、2，浏览器窗口大小改变3，元素尺寸/位置/内容发生改变4，元素字体大小变化5，添加或者删除可见的 DOM 元素

2020-07-09 17:45:04 5000 1

原创 script标签上的defer及async属性

1、script标签上的defer及async属性Async：异步加载这个文件。表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本文件有效。Defer: 延迟加载这个文件。标识脚本可以延迟到在html解析完后才执行。只对外部脚本文件有效。当script上有defer或async属性时，script的下载时均不会阻塞html的解析，但是一旦含有async属性的脚本被下载完，它就会立即执行，执行时会阻塞html的解析，而含有defer属性的脚本则是在html解析完后（DOMContent

2020-07-09 11:43:58 1025 1

转载异步编程的六种方式

前言你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。单线程的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问

2020-07-08 14:43:47 3960

转载 JS 原型与原型链详解

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象。凡是通过 new Function()创建的对象都是函数对象，其他的都是普通对象1、构造函数function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } }var person1 = new Person(.

2020-07-06 15:07:51 357

原创函数重载、

1、函数重载函数重载：是指在同一作用域内，可以有一组具有相同函数名，不同参数列表的函数，这组函数被称为重载函数。作用：重载函数通常用来命名一组功能相似的函数，这样做减少了函数名的数量，避免了名字空间的污染，对于程序的可读性有很大的好处。 // 可以跟据arguments个数实现重载 function add() { var sum = 0 ; for ( var i = 0 ; i < arguments.length; i ++ ) {

2020-07-03 19:08:00 318

转载 js面向对象的三大特性之系列三多态

面向对象有三大特性：封装、继承、多态。1、定义定义：多态其实是不同对象作用于同一操作产生的不同效果。多态的好处：你不必再向对象询问“你是什么类型”，你尽管调用这个行为就是了，剩下的都交给多态来负责。其思想实际上是把“做什么”和“谁去做”分开规范来说：多态最根本的作用就是通过把过程化的条件语句转化为对象的多态性，从而消除这些条件分支语句。非多态代码示例var makeSound = function(animal) { if(animal instanceof Du.

2020-07-03 18:54:10 328

转载 js面向对象三大特性之系列二继承

继承，js面向对象的三大特点之一1、何谓继承定义：继承就是子类可以使用父类的所有功能，并且能够对这些功能进行扩展。继承的过程就是一个一般到特殊的过程2、实现继承的方式2.1、call继承function Parent(){ this.age = 100}function Child(){ this.love = 'learn English' Parent.call(this)}let obj = new Child()console.log(obj.a.

2020-07-03 18:20:52 329

转载 js面向对象三大特性之系列一封装

面向对象三大特性：封装，继承，多态1、什么是封装定义：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。其实封装就是将属性和方法组成一个类的过程就称之为封装；封装实现的三种方式：分别是构造函数、原型、在类的外部通过.的语法添加2、封装的三种方式2.1、构造函数方法构造函数添加属性和方法实际上也就是通过this添加的属性和方法function Cat(name,age){ // 相当于 this = new Object() this.name = .

2020-07-03 14:54:55 1700

yiyueqinghui的博客