<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zl960320的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zl960320</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zl960320]]></copyright><item><title><![CDATA[第十二章 - flex布局]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121526046</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121526046</guid><author>zl960320</author><pubDate>Thu, 25 Nov 2021 09:45:56 +0800</pubDate><description><![CDATA[flex布局

操作方便，布局极为简单，移动端应用很广泛
	pc端浏览器支持情况较差
	IE11或更低版本，不支持或仅部分支持
[建议]

如果是pc端页面布局，使用传统布局较多
	如果是移动端或者不考虑兼容性问题的pc端布局，使用flex弹性布局
1. flex布局原理

1.1 布局原理

flex:弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设置flex布局以后，子元素的float,clear和vertical-align属性将失效，

伸缩布局=弹]]></description><category></category></item><item><title><![CDATA[第十一章 - CSS3新特性]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121503787</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121503787</guid><author>zl960320</author><pubDate>Tue, 23 Nov 2021 22:01:10 +0800</pubDate><description><![CDATA[CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素

属性选择器
	结构伪类选择器
	伪元素选择器
1. 属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器

选择符
			简介
		E[att]
			选择具有att属性的E元素
		E[att="val"]
			选择具有att属性且属性值等于val的E元素
		E[att^="val"]
			匹配具有att属性且以val开头的E元素
		E[att$="val"]
			匹配具有att属性且以val结]]></description><category></category></item><item><title><![CDATA[第十章 - HTML5新特性]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121503077</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121503077</guid><author>zl960320</author><pubDate>Tue, 23 Nov 2021 21:43:18 +0800</pubDate><description><![CDATA[1. HTML5新特性

HTML5新特性主要是针对于以前的不足，新增了一些新的标签，新的表单和新的表单属性等。

1.1 HTML5新增的语义化标签

&lt;header&gt;头部标签
	&lt;nav&gt;导航标签
	&lt;artical&gt;内容标签
	&lt;section&gt;定义文档某个区域
	&lt;aside&gt;侧边区域
	&lt;footer&gt;尾部标签
[注]

这种语义化标准主要是针对浏览引擎的

这些新标签在页面中可以使用多次
	在IE9中，需要把这些元素转换为块]]></description><category></category></item><item><title><![CDATA[第九章 - CSS扩展]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121409998</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121409998</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 21:42:21 +0800</pubDate><description><![CDATA[这一章学习一些关于CSS比较常用的其他知识，主要讲解精灵图，字体图标，小三角的画法，溢出省略号的显示等的实现。

1. 精灵图

精灵图的出现主要为了有效减少服务器接收和发送请求的次数，提高页面加载速度。

使用精灵图的核心：

精灵图技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
	这个大图片也称为sprites精灵图或雪碧图
	移动背景图片位置，此时可以使用background-position
	移动的距离就是这个目标图片的x坐标和y坐标。主要，网页中的坐标有所不同
	一般情况下，]]></description><category></category></item><item><title><![CDATA[第八章 - 元素的显示与隐藏]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121409689</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121409689</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 20:52:16 +0800</pubDate><description><![CDATA[我们在浏览网页时，经常会看到有些图片上面带一个小叉号，当我们点击小叉号的时候，图片就会消失，当我们重新刷新网页时，图片还会显示出来，这就用到了元素的显示与隐藏。

本质：让一个元素在页面中隐藏或显示出来。

display:显示隐藏元素，但是不保留位置
	visibility:显示隐藏元素，但是保留原来的位置
	overflow:溢出显示隐藏，但是只对溢出部分进行处理
下面就对这三个属性进行详细的描述

1. display属性

display属性用于设置一个元素应该如何显示

display:none隐]]></description><category></category></item><item><title><![CDATA[第七章 - 定位]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121406873</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121406873</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 18:31:33 +0800</pubDate><description><![CDATA[1. 定位

1.1 为什么需要定位？

1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的，要实现这个效果，标准流或浮动都无法实现，此时需要定位来实现。

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
	定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
1.2 定位组成

定位：将盒子定在某一位置，所以定位也是摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式]]></description><category></category></item><item><title><![CDATA[第六章 - 浮动]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121402513</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121402513</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 16:52:42 +0800</pubDate><description><![CDATA[1. 浮动

1.1 传统网页布局的三种方式

网页布局的本质，就是用css来摆放盒子，把盒子摆放到相应的位置。

css提供了3种传统的布局方式(简单说就是盒子如何进行排列顺序)

普通流(标准流)
	浮动
	定位
下面就要对这3种传统的布局方式进行一一讲解

1.2 标准流(普通流/文档流)

所谓标准流：就是标签按照规定好的默认方式进行排列

1. 块级元素会独占一行，从上向下按顺序排列

常用元素：div hr p h1-h6 ul ol dl form table等
2. 行内元素会按照顺序，从左]]></description><category></category></item><item><title><![CDATA[第五章 - CSS盒模型]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121396371</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121396371</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 12:08:16 +0800</pubDate><description><![CDATA[我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。

1. 盒模型

1. 1 看透网页布局的本质

我们在进行网页布局的过程中，需要做以下准备：

先准备好相关的网页元素，网页元素基本都是盒子BOX
	利用CSS设置好盒子样式，然后摆放到相应位置
	往盒子里面装内容
网页布局的核心本质：利用CSS摆放盒子

1.2 盒子模型组成

所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。

CSS盒模型本]]></description><category></category></item><item><title><![CDATA[第四章 - CSS三大特性]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121393165</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121393165</guid><author>zl960320</author><pubDate>Thu, 18 Nov 2021 09:48:25 +0800</pubDate><description><![CDATA[这一章节主要描述CSS非常重要的三大特性：层叠性，继承性和优先级。下面对这三个特性分别进行介绍

1. 层叠性

看到这个标题，我们不禁会想，层叠性？？？这个层叠性是会覆盖的意思吗？没错，就是会出现覆盖样式的问题，当我们给相同的选择器设置不同的样式的时候，在相同权重的情况下，后面设置的样式会覆盖掉前面设置的样式，这就实现了CSS的层叠性。

[注]

层叠性原则：

样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。
	样式不冲突：不会层叠
利用下面的示例进行演示：


```CSS
&lt]]></description><category></category></item><item><title><![CDATA[第三章 - CSS背景]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121387133</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121387133</guid><author>zl960320</author><pubDate>Wed, 17 Nov 2021 20:41:54 +0800</pubDate><description><![CDATA[前面简单的学习了文本样式，字体样式，以及一些css选择器等，这篇主要来学习一下css的背景属性。

1. css背景复合写法

css背景属性可以设置背景颜色，背景图片，背景平铺，背景图片滚动，背景图片位置等。


background: background-color | background-image | background-repeat | background-attachment | background-position;

background: red url(image/img.pn]]></description><category></category></item><item><title><![CDATA[第二章 - CSS元素显示模式]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121386516</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121386516</guid><author>zl960320</author><pubDate>Wed, 17 Nov 2021 20:27:52 +0800</pubDate><description><![CDATA[引言

看到这个标题，我们不禁会思考，什么是CSS元素的显示模式？看到这个标题，我脑海中首先浮现的元素以什么样的方式呈现？分别有哪几种方式？带着这个问题，开启下面的篇章。

1. 什么是CSS显示模式？

元素的显示模式就是元素(标签)以什么方式进行显示，比如&lt;p&gt;标签独占一行，&lt;span&gt;标签在一行内可以显示多个。

其实，HTML元素分为块级元素和行内元素两种类型

1.1 块级元素

前面学过了HTML的一些标签，我们通过实际验证可以知道，块级元素包括&lt;h1&gt;-&l]]></description><category></category></item><item><title><![CDATA[第一章 - CSS选择器]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121382137</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121382137</guid><author>zl960320</author><pubDate>Wed, 17 Nov 2021 17:01:28 +0800</pubDate><description><![CDATA[引言

前面我们学习了HTML的一些基础知识，了解了HTML是前端开发中用于书写结构的标签，我们在浏览网页时，会看到页面内容的各种好看的样式，这些样式的实现是通过CSS来实现的，CSS的主要使用场景就是美化网页，布局页面的CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽度，边框样式，边距等)以及版面的布局和外观显示样式。

下面讲解一些CSS的基础内容

1. CSS选择器

1.1 选择器的作用

选择器就是根据不同的需求把不同的标签选出来，]]></description><category></category></item><item><title><![CDATA[第二章 - HTML标签]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121315212</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121315212</guid><author>zl960320</author><pubDate>Sun, 14 Nov 2021 11:56:55 +0800</pubDate><description><![CDATA[1 HTML语法规范

标签关系：包含与并列关系

2 HTML基本结构标签

标签名
			定义
			说明
		&lt;html&gt;&lt;/html&gt;
			HTML标签
			页面中最大的标签，我们称之为根标签
		&lt;head&gt;&lt;/head&gt;
			文档的头部
			注意head标签中我们必须设置的标签是title
		&lt;title&gt;&lt;/title&gt;
			文档的标题
			让页面拥有一个自己的网页标题
		&lt;body&gt;&lt;.]]></description><category></category></item><item><title><![CDATA[第一章 - 初识HTML]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/121315072</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/121315072</guid><author>zl960320</author><pubDate>Sun, 14 Nov 2021 11:00:33 +0800</pubDate><description><![CDATA[现实生活中，我们浏览网页，看到的一些东西大多数都属于html文件格式，那么我们会斯卡一个问题，什么是html呢？接下来的内容，将会介绍一些html的基础知识

一 什么是HTML?

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。

[注]

HTML不是一种编程语言，而是一种标记语言。

所谓超文本语言，有2层含义：

1. 他可以加入图片，声音，动画，多媒体等内容(超越了文本的限制)

2. 它还可以从一个文件跳转到另一个文件，与世界各]]></description><category></category></item><item><title><![CDATA[Math.max()的使用]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/120256465</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/120256465</guid><author>zl960320</author><pubDate>Sun, 12 Sep 2021 21:36:03 +0800</pubDate><description><![CDATA[今天遇到了Math.max()的问题，想要返回数组中的最大值，不知道怎么返回，于是查了MDN，发现Math.max()原来是这么使用的

1.当返回一组数中的最大值时，直接Math.max(10,30,20);//30

2.当返回数组中的最大值时，前面要加...,

let arr=[1,0,2,5,3,4];

要想返回arr中的最大值，就可以直接使用Math.max(...arr),就可以返回arr中的最大值5了。
...]]></description><category></category></item><item><title><![CDATA[js-几种继承实现]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/119546048</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/119546048</guid><author>zl960320</author><pubDate>Mon, 09 Aug 2021 20:43:08 +0800</pubDate><description><![CDATA[复习的过程中遇到了js的继承方法，从ES5出发，讲解下面出现的几种js继承方法以及各自的优缺点

1.原型链继承

首先看一个比较容易想到的原型链继承，代码如下


function Parent(name){
//父类构造函数
    this.name=['佩奇'];
}
Parent.prototype.sayHello=function(){
    return '你好'
}
function Child(){
    //子类构造函数
}
Child.prototype=new Parent()]]></description><category></category></item><item><title><![CDATA[数组操作-reduce()方法]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/119410514</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/119410514</guid><author>zl960320</author><pubDate>Thu, 05 Aug 2021 10:45:54 +0800</pubDate><description><![CDATA[1.reduce()方法介绍

本篇讲解数组的reduce()方法，reduce()方法可以提供很多方法，真的是太赞了。

reduce(function(pre,cur,index,arr){},init);根据这个写法，我们可以清晰的看到reduce中可传入的参数，那么这些参数都代表什么含义呢？下面一一介绍：

pre:表示上一次调用回调时的返回值，或者初始值init,

cur:表示当前正在处理的数组元素

index:表示当前正在处理的数组索引，若提供init值，则索引为0，否则索引为1

Init]]></description><category></category></item><item><title><![CDATA[数组扁平化]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/119383609</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/119383609</guid><author>zl960320</author><pubDate>Wed, 04 Aug 2021 14:56:22 +0800</pubDate><description><![CDATA[数组扁平化就是将多维数组转化成一维数组。以数组arr=[1,[2,3,[4,5]],6]为例。将其转化为一位数组。可以采用以下3种方式实现。


var arr=[1,[2,3,[4,5]],6]

方法1 利用数组自带的扁平化方法


console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 6]

方法2 利用正则表达式


var res2=JSON.stringify(arr).replace(/\[|\]/g,'');
console.log(res2.s]]></description><category></category></item><item><title><![CDATA[浅拷贝与深拷贝]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/119359878</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/119359878</guid><author>zl960320</author><pubDate>Tue, 03 Aug 2021 22:08:06 +0800</pubDate><description><![CDATA[1.引言

这篇文章主要讲一下浅拷贝与深拷贝的实现，由于最近复习到了这个知识点，就写这篇文章加深一遍印象。

看到这个题目，我们首先会想到：什么是浅拷贝，什么是深拷贝？

浅拷贝就是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝，如果属性是基本数据类型，拷贝的就是基本类型的值，拷贝前后基本数据类型互不影响，也就是说，拷贝的基本数据类型如果改变，不会影响原始数据类型。但是如果属性是引用数据类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝就是将一个对象从内存中]]></description><category></category></item><item><title><![CDATA[节流函数的使用]]></title><link>https://blog.youkuaiyun.com/zl960320/article/details/119359466</link><guid>https://blog.youkuaiyun.com/zl960320/article/details/119359466</guid><author>zl960320</author><pubDate>Tue, 03 Aug 2021 21:41:09 +0800</pubDate><description><![CDATA[1.什么是节流？节流有什么作用？

这一篇来讲解什么是节流，节流就是当持续触发事件的时候，保证一定时间内只调用一次事件处理函数，一段时间内只调用一次。

通俗点讲，就是当我们去食堂排队打饭的时候，无论有多少人排队，只有当你前面一个人打完饭之后，才能轮到你打饭，也就是说，在上一个人打饭的这一段时间内，食堂叔叔阿姨只为前一个人服务，当为前一个人服务完之后，才能开始为你服务。这个例子是不是通俗易懂。哈哈哈~~~

下面言归正传，既然也是一段时间内，所以节流函数里面也需要使用定时器setTimeout,但是这里与防]]></description><category></category></item></channel></rss>