-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
249 lines (128 loc) · 70.4 KB
/
atom.xml
File metadata and controls
249 lines (128 loc) · 70.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Ray</title>
<subtitle>命数如织,当为磐石</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://ray9972.github.io.git/"/>
<updated>2020-09-05T02:21:43.093Z</updated>
<id>https://ray9972.github.io.git/</id>
<author>
<name>Ray9972</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>深克隆和浅克隆</title>
<link href="https://ray9972.github.io.git/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/"/>
<id>https://ray9972.github.io.git/2020/08/22/%E6%B7%B1%E5%85%8B%E9%9A%86%E5%92%8C%E6%B5%85%E5%85%8B%E9%9A%86/</id>
<published>2020-08-22T07:35:26.000Z</published>
<updated>2020-09-05T02:21:43.093Z</updated>
<content type="html"><![CDATA[<h1 id="深拷贝和浅拷贝"><a href="#深拷贝和浅拷贝" class="headerlink" title="深拷贝和浅拷贝"></a>深拷贝和浅拷贝</h1><h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title="浅拷贝"></a>浅拷贝</h2><p>浅拷贝只能拷贝最外面一层<br>更深级别的对象只能拷贝地址,更改拷贝的新对象时也会改变被拷贝的对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> id: <span class="number">1</span>,</span><br><span class="line"> name: <span class="string">"andy"</span>,</span><br><span class="line"> msg: {</span><br><span class="line"> age: <span class="number">18</span>,</span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"><span class="keyword">var</span> o = {};</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> obj) {</span><br><span class="line"> o[k] = obj[k];</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(o);</span><br><span class="line"><span class="comment">// o ={</span></span><br><span class="line"><span class="comment">// id: 1,</span></span><br><span class="line"><span class="comment">// name: "andy",</span></span><br><span class="line"><span class="comment">// msg: {</span></span><br><span class="line"><span class="comment">// age: 18</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line">o.msg.age = <span class="number">2</span>; <span class="comment">//obj的msg.age也会改变</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//另一个浅克隆的方法</span></span><br><span class="line"><span class="built_in">Object</span>.assign(o, obj);</span><br></pre></td></tr></table></figure><h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><p>这个方法需要传入两个参数,有些繁琐</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepCopy</span>(<span class="params">newObj, oldObj</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> oldObj) {</span><br><span class="line"> <span class="comment">//判断属性值属于哪个数据类型</span></span><br><span class="line"> <span class="keyword">var</span> item = oldObj[key];</span><br><span class="line"> <span class="keyword">if</span> (item <span class="keyword">instanceof</span> <span class="built_in">Array</span>) {</span><br><span class="line"> <span class="comment">//先写Arry是因为数组也属于Object</span></span><br><span class="line"> newObj[k] = [];</span><br><span class="line"> deepCopy(newObj[k], item);</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (item <span class="keyword">instanceof</span> <span class="built_in">Object</span>) {</span><br><span class="line"> newObj[k] = {};</span><br><span class="line"> deepCopy(newObj[k], item);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> newObj[k] = item;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>还有一种只传一个参数的写法</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepClone</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(obj === <span class="literal">null</span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> newObj = obj <span class="keyword">instanceof</span> <span class="built_in">Array</span> ? [] : {};</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> obj){</span><br><span class="line"> <span class="comment">// array object</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> obj[i] === <span class="string">"object"</span>){</span><br><span class="line"> <span class="keyword">if</span>(newObj <span class="keyword">instanceof</span> <span class="built_in">Array</span>){</span><br><span class="line"> newObj.push(deepClone(obj[i]));</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> newObj[i] = deepClone(obj[i]);</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">if</span>(newObj <span class="keyword">instanceof</span> <span class="built_in">Array</span>){</span><br><span class="line"> newObj.push(obj[i]);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> newObj[i] = obj[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newObj;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="深拷贝和浅拷贝"><a href="#深拷贝和浅拷贝" class="headerlink" title="深拷贝和浅拷贝"></a>深拷贝和浅拷贝</h1><h2 id="浅拷贝"><a href="#浅拷贝" class="headerlink" title=
</summary>
<category term="JS" scheme="https://Ray9972.github.io.git/categories/JS/"/>
<category term="JS" scheme="https://Ray9972.github.io.git/tags/JS/"/>
<category term="深克隆" scheme="https://Ray9972.github.io.git/tags/%E6%B7%B1%E5%85%8B%E9%9A%86/"/>
<category term="浅克隆" scheme="https://Ray9972.github.io.git/tags/%E6%B5%85%E5%85%8B%E9%9A%86/"/>
</entry>
<entry>
<title>变量和函数的声明提升</title>
<link href="https://ray9972.github.io.git/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/"/>
<id>https://ray9972.github.io.git/2020/08/13/%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E7%9A%84%E5%A3%B0%E6%98%8E%E6%8F%90%E5%8D%87/</id>
<published>2020-08-13T01:40:17.000Z</published>
<updated>2020-08-13T12:43:10.248Z</updated>
<content type="html"><![CDATA[<h1 id="变量和函数的声明提升"><a href="#变量和函数的声明提升" class="headerlink" title="变量和函数的声明提升"></a>变量和函数的声明提升</h1><h2 id="变量声明提升"><a href="#变量声明提升" class="headerlink" title="变量声明提升"></a>变量声明提升</h2><h3 id="1、变量定义"><a href="#1、变量定义" class="headerlink" title="1、变量定义"></a>1、变量定义</h3><p>可以使用var定义变量，变量如果没有赋值，那变量的初始值为<code>undefined</code>。</p><h3 id="2、变量作用域"><a href="#2、变量作用域" class="headerlink" title="2、变量作用域"></a>2、变量作用域</h3><p>变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。<br>在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆盖。<br><strong>所有不使用var定义的变量都视为全局变量</strong></p><h3 id="3、函数作用域和声明提前"><a href="#3、函数作用域和声明提前" class="headerlink" title="3、函数作用域和声明提前"></a>3、函数作用域和声明提前</h3><p>JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说<strong>变量在声明之前已经可用</strong>，所有这特性称为<code>声明提前（hoisting）</code>，即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子：<br><em>注释：<code>声明提前</code>是在JavaScript引擎的预编译时进行，是在代码开始运行之前。</em></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> scope = <span class="string">'global'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(scope);</span><br><span class="line"> <span class="keyword">var</span> scope = <span class="string">'local'</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(scope);</span><br><span class="line">}<span class="number">123456</span></span><br></pre></td></tr></table></figure><p>由于函数内声明提升，所以上面的代码实际上是这样的</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> scope = <span class="string">'global'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> scope; <span class="comment">//变量声明提升到函数顶部</span></span><br><span class="line"> <span class="built_in">console</span>.log(scope);</span><br><span class="line"> scope = <span class="string">'local'</span>; <span class="comment">//变量初始化依然保留在原来的位置</span></span><br><span class="line"> <span class="built_in">console</span>.log(scope);</span><br><span class="line">}<span class="number">1234567</span></span><br></pre></td></tr></table></figure><p>经过这样变形之后，答案就就非常明显了。由于scope在第一个console.log(scope)语句之前就已经定义了，但是并没有赋值，因此此时scope的指是<code>undefined</code>.第二个console.log(scope)语句之前，scope已经完成赋值为’local’，所以输出的结果是<code>local</code>。</p><h2 id="函数声明提升"><a href="#函数声明提升" class="headerlink" title="函数声明提升"></a>函数声明提升</h2><h3 id="1、函数的两种创建方式"><a href="#1、函数的两种创建方式" class="headerlink" title="1、函数的两种创建方式"></a>1、函数的两种创建方式</h3><ul><li>函数声明</li><li>函数表达式</li></ul><p><strong>函数声明语法</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">f(<span class="string">'superman'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">name</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(name);</span><br><span class="line">}<span class="number">1234</span></span><br></pre></td></tr></table></figure><p>运行上面的程序，控制台能打印出<code>supemran</code>。<br><strong>函数表达式语法</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">f(<span class="string">'superman'</span>);</span><br><span class="line"><span class="keyword">var</span> f= <span class="function"><span class="keyword">function</span>(<span class="params">name</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(name);</span><br><span class="line">}<span class="number">1234</span></span><br></pre></td></tr></table></figure><p>运行上面的代码，会报错<code>Uncaught ReferenceError: f is not defined(…)</code>,错误信息显示说f没有被定义。<br>为什么同样的代码，函数声明和函数表达式存在着差异呢？<br>这是因为，函数声明有一个非常重要的特征：<code>函数声明提升</code>，函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，所以可以把函数声明放在调用它的语句后面。如下面例子，最终的输出结果应该是什么？：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">}</span><br><span class="line">getName();<span class="number">1234567</span></span><br></pre></td></tr></table></figure><p>可能会有人觉得最后输出的结果是<code>1</code>。让我们来分析一下，这个例子涉及到了<code>变量声明提升</code>和<code>函数声明提升</code>。正如前面说到的函数声明提升，函数声明<code>function getName(){}</code>的声明会被提前到顶部。而函数表达式<code>var getName = function(){}</code>则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到底部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。因此上面的函数可以转换成下面的样子:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>)</span>{ <span class="comment">//函数声明提升到顶部</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> getName; <span class="comment">//变量声明提升</span></span><br><span class="line">getName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ <span class="comment">//变量赋值依然保留在原来的位置</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">}</span><br><span class="line">getName(); <span class="comment">// 最终输出：212345678</span></span><br></pre></td></tr></table></figure><p>所以最终的输出结果是：<code>2</code>。在原来的例子中，函数声明虽然是在函数表达式后面，但由于函数声明提升到顶部，因此后面getName又被函数表达式的赋值操作给覆盖了，所以输出<code>2</code>。</p>]]></content>
<summary type="html">
<h1 id="变量和函数的声明提升"><a href="#变量和函数的声明提升" class="headerlink" title="变量和函数的声明提升"></a>变量和函数的声明提升</h1><h2 id="变量声明提升"><a href="#变量声明提升" class="
</summary>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/tags/JavaScript/"/>
<category term="变量" scheme="https://Ray9972.github.io.git/tags/%E5%8F%98%E9%87%8F/"/>
<category term="函数" scheme="https://Ray9972.github.io.git/tags/%E5%87%BD%E6%95%B0/"/>
</entry>
<entry>
<title>JS中offset client scroll的区别</title>
<link href="https://ray9972.github.io.git/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/"/>
<id>https://ray9972.github.io.git/2020/08/05/JS%E4%B8%ADoffset%20client%20scroll%E7%9A%84%E5%8C%BA%E5%88%AB/</id>
<published>2020-08-05T08:29:01.680Z</published>
<updated>2020-08-05T08:34:49.422Z</updated>
<content type="html"><![CDATA[<h1 id="JS中offset-client-scroll的区别"><a href="#JS中offset-client-scroll的区别" class="headerlink" title="JS中offset client scroll的区别"></a>JS中offset client scroll的区别</h1><h3 id="偏移-offset"><a href="#偏移-offset" class="headerlink" title="偏移 offset"></a>偏移 offset</h3><p>offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。<br>offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。<br>offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。<br>offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。</p><h4 id="offsetLeft和style-left的区别"><a href="#offsetLeft和style-left的区别" class="headerlink" title="offsetLeft和style.left的区别"></a>offsetLeft和style.left的区别</h4><ol><li>style.left只能获取行内样式，offsetLeft 可以获取行内样式和内嵌样式</li><li>offsetLeft 只读，style.left可读可写</li><li>offsetLeft是数值，style.left是字符串并且有单位px</li><li>如果没有加定位，style.left获取的数值可能是无效的</li><li>最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准<br><img src= "/img/loading.gif" data-src="https://img-blog.csdn.net/20160923001206288?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="在这里插入图片描述"></li></ol><h3 id="滚动-scroll"><a href="#滚动-scroll" class="headerlink" title="滚动 scroll"></a>滚动 scroll</h3><p>scrollHeight：在没有滚动条的情况下，元素内容的总高度。<br>scrollWidth：在没有滚动条的情况下，元素内容的总宽度。<br>scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。<br>scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。<br><img src= "/img/loading.gif" data-src="https://img-blog.csdn.net/20160923001734062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="在这里插入图片描述"></p><h3 id="客户区-client"><a href="#客户区-client" class="headerlink" title="客户区 client"></a>客户区 client</h3><p>clientWidth：元素内容区宽度加上左右内边距宽度。<br>clientHeight：元素内容区高度加上上下内边距高度。<br><img src= "/img/loading.gif" data-src="https://img-blog.csdn.net/20180806142642108?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzg2MTMyNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="在这里插入图片描述"><br><strong><em>另外:pageYoffset 和 scrollY</em></strong><br>这两个都能返回视窗滚动过的距离，相对来说，pageYOffset兼容性更好，一般我们只用 pageYOffset就行。但两者都不兼容IE9以下，另外 scrollY 可以赋值，让视窗滚动到指定位置。pageYOffser和scrollY都与scrollTop不同，pageYOffset和scrollY都只存在window对象里。</p>]]></content>
<summary type="html">
<h1 id="JS中offset-client-scroll的区别"><a href="#JS中offset-client-scroll的区别" class="headerlink" title="JS中offset client scroll的区别"></a>JS中offse
</summary>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/tags/JavaScript/"/>
<category term="bom" scheme="https://Ray9972.github.io.git/tags/bom/"/>
<category term="dom" scheme="https://Ray9972.github.io.git/tags/dom/"/>
</entry>
<entry>
<title>Js 中 this 的指向性问题</title>
<link href="https://ray9972.github.io.git/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/"/>
<id>https://ray9972.github.io.git/2020/08/03/Js%20%E4%B8%AD%20this%20%E7%9A%84%E6%8C%87%E5%90%91%E6%80%A7%E9%97%AE%E9%A2%98/</id>
<published>2020-08-03T12:15:30.334Z</published>
<updated>2020-08-05T08:29:55.185Z</updated>
<content type="html"><![CDATA[<h1 id="JS-中-this-的指向性问题"><a href="#JS-中-this-的指向性问题" class="headerlink" title="JS 中 this 的指向性问题"></a>JS 中 this 的指向性问题</h1><p><strong>一般情况下this的最终指向是调用它的对象</strong></p><h3 id="1-全局作用域或者普通函数指向全局对象window-定时器中的this指向window"><a href="#1-全局作用域或者普通函数指向全局对象window-定时器中的this指向window" class="headerlink" title="1.全局作用域或者普通函数指向全局对象window(定时器中的this指向window)"></a>1.全局作用域或者普通函数指向全局对象window(定时器中的this指向window)</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//指向window</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span><br><span class="line">}</span><br><span class="line">fn();<span class="comment">//fn的调用者是window,即window.fn()</span></span><br><span class="line"></span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},<span class="number">1000</span>);<span class="comment">//前面也省略了一个window</span></span><br><span class="line"><span class="number">12345678</span></span><br></pre></td></tr></table></figure><h3 id="2-方法调用中谁调用this指向谁"><a href="#2-方法调用中谁调用this指向谁" class="headerlink" title="2. 方法调用中谁调用this指向谁"></a>2. 方法调用中谁调用this指向谁</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> o = {</span><br><span class="line"> sayHi:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//this指向o这个对象</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">o.sayHi();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.quereySelector(<span class="string">'button'</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//this指向btn这个按钮对象</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="构造函数中this指向构造函数的实例"><a href="#构造函数中this指向构造函数的实例" class="headerlink" title="构造函数中this指向构造函数的实例"></a>构造函数中this指向构造函数的实例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fun</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//this指向的是fun,实例对象</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> fun = <span class="keyword">new</span> Fun()</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="JS-中-this-的指向性问题"><a href="#JS-中-this-的指向性问题" class="headerlink" title="JS 中 this 的指向性问题"></a>JS 中 this 的指向性问题</h1><p><strong>一般情况下t
</summary>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/tags/JavaScript/"/>
</entry>
<entry>
<title>JavaScript中的栈内存和堆内存</title>
<link href="https://ray9972.github.io.git/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/"/>
<id>https://ray9972.github.io.git/2020/07/24/%E6%A0%88%E5%86%85%E5%AD%98%E5%92%8C%E5%A0%86%E5%86%85%E5%AD%98/</id>
<published>2020-07-24T11:20:23.083Z</published>
<updated>2020-08-03T12:19:51.532Z</updated>
<content type="html"><![CDATA[<h1 id="JavaScript中的栈内存和堆内存"><a href="#JavaScript中的栈内存和堆内存" class="headerlink" title="JavaScript中的栈内存和堆内存"></a>JavaScript中的栈内存和堆内存</h1><h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><p>JavaScript中的变量分为基本类型和引用类型.</p><h6 id="基本类型"><a href="#基本类型" class="headerlink" title="基本类型:"></a>基本类型:</h6><p>Undifined,Null,Boolean,Number和String,这些简单数据段在内存中分别占有固定大小的空间,他们的值保存在栈空间,是按<strong>值</strong>来访问的.</p><h6 id="引用类型"><a href="#引用类型" class="headerlink" title="引用类型:"></a>引用类型:</h6><p>引用类型时保存在堆内存中的对象,引用类型的值大小不固定,栈内存中存放地址指向堆内存中的对象,是按<strong>引用</strong>来访问的.</p><h2 id="结合代码和图来理解"><a href="#结合代码和图来理解" class="headerlink" title="结合代码和图来理解"></a>结合代码和图来理解</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">0</span>; <span class="comment">//栈内存</span></span><br><span class="line"><span class="keyword">var</span> a2 = <span class="string">"this is string"</span>; <span class="comment">//栈内存</span></span><br><span class="line"><span class="keyword">var</span> a3 = <span class="literal">null</span>; <span class="comment">//栈内存</span></span><br><span class="line"><span class="keyword">var</span> b = { <span class="attr">x</span>:<span class="number">10</span> };<span class="comment">//变量b存在于栈中,{x:10}作为对象存在于堆中</span></span><br><span class="line"><span class="keyword">var</span> c = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];<span class="comment">//变量c存在于栈中,[1,2,3]作为对象存在于堆中</span></span><br></pre></td></tr></table></figure><p><img src= "/img/loading.gif" data-src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9yZW1vdGUvMTQ2MDAwMDAxNTExODA2Nw?x-oss-process=image/format,png" alt="在这里插入图片描述"><br>当我们要访问堆内存中的引用数据类型时</p><ol><li>从栈中获取该对象的地址引用</li><li>再从堆内存中获得我们需要的数据</li></ol><h2 id="基本类型发生复制行为"><a href="#基本类型发生复制行为" class="headerlink" title="基本类型发生复制行为"></a>基本类型发生复制行为</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">var</span> b = a;</span><br><span class="line">b = <span class="number">30</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">//20</span></span><br></pre></td></tr></table></figure><p>结合下图进行理解<br><img src= "/img/loading.gif" data-src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9yZW1vdGUvMTQ2MDAwMDAxNTExODA2OA?x-oss-process=image/format,png" alt="在这里插入图片描述"><br>在栈内存中的数据发生复制行为时,系统会自动为新的变量分配一个新值,最后这些变量都是<strong>相互独立的</strong></p><h2 id="引用类型发生复制行为"><a href="#引用类型发生复制行为" class="headerlink" title="引用类型发生复制行为"></a>引用类型发生复制行为</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a ={ <span class="attr">x</span>:<span class="number">10</span>, <span class="attr">y</span>: <span class="number">20</span> };</span><br><span class="line"><span class="keyword">var</span> b = a;</span><br><span class="line">b.x = <span class="number">5</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a.x);<span class="comment">//5</span></span><br></pre></td></tr></table></figure><ol><li>引用类型的复制，同样为新的变量b分配一个新的值，保存在栈内存中，不同的是，这个值仅<br>仅是引用类型的一个地址指针</li><li>他们两个指向同一个值，也就是地址指针相同，在堆内存中访问到的具体对象实际上是同一个</li><li>因此改变b.x时，a.x也发生了变化，这就是引用类型的特性</li><li>结合下图理解<br><img src= "/img/loading.gif" data-src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9yZW1vdGUvMTQ2MDAwMDAxNTExODA2OQ?x-oss-process=image/format,png" alt="在这里插入图片描述"></li></ol><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p><img src= "/img/loading.gif" data-src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2ltZy9yZW1vdGUvMTQ2MDAwMDAxNTExODA3MA?x-oss-process=image/format,png" alt="在这里插入图片描述"></p>]]></content>
<summary type="html">
<h1 id="JavaScript中的栈内存和堆内存"><a href="#JavaScript中的栈内存和堆内存" class="headerlink" title="JavaScript中的栈内存和堆内存"></a>JavaScript中的栈内存和堆内存</h1><h2 i
</summary>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://Ray9972.github.io.git/tags/JavaScript/"/>
<category term="栈内存" scheme="https://Ray9972.github.io.git/tags/%E6%A0%88%E5%86%85%E5%AD%98/"/>
<category term="堆内存" scheme="https://Ray9972.github.io.git/tags/%E5%A0%86%E5%86%85%E5%AD%98/"/>
</entry>
<entry>
<title>关于BFC</title>
<link href="https://ray9972.github.io.git/2020/07/18/%E5%85%B3%E4%BA%8EBFC/"/>
<id>https://ray9972.github.io.git/2020/07/18/%E5%85%B3%E4%BA%8EBFC/</id>
<published>2020-07-18T07:17:31.874Z</published>
<updated>2020-07-19T09:41:11.671Z</updated>
<content type="html"><![CDATA[<h1 id="关于BFC"><a href="#关于BFC" class="headerlink" title="关于BFC"></a>关于BFC</h1><h2 id="BFC定义"><a href="#BFC定义" class="headerlink" title="BFC定义"></a>BFC定义</h2><blockquote><p>BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p></blockquote><h2 id="创建BFC"><a href="#创建BFC" class="headerlink" title="创建BFC"></a>创建BFC</h2><ul><li>浮动元素;</li><li>position的除static和relative以外的值;</li><li><code>display:table-cell</code>元素;</li><li><code>display:table-caption</code>元素;</li><li><code>display:inline-block</code>元素;</li><li>元素设置overflow且值不为visible(hidden|scroll|auto)</li></ul><h2 id="BFC的布局规则"><a href="#BFC的布局规则" class="headerlink" title="BFC的布局规则"></a>BFC的布局规则</h2><ol><li><h3 id="不属于BFC中的相邻元素的垂直外边距不会合并"><a href="#不属于BFC中的相邻元素的垂直外边距不会合并" class="headerlink" title="不属于BFC中的相邻元素的垂直外边距不会合并;"></a>不属于BFC中的相邻元素的垂直外边距不会合并;</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">style</span>></span><br><span class="line"> <span class="selector-tag">p</span> {</span><br><span class="line"> <span class="attribute">background-color</span>: tomato;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我是第一行<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我是第二行<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bfc"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我是第三行<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718160726834.png" alt></p><p>此时的margin重叠,为50px</p><p>属于<strong>同一个</strong>BFC的两个相邻Box的margin会发生重叠。</p><p>这三个元素都存在于body中,所以用div将第三个元素包住,形成新的BFC.<br>添加<code>.bfc {overflow: hidden;}</code></p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/2020071816061143.png" alt></p></li><li><h3 id="BFC闭合浮动"><a href="#BFC闭合浮动" class="headerlink" title="BFC闭合浮动;"></a>BFC闭合浮动;</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bfc</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid grey;</span><br><span class="line"><span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.left</span> {</span><br><span class="line"><span class="attribute">float</span>: left;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="attribute">background</span>: coral;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.right</span> {</span><br><span class="line"><span class="attribute">float</span>: right;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="attribute">background</span>: skyblue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bfc"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>左浮动<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span>右浮动<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>BFC能创造闭合浮动，里面的元素即使不用清除浮动，也不会溢出。例子中珊瑚色和天空蓝色的方块分别是左浮动和右浮动，但是它们都处于BFC闭合浮动中，别的说法是BFC中的元素参与高度计算。</p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718161441586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JheTk5Nw==,size_16,color_FFFFFF,t_70" alt></p></li><li><h3 id="BFC元素不会与浮动元素叠加"><a href="#BFC元素不会与浮动元素叠加" class="headerlink" title="BFC元素不会与浮动元素叠加"></a>BFC元素不会与浮动元素叠加</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.outer</span> {</span><br><span class="line"><span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="attribute">border</span>: <span class="number">1px</span> solid grey;</span><br><span class="line"><span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.bfc</span> {</span><br><span class="line"><span class="attribute">overflow</span>: hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.mid</span> {</span><br><span class="line"><span class="attribute">background</span>: yellow;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.left</span> {</span><br><span class="line"><span class="attribute">float</span>: left;</span><br><span class="line"><span class="attribute">background</span>: coral;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"outer"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mid"</span>></span>我没有设置浮动<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>设置了左浮动<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"outer"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span>设置左浮动<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mid bfc "</span>></span>我没有设置浮动，但是触发了BFC<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>没有触发BFC时</p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718162324190.png" alt></p><p>触发BFC时</p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718162416880.png" alt></p><p>这个方法可以用来实现两列自适应布局，这时候如果左边的宽度固定，右边的内容就会自适应宽度.</p></li></ol>]]></content>
<summary type="html">
<h1 id="关于BFC"><a href="#关于BFC" class="headerlink" title="关于BFC"></a>关于BFC</h1><h2 id="BFC定义"><a href="#BFC定义" class="headerlink" title="BFC
</summary>
<category term="CSS" scheme="https://Ray9972.github.io.git/categories/CSS/"/>
<category term="CSS" scheme="https://Ray9972.github.io.git/tags/CSS/"/>
<category term="BFC" scheme="https://Ray9972.github.io.git/tags/BFC/"/>
</entry>
<entry>
<title>CSS中浮动的影响以及如何清除</title>
<link href="https://ray9972.github.io.git/2020/07/18/%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%BD%B1%E5%93%8D%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4/"/>
<id>https://ray9972.github.io.git/2020/07/18/%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%BD%B1%E5%93%8D%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4/</id>
<published>2020-07-18T01:40:17.000Z</published>
<updated>2020-08-03T12:22:29.269Z</updated>
<content type="html"><![CDATA[<h1 id="CSS中浮动的影响以及如何清除"><a href="#CSS中浮动的影响以及如何清除" class="headerlink" title="CSS中浮动的影响以及如何清除"></a>CSS中浮动的影响以及如何清除</h1><p>对于刚接触CSS的我来说，浮动属性基本是用来使块元素同行展示的。</p><p>但是float之后却产生了许多问题。</p><h2 id="元素浮动后产生的问题"><a href="#元素浮动后产生的问题" class="headerlink" title="元素浮动后产生的问题"></a>元素浮动后产生的问题</h2><h3 id="问题一：父元素高度塌陷"><a href="#问题一：父元素高度塌陷" class="headerlink" title="问题一：父元素高度塌陷"></a>问题一：父元素高度塌陷</h3><p>现在来写一个例子：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">style</span>></span><br><span class="line"> <span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#333</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.box1</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: tomato;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.box2</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: saddlebrown;</span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span>我是第一个盒子<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span>我是第二个盒子<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>这是子元素未进行浮动时,父元素高度由子元素撑开</p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718164228838.png" alt="微信图片_20200718095535"></p><p>当为两个子元素设置<code>float:left</code>后显示为</p><p><img src= "/img/loading.gif" data-src="https://img-blog.csdnimg.cn/20200718164240666.png" alt></p><p>这时父元素的高度消失了，上下边框合并，这就是所谓的的<strong>高度崩塌</strong></p><h3 id="问题二：浮动元素之后的元素忽视浮动元素"><a href="#问题二：浮动元素之后的元素忽视浮动元素" class="headerlink" title="问题二：浮动元素之后的元素忽视浮动元素"></a>问题二：浮动元素之后的元素忽视浮动元素</h3><p>这个就不贴图了，浮动元素脱离文档流之后，如果后面还有元素，则会无视浮动元素存在，经常发生的就是两者重叠或后面元素被覆盖。</p><h2 id="常用的几种清除浮动的方法"><a href="#常用的几种清除浮动的方法" class="headerlink" title="常用的几种清除浮动的方法"></a>常用的几种清除浮动的方法</h2><h3 id="方法一："><a href="#方法一：" class="headerlink" title="方法一："></a>方法一：</h3><h4 id="为父元素添加高度"><a href="#为父元素添加高度" class="headerlink" title="为父元素添加高度"></a>为父元素添加高度</h4><p>在没有设置父元素的高度时，高度为<code>height:auto</code>，这时是由子元素撑开的。设置高度后解决了父元素高度塌陷问题。</p><p>缺陷:并没有解决第二个问题，以及高度固定后的维护问题。</p><h3 id="方法二："><a href="#方法二：" class="headerlink" title="方法二："></a>方法二：</h3><h4 id="在每一个浮动元素后一个空的div元素，设置clear-both"><a href="#在每一个浮动元素后一个空的div元素，设置clear-both" class="headerlink" title="在每一个浮动元素后一个空的div元素，设置clear:both"></a>在每一个浮动元素后一个空的div元素，设置<code>clear:both</code></h4><p>clear属性是设置在空元素上的，float会影响其他的相邻元素，但是clear只会影响自身，不会对他的相邻元素产生影响；他的要求是保证自己的两边不会有浮动元素；</p><p><code>clear:left</code>代表在左侧不会有浮动元素，类似的right是在右侧不会有浮动元素；<code>clear：both</code>是表示在元素的两侧不存在浮动元素；在空的div块中使用这个属性可以保证这个空div块会下移，此时就可以撑开父元素；同时这个空div块也是一个常规的块级标签因此也会良好的解决问题二；</p><p>缺陷：为了布局添加了毫无意义的标签，如果有大量的毫无意义的空div标签那么将会造成极大的冗余。</p><h3 id="方法三："><a href="#方法三：" class="headerlink" title="方法三："></a>方法三：</h3><h4 id="将父元素一起浮动"><a href="#将父元素一起浮动" class="headerlink" title="将父元素一起浮动"></a>将父元素一起浮动</h4><p>只能解决问题一，无法解决问题二.而且父元素浮动后很可能整个板块都要浮动。不推荐此方法。</p><h3 id="方法四："><a href="#方法四：" class="headerlink" title="方法四："></a>方法四：</h3><h4 id="为父元素设置overflow-hidden"><a href="#为父元素设置overflow-hidden" class="headerlink" title="为父元素设置overflow:hidden"></a>为父元素设置<code>overflow:hidden</code></h4><p>可以通过设置BFC的方式，清除浮动。</p><p>（点此处跳转至：<a href="关于BFC.md">关于BFC</a>）</p><p>如果子元素的尺寸大于父元素，或者子元素中的内容过多，那么多出来的这一部分将不会溢出，也不会显示出来，会直接被hidden起来。</p><h3 id="方法五："><a href="#方法五：" class="headerlink" title="方法五："></a>方法五：</h3><h4 id="使用伪元素-after"><a href="#使用伪元素-after" class="headerlink" title="使用伪元素::after"></a>使用伪元素::after</h4><p>（点此处跳转至：<a href="伪元素before和after的使用.md">关于BFC</a>）</p>]]></content>
<summary type="html">
<h1 id="CSS中浮动的影响以及如何清除"><a href="#CSS中浮动的影响以及如何清除" class="headerlink" title="CSS中浮动的影响以及如何清除"></a>CSS中浮动的影响以及如何清除</h1><p>对于刚接触CSS的我来说，浮动属性基
</summary>
<category term="CSS" scheme="https://Ray9972.github.io.git/categories/CSS/"/>
<category term="CSS" scheme="https://Ray9972.github.io.git/tags/CSS/"/>
<category term="浮动" scheme="https://Ray9972.github.io.git/tags/%E6%B5%AE%E5%8A%A8/"/>
</entry>
<entry>
<title>CSS 伪元素::before和::after的使用</title>
<link href="https://ray9972.github.io.git/2020/07/18/%E4%BC%AA%E5%85%83%E7%B4%A0before%E5%92%8Cafter%E7%9A%84%E4%BD%BF%E7%94%A8/"/>
<id>https://ray9972.github.io.git/2020/07/18/%E4%BC%AA%E5%85%83%E7%B4%A0before%E5%92%8Cafter%E7%9A%84%E4%BD%BF%E7%94%A8/</id>
<published>2020-07-18T01:14:26.000Z</published>
<updated>2020-07-19T09:52:01.730Z</updated>
<content type="html"><ps:左边和上边的是padding与margin的自带距离,使用全局`*{margin:0;padding:0;}`即可</code></pre>]]></content>
<summary type="html">
<h1 id="CSS-伪元素-before和-after的使用"><a href="#CSS-伪元素-before和-after的使用" class="headerlink" title="CSS 伪元素::before和::after的使用"></a>CSS 伪元素::bef
</summary>
<category term="CSS" scheme="https://Ray9972.github.io.git/categories/CSS/"/>
<category term="CSS" scheme="https://Ray9972.github.io.git/tags/CSS/"/>
<category term="伪元素" scheme="https://Ray9972.github.io.git/tags/%E4%BC%AA%E5%85%83%E7%B4%A0/"/>
</entry>
</feed>