-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
360 lines (199 loc) · 162 KB
/
atom.xml
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hoff's blog</title>
<link href="/younghf.github.io/atom.xml" rel="self"/>
<link href="http://yoursite.com/younghf.github.io/"/>
<updated>2018-03-20T18:47:01.892Z</updated>
<id>http://yoursite.com/younghf.github.io/</id>
<author>
<name>Hoff</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>面试小计——不重复随机输出[1-10000]区间数字</title>
<link href="http://yoursite.com/younghf.github.io/2018/03/21/%E9%9D%A2%E8%AF%95%E5%B0%8F%E8%AE%A1%E2%80%94%E2%80%94%E4%B8%8D%E9%87%8D%E5%A4%8D%E9%9A%8F%E6%9C%BA%E8%BE%93%E5%87%BA-1-10000-%E5%8C%BA%E9%97%B4%E6%95%B0%E5%AD%97/"/>
<id>http://yoursite.com/younghf.github.io/2018/03/21/面试小计——不重复随机输出-1-10000-区间数字/</id>
<published>2018-03-20T18:19:28.000Z</published>
<updated>2018-03-20T18:47:01.892Z</updated>
<content type="html"><![CDATA[<h3 id="昨天去面试，面试官出了一道题，随机得到1-10000中的全部整数，且不能重复，当时就想到以下方法："><a href="#昨天去面试，面试官出了一道题，随机得到1-10000中的全部整数，且不能重复，当时就想到以下方法：" class="headerlink" title="昨天去面试，面试官出了一道题，随机得到1~10000中的全部整数，且不能重复，当时就想到以下方法："></a>昨天去面试，面试官出了一道题，随机得到1~10000中的全部整数，且不能重复，当时就想到以下方法：</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">var old = new Date().getTime();</span><br><span class="line">var arr = [];</span><br><span class="line">while (arr.length<10000){</span><br><span class="line">var randomNum = Math.floor(Math.random()*10000+1);</span><br><span class="line">if (arr.indexOf(randomNum) == -1){</span><br><span class="line">arr.push(randomNum)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line">document.write(arr)</span><br><span class="line">var cur = new Date().getTime();</span><br><span class="line">console.log(cur-old);</span><br></pre></td></tr></table></figure><p><img src="/2018/03/21/面试小计——不重复随机输出-1-10000-区间数字/1.png" alt="1.png"></p><h3 id="当时面试官问我还有没有更高效的方法，一时我真没想出来，现在现在突然想起来之前关于数组去重的博客，对象键值法不是正适用吗？"><a href="#当时面试官问我还有没有更高效的方法，一时我真没想出来，现在现在突然想起来之前关于数组去重的博客，对象键值法不是正适用吗？" class="headerlink" title="当时面试官问我还有没有更高效的方法，一时我真没想出来，现在现在突然想起来之前关于数组去重的博客，对象键值法不是正适用吗？"></a>当时面试官问我还有没有更高效的方法，一时我真没想出来，现在现在突然想起来之前关于数组去重的博客，对象键值法不是正适用吗？</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">var old = new Date().getTime();</span><br><span class="line">var arr = [];</span><br><span class="line">var obj = {};</span><br><span class="line">while (arr.length<10000){</span><br><span class="line">var randomNum = Math.floor(Math.random()*10000+1);</span><br><span class="line">if(!obj[randomNum]){</span><br><span class="line">arr.push(randomNum);</span><br><span class="line">obj[randomNum] = 1;</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">document.write(arr)</span><br><span class="line">var cur = new Date().getTime();</span><br><span class="line">console.log(cur-old);</span><br></pre></td></tr></table></figure><p><img src="/2018/03/21/面试小计——不重复随机输出-1-10000-区间数字/2.png" alt="2.png"></p><h3 id="对比以上两种方法，对象键值法大约快了好几十倍啊-博主不才，大家还有好的想法，希望能留言分享一下哈"><a href="#对比以上两种方法，对象键值法大约快了好几十倍啊-博主不才，大家还有好的想法，希望能留言分享一下哈" class="headerlink" title="对比以上两种方法，对象键值法大约快了好几十倍啊!博主不才，大家还有好的想法，希望能留言分享一下哈~"></a>对比以上两种方法，对象键值法大约快了好几十倍啊!博主不才，大家还有好的想法，希望能留言分享一下哈~</h3>]]></content>
<summary type="html">
<h3 id="昨天去面试，面试官出了一道题，随机得到1-10000中的全部整数，且不能重复，当时就想到以下方法："><a href="#昨天去面试，面试官出了一道题，随机得到1-10000中的全部整数，且不能重复，当时就想到以下方法：" class="headerlink" t
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JS" scheme="http://yoursite.com/younghf.github.io/tags/JS/"/>
</entry>
<entry>
<title>页面架构</title>
<link href="http://yoursite.com/younghf.github.io/2018/01/03/%E9%A1%B5%E9%9D%A2%E6%9E%B6%E6%9E%84/"/>
<id>http://yoursite.com/younghf.github.io/2018/01/03/页面架构/</id>
<published>2018-01-03T07:53:32.000Z</published>
<updated>2018-01-03T09:30:41.302Z</updated>
<content type="html"><![CDATA[<h2 id="CSS-Reset"><a href="#CSS-Reset" class="headerlink" title="CSS Reset"></a>CSS Reset</h2><p><strong>定义：</strong></p><p>清除默认样式。</p><p>全局样式定义。</p><h4 id="Reset-First"><a href="#Reset-First" class="headerlink" title="Reset First:"></a>Reset First:</h4><ul><li>在项目初期确定</li><li>样式定义时顺序应放在第一位</li></ul><h2 id="布局解决方案"><a href="#布局解决方案" class="headerlink" title="布局解决方案"></a>布局解决方案</h2><blockquote><h3 id="居中布局"><a href="#居中布局" class="headerlink" title="居中布局"></a>居中布局</h3></blockquote><p><strong>一、水平居中布局（子容器和父容器宽度不定情况）</strong></p><p><img src="/2018/01/03/页面架构/center.jpg" alt="center.jpg"></p><p><strong>inline-block + text-align</strong></p><p><img src="/2018/01/03/页面架构/center1.jpg" alt="center1.jpg"></p><ul><li>兼容性好，兼容IE6-7;</li><li>需要额外代码来修复text-align 造成问题。</li></ul><p><strong>table + margin</strong></p><p><img src="/2018/01/03/页面架构/center2.jpg" alt="center2.jpg"></p><p><strong>absolute + transform</strong></p><p><img src="/2018/01/03/页面架构/center3.jpg" alt="center3.jpg"></p><ul><li>居中元素不会对其他元素产生影响</li><li>兼容性较差</li></ul><p><strong>flex + justify-content</strong></p><p><img src="/2018/01/03/页面架构/center4.jpg" alt="center4.jpg"></p><p><img src="/2018/01/03/页面架构/center5.jpg" alt="center5.jpg"></p><ul><li>只需设置父元素即可实现居中布局</li><li>低版本不支持</li></ul><p><strong>二、垂直居中（子容器和父容器高度不定情况）</strong></p><p><img src="/2018/01/03/页面架构/center6.jpg" alt="center6.jpg"></p><p><strong>table-cell + vertical-align</strong></p><p><img src="/2018/01/03/页面架构/center7.jpg" alt="center7.jpg"></p><ul><li>兼容性较好（IE6-7，需要将结构改为表格结构）</li></ul><p><strong>absolute + transform</strong></p><p><img src="/2018/01/03/页面架构/center8.jpg" alt="center8.jpg"></p><p><strong>flex + align-items</strong></p><p><img src="/2018/01/03/页面架构/center9.jpg" alt="center9.jpg"></p><p><strong>三、水平-垂直居中</strong></p><p><img src="/2018/01/03/页面架构/center10.jpg" alt="center10.jpg"></p><p><strong>inline-block + text-align + table-cell + vertical-align</strong></p><p><img src="/2018/01/03/页面架构/center11.jpg" alt="center11.jpg"></p><p><strong>absolute + transform</strong></p><p><img src="/2018/01/03/页面架构/center12.jpg" alt="center12.jpg"></p><p><strong>flex + justify-content + align-items</strong></p><p><img src="/2018/01/03/页面架构/center13.jpg" alt="center13.jpg"></p><blockquote><h3 id="多列布局"><a href="#多列布局" class="headerlink" title="多列布局"></a>多列布局</h3></blockquote><p><img src="/2018/01/03/页面架构/center14.jpg" alt="center14.jpg"></p><p><strong>float + margin</strong></p><p><img src="/2018/01/03/页面架构/center15.jpg" alt="center15.jpg"></p><ul><li>IE6 不兼容，会产生3px 的bug.</li><li>清除浮动时也会出现某些问题</li></ul><p><strong>float + margin + (fix)</strong></p><p><img src="/2018/01/03/页面架构/center16.jpg" alt="center16.jpg"></p><ul><li>兼容性好，兼容IE6</li></ul><p><strong>float + overflow</strong></p><p><img src="/2018/01/03/页面架构/center17.jpg" alt="center17.jpg"></p><p><strong>table</strong></p><p><img src="/2018/01/03/页面架构/center18.jpg" alt="center18.jpg"></p><p>table-layout：auto | fixed</p><p>设置或检索表格的布局算法。</p><ul><li>auto： 默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢</li><li>fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切</li><li>通常fixed 算法会比auto 算法高效，尤其是对于那些长表格来说。fixed 算法使得表格可以像其它元素一样一行一行的渲染。</li></ul><p><strong>flex</strong></p><p><img src="/2018/01/03/页面架构/center19.jpg" alt="center19.jpg"></p><p><strong>适用于小范围的布局使用，复杂布局不建议使用。</strong></p><p><img src="/2018/01/03/页面架构/center20.jpg" alt="center20.jpg"></p><p><img src="/2018/01/03/页面架构/center21.jpg" alt="center21.jpg"></p><p><img src="/2018/01/03/页面架构/center22.jpg" alt="center22.jpg"></p><p><strong>float + overflow</strong></p><p><img src="/2018/01/03/页面架构/center23.jpg" alt="center23.jpg"></p><p><img src="/2018/01/03/页面架构/center24.jpg" alt="center24.jpg"></p><p><strong>table</strong></p><p><img src="/2018/01/03/页面架构/center25.jpg" alt="center25.jpg"></p><p>设置宽度由内容决定时，代码如下：</p><p><img src="/2018/01/03/页面架构/center26.jpg" alt="center26.jpg"></p><p><strong>flex</strong></p><p><img src="/2018/01/03/页面架构/center27.jpg" alt="center27.jpg"></p><p><img src="/2018/01/03/页面架构/center28.jpg" alt="center28.jpg"></p><p><img src="/2018/01/03/页面架构/center29.jpg" alt="center29.jpg"></p><p><img src="/2018/01/03/页面架构/center30.jpg" alt="center30.jpg"></p><p><img src="/2018/01/03/页面架构/center31.jpg" alt="center31.jpg"></p><p><strong>float</strong></p><p><img src="/2018/01/03/页面架构/center32.jpg" alt="center32.jpg"></p><p>C = W<em>N + G</em>(N-1) → C + G =(W+G)*N</p><p><img src="/2018/01/03/页面架构/center33.jpg" alt="center33.jpg"></p><p>解决方案：</p><p><img src="/2018/01/03/页面架构/center34.jpg" alt="center34.jpg"></p><p><strong>table</strong></p><p><img src="/2018/01/03/页面架构/center35.jpg" alt="center35.jpg"></p><p><img src="/2018/01/03/页面架构/center36.jpg" alt="center36.jpg"></p><p><strong>flex</strong></p><p><img src="/2018/01/03/页面架构/center37.jpg" alt="center37.jpg"></p><p><img src="/2018/01/03/页面架构/center38.jpg" alt="center38.jpg"></p><blockquote><h3 id="等高布局"><a href="#等高布局" class="headerlink" title="等高布局"></a>等高布局</h3></blockquote><p><strong>table</strong></p><p><img src="/2018/01/03/页面架构/center39.jpg" alt="center39.jpg"></p><p><strong>flex</strong></p><p><img src="/2018/01/03/页面架构/center40.jpg" alt="center40.jpg"></p><p><strong>float</strong></p><p><img src="/2018/01/03/页面架构/center41.jpg" alt="center41.jpg"></p><blockquote><h3 id="全屏布局"><a href="#全屏布局" class="headerlink" title="全屏布局"></a>全屏布局</h3></blockquote><p><img src="/2018/01/03/页面架构/center42.jpg" alt="center42.jpg"></p><p><strong>特点：</strong></p><ul><li>页面撑满浏览器窗口，当浏览器窗口变大时，页面也随着变大。</li><li>滚动条出现在内容区域</li></ul><p>实现方案：</p><ul><li>position</li><li>Flex</li></ul><p><strong>Position</strong></p><p><img src="/2018/01/03/页面架构/center43.jpg" alt="center43.jpg"></p><p>Position(兼容)</p><ul><li>IE6 不支持</li><li>Hack 方案：<a href="http://nec.netease.com/library/141027" target="_blank" rel="noopener">http://nec.netease.com/library/141027</a></li></ul><p><img src="/2018/01/03/页面架构/center44.jpg" alt="center44.jpg"></p><p><strong>Flex</strong></p><p><img src="/2018/01/03/页面架构/center45.jpg" alt="center45.jpg"></p><p>Flex(兼容)</p><ul><li>IE9 及以下不兼容</li></ul><p><img src="/2018/01/03/页面架构/center46.jpg" alt="center46.jpg"></p><p>实现方案：</p><ul><li>position</li><li>Flex</li></ul><p><strong>Position</strong></p><p><img src="/2018/01/03/页面架构/center47.jpg" alt="center47.jpg"></p><p><strong>Flex</strong></p><p><img src="/2018/01/03/页面架构/center48.jpg" alt="center48.jpg"></p><p><img src="/2018/01/03/页面架构/center49.jpg" alt="center49.jpg"></p><p><strong>实现方案</strong></p><ul><li>Position ×</li><li>Flex √</li><li>Grid √</li></ul><p><strong>Flex（自适应）</strong></p><p><img src="/2018/01/03/页面架构/center50.jpg" alt="center50.jpg"></p><p><strong>Grid（自适应）</strong></p><p>参考：</p><p><a href="http://www.w3cplus.com/css3/grid.html" target="_blank" rel="noopener">http://www.w3cplus.com/css3/grid.html</a></p><p><a href="https://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/" target="_blank" rel="noopener">https://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/</a></p><p><strong>总结：</strong></p><p><img src="/2018/01/03/页面架构/center51.jpg" alt="center51.jpg"></p>]]></content>
<summary type="html">
<h2 id="CSS-Reset"><a href="#CSS-Reset" class="headerlink" title="CSS Reset"></a>CSS Reset</h2><p><strong>定义：</strong></p>
<p>清除默认样式。</p>
<p
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="页面架构" scheme="http://yoursite.com/younghf.github.io/tags/%E9%A1%B5%E9%9D%A2%E6%9E%B6%E6%9E%84/"/>
</entry>
<entry>
<title>从数组中随机取10个不重复的数</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/26/%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E9%9A%8F%E6%9C%BA%E5%8F%9610%E4%B8%AA%E4%B8%8D%E9%87%8D%E5%A4%8D%E7%9A%84%E6%95%B0/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/26/从数组中随机取10个不重复的数/</id>
<published>2017-12-26T14:58:06.000Z</published>
<updated>2017-12-29T08:21:33.219Z</updated>
<content type="html"><![CDATA[<h3 id="解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行百度吧。"><a href="#解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行百度吧。" class="headerlink" title="解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行百度吧。"></a>解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行百度吧。</h3><blockquote><p>对象键值法去重</p></blockquote><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">Array.prototype.unique1 = function(){</span><br><span class="line"> var res = [];</span><br><span class="line"> var obj = {};</span><br><span class="line"> for(var i = 0; i < this.length; i++){</span><br><span class="line"> if(!obj[this[i]]){</span><br><span class="line"> res.push(this[i]);</span><br><span class="line"> obj[this[i]] = 1;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return res;</span><br><span class="line">}</span><br><span class="line">var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];</span><br><span class="line">alert(arr.unique1());</span><br></pre></td></tr></table></figure><p>当然现在ES6有更简便的方法解决这个问题，直接在解决从数组中随机取10个不重复的数给大家演示了。</p><blockquote><p>从数组中随机取10个不重复的数</p></blockquote><figure class="highlight plain"><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">let arr =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,1,2,3,4,5,6,7];</span><br><span class="line">let set = new Set(arr); // 利用ES6的Set数据类型去重</span><br><span class="line">let newArr = [...set]; // 将Set 转换成 Array</span><br><span class="line">let randomArr = [];</span><br><span class="line">for (let i = 0;i<10 ;i++){</span><br><span class="line"> let index = Math.round(Math.random()*(newArr.length-1));</span><br><span class="line"> document.write(index+'</br>');</span><br><span class="line"> let item = newArr.splice(index,1);</span><br><span class="line"> randomArr.push(item);</span><br><span class="line">}</span><br><span class="line">document.write(randomArr)</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h3 id="解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行百度吧。"><a href="#解决这个问题之前先介绍一下数组去重吧，这个问题的解决方案有很多，我这里就介绍一个比较合理通用的方法，更多的大家请自行
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JS" scheme="http://yoursite.com/younghf.github.io/tags/JS/"/>
</entry>
<entry>
<title>ES6学习</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/08/ES6%E5%AD%A6%E4%B9%A0/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/08/ES6学习/</id>
<published>2017-12-07T16:46:08.000Z</published>
<updated>2017-12-09T13:39:17.288Z</updated>
<content type="html"><![CDATA[<blockquote><h3 id="let-与-var"><a href="#let-与-var" class="headerlink" title="let 与 var"></a>let 与 var</h3></blockquote><ol><li><p>作用域只局限于当前代码块</p> <figure class="highlight plain"><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><br><span class="line">var str = "张三"</span><br><span class="line">let str1 = "李四"</span><br><span class="line">}</span><br><span class="line">console.log(str) // 张三</span><br><span class="line">console.log(str) // 会报错not defined</span><br></pre></td></tr></table></figure></li><li><p>声明的变量作用域不会被提升</p> <figure class="highlight plain"><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><br><span class="line">console.log(str) // undefined</span><br><span class="line">var str = "张三"</span><br><span class="line"></span><br><span class="line">console.log(str1) // 会报错not defined</span><br><span class="line">let str1 = "李四"</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>在相同的作用域下不能声明相同的变量</p> <figure class="highlight plain"><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><br><span class="line">let str1 = "张三";</span><br><span class="line">let str1 = "李四";</span><br><span class="line"></span><br><span class="line">console.log(str1) // 报错</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>for 循环提现let的作用域</p> <figure class="highlight plain"><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">var oLi = document.getElementsByTagName('li');</span><br><span class="line">for (var i = 0;i < oLi.length;i++){</span><br><span class="line">oLi[i].onclick = function (){</span><br><span class="line">alert(i)</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">// 这里alert的结果均为li标签的总个数</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><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><br><span class="line"></span><br><span class="line">var oLi = document.getElementsByTagName('li');</span><br><span class="line">for (var i = 0;i < oLi.length;i++){</span><br><span class="line">(function (i){</span><br><span class="line">oLi[i].onclick = function (){</span><br><span class="line">alert(i)</span><br><span class="line">}</span><br><span class="line">})(i)</span><br><span class="line">}</span><br><span class="line">// 这里alert的结果为 0 到 oLi.length-1；</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// ES6的let就不会存在以上的问题</span><br><span class="line"></span><br><span class="line">var oLi = document.getElementsByTagName('li');</span><br><span class="line">for (let i = 0;i < oLi.length;i++){</span><br><span class="line">oLi[i].onclick = function (){</span><br><span class="line">alert(i)</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">// 这里alert的结果为 0 到 oLi.length-1；</span><br><span class="line"></span><br><span class="line">for (let i = 0;i < 5;i++){</span><br><span class="line">let i = 20;</span><br><span class="line">console.log(i) // 输出了5次 20 ；</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><h3 id="const"><a href="#const" class="headerlink" title="const"></a>const</h3></blockquote><ol><li><p>作用域只局限于当前代码块</p> <figure class="highlight plain"><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><br><span class="line">const str = "张三"</span><br><span class="line">console.log(str) // 张三</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">console.log(str) // 会报错not defined</span><br></pre></td></tr></table></figure></li><li><p>声明的变量作用域不会被提升</p> <figure class="highlight plain"><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><br><span class="line">console.log(str1) // 会报错not defined</span><br><span class="line">const str1 = "李四"</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>不能重复声明</p> <figure class="highlight plain"><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><br><span class="line">const str1 = "张三";</span><br><span class="line">const str1 = "李四";</span><br><span class="line"></span><br><span class="line">console.log(str1) // 报错</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>声明的变量必须赋值</p> <figure class="highlight plain"><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><br><span class="line">const str;</span><br><span class="line">str = "张三";</span><br><span class="line"></span><br><span class="line">console.log(str) // 会报错</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>const声明的变量一般不能修改，引用类型除外</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line">const str = “李四”;</span><br><span class="line">str = "张三";</span><br><span class="line"></span><br><span class="line">console.log(str) // 会报错，const声明的变量一般不能修改，引用类型除外，如下</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">{</span><br><span class="line">const obj = {name:'张三'};</span><br><span class="line">console.log(obj) // {name:'张三'}</span><br><span class="line"></span><br><span class="line">obj.name = "李四";</span><br><span class="line">console.log(obj) // {name:'李四'}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3></blockquote><ol><li><p>基本用法</p><pre><code>let name = "张三",age = 18,sex = "男";let [name,age,sex] = ["张三","18","男"]console.log(name) // 张三console.log(age) // 18console.log(sex) // 男</code></pre></li><li><p>对象解构赋值</p> <figure class="highlight plain"><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">let { name , age , sex} = {name : "张三" , age : 55, sex: "男"};</span><br><span class="line">console.log(name) // 张三</span><br><span class="line">console.log(age) // 55</span><br><span class="line">console.log(sex) // 男</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><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">let { name , age , sex} = {name : "张三" , age : 55, friends : ["李四" , "王五"] ,sex: "男"};</span><br><span class="line">console.log(name) // 张三</span><br><span class="line">console.log(age) // 55</span><br><span class="line">console.log(sex) // undefined</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let {name : str} = {name:"张三"}</span><br><span class="line">console.log(name) // 为空，不能打印出信息</span><br><span class="line">console.log(str) // 张三</span><br></pre></td></tr></table></figure></li><li><p>数组的结构赋值</p> <figure class="highlight plain"><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">let [name , age , sex] = ["张三", 22 , "女"]</span><br><span class="line">let [arr,[arr1 , arr2 , [arr3 , arr4]]] = [0 , [1 , 2 , [3 , 4]]]</span><br><span class="line"></span><br><span class="line">let [arr5] = []</span><br><span class="line">console.log(arr5) // undefined</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let [a,,c] = [1,2,3]</span><br><span class="line">console.log(c) // 3</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let [a , , , c] = [1,2,3]</span><br><span class="line">console.log(c) // undefined</span><br></pre></td></tr></table></figure></li><li><p>基本类型的结构赋值</p> <figure class="highlight plain"><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">let [a, b ,c ,d]= '我是小明';</span><br><span class="line">console.log(a) </span><br><span class="line">console.log(b)</span><br><span class="line">console.log(c)</span><br><span class="line">console.log(d)</span><br></pre></td></tr></table></figure> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let [a, b ,c ,d , e]= 12306;</span><br><span class="line">console.log(a) // Uncaught TypeError: 12306 is not iterable</span><br></pre></td></tr></table></figure></li></ol><blockquote><h3 id="新增的数据类型-Set"><a href="#新增的数据类型-Set" class="headerlink" title="新增的数据类型 - Set"></a>新增的数据类型 - Set</h3></blockquote><p><strong>特点:</strong></p><ul><li>类似数组，没有重复的元素（唯一的） </li><li>开发中用于去重 </li><li>key和value都是相等的</li></ul><ol><li><p>创建一个集合</p><p> <img src="/2017/12/08/ES6学习/set.jpg" alt="set.jpg"></p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let set = new Set(['张三','李四','王五','王五']);</span><br><span class="line">console.log(set) // 会去重</span><br></pre></td></tr></table></figure><p> <img src="/2017/12/08/ES6学习/set1.jpg" alt="set1.jpg"></p></li><li><p>一个属性 - size</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let set = new Set(['张三','李四','王五','王五']);</span><br><span class="line">console.log(set.size) // 3</span><br></pre></td></tr></table></figure></li><li><p>方法</p></li></ol><ul><li><p>add</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">set.add("刘德华").add("小明")</span><br></pre></td></tr></table></figure></li><li><p>delete</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">set.delete("刘德华")</span><br></pre></td></tr></table></figure></li><li><p>has</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">set.has("张三") // true</span><br><span class="line">set.has("刘德华") // false</span><br></pre></td></tr></table></figure></li><li><p>clear</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(set.clear()) // undefined 没有返回值</span><br></pre></td></tr></table></figure></li><li><p>keys values</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(set.keys())</span><br><span class="line">console.log(set.values())</span><br></pre></td></tr></table></figure><p> <img src="/2017/12/08/ES6学习/key_value.jpg" alt="key_value.jpg"></p></li></ul><blockquote><h3 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h3></blockquote><p><strong>特点</strong></p><ul><li>类似于对象，本质上是键值对的集合</li><li>“键”不局限于字符串，各种类型的值（包括对象）都可以当做键</li><li>对象：“字符串 - 值”，Map：“值 - 值”，是一种更加完善的Hash结构的实现</li></ul><ol><li><p>创建一个Map</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">let obj1 = {a:1},obj2 = {b:2};</span><br><span class="line">const map = new Map([</span><br><span class="line">['name','张三'],</span><br><span class="line">['age',18],</span><br><span class="line">['sex','男'],</span><br><span class="line">[obj1,'天气很好'],</span><br><span class="line">[obj2,'适合敲代码'],</span><br><span class="line">[[1,2],'牛逼啊']</span><br><span class="line">])</span><br><span class="line">console.log(map)</span><br></pre></td></tr></table></figure><p> <img src="/2017/12/08/ES6学习/map.jpg" alt="map.jpg"></p></li><li><p>常用属性 - size</p><p> console.log(map.size)</p><p> <img src="/2017/12/08/ES6学习/map1.jpg" alt="map1.jpg"></p></li><li><p>方法</p><p> <img src="/2017/12/08/ES6学习/map2.jpg" alt="map2.jpg"></p></li><li><p>set get delete has clear keys(获取键) values(获取值) entries(获取键值)</p> <figure class="highlight plain"><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">map.set('friends',['赵六','李七']).set(['dog','小花']);</span><br><span class="line">map.get('obj1')</span><br><span class="line">map.delete('obj1')</span><br><span class="line">...</span><br></pre></td></tr></table></figure></li><li><p>遍历</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">map.forEach(function(value,index){</span><br><span class="line">console.log(index + ":" +value)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>注意事项</p> <figure class="highlight plain"><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">map.set({},"哈哈")</span><br><span class="line">map.set({},"呵呵")</span><br><span class="line"></span><br><span class="line">// 会添加两条数据</span><br></pre></td></tr></table></figure></li></ol><blockquote><h3 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h3></blockquote><p><strong>特点</strong></p><ul><li>ES5的对象属性都是字符串，容易造成属性名冲突</li><li>ES6引入新的原始数据类型Symbol，表示独一无二的值</li></ul><ol><li><p>定义</p> <figure class="highlight plain"><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">let smb1 = Symbol();</span><br><span class="line">let smb2 = Symbol();</span><br><span class="line"></span><br><span class="line">console.log(smb1 === smb2) // false</span><br><span class="line">console.log(typeof smb1) // symbol</span><br></pre></td></tr></table></figure></li><li><p>描述</p> <figure class="highlight plain"><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">let str1 = Symbol('name');</span><br><span class="line">let str2 = Symbol('name');</span><br><span class="line"></span><br><span class="line">console.log(str1) // Symbol(name)</span><br><span class="line">console.log(str2) // Symbol(name)</span><br><span class="line"></span><br><span class="line">console.log(str1 === str2) // false</span><br></pre></td></tr></table></figure></li><li><p>对象的属性名</p> <figure class="highlight plain"><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">const obj = {};</span><br><span class="line">// obj.name = '张三';</span><br><span class="line">// obj.name = '李四';</span><br><span class="line"></span><br><span class="line">obj[Symbol('name')] = '张三';</span><br><span class="line">obj[Symbol('name')] = '李四';</span><br><span class="line"></span><br><span class="line">console.log(obj);</span><br></pre></td></tr></table></figure><p> <img src="/2017/12/08/ES6学习/symbol.jpg" alt="symbol.jpg"></p></li></ol><blockquote><h3 id="Class-语法糖"><a href="#Class-语法糖" class="headerlink" title="Class 语法糖"></a>Class 语法糖</h3></blockquote><ol><li><p>构造函数</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">function Person(name,age){</span><br><span class="line">this.name = name;</span><br><span class="line">this.age = age;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Person.prototype = {</span><br><span class="line">constructor: Person,</span><br><span class="line">Say:function(){</span><br><span class="line">console.log("我的名字叫" + this.name + "，今年" + this.age + "岁")</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">let person = new Person('小明',18);</span><br><span class="line">console.log(person)</span><br></pre></td></tr></table></figure></li><li><p>通过class面向对象</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">class Person{</span><br><span class="line">constructor(name,age){</span><br><span class="line">this.name = name;</span><br><span class="line">this.age = age;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Say:function(){</span><br><span class="line">console.log("我的名字叫" + this.name + "，今年" + this.age + "岁")</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><h3 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h3></blockquote><ol><li><p>模板字符串 ``</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><style></span><br><span class="line">.test{color:red}</span><br><span class="line"></style></span><br><span class="line"></span><br><span class="line">let str = '今天天气很好';</span><br><span class="line">let className = 'test';</span><br><span class="line">let html = `</span><br><span class="line"><html></span><br><span class="line"><head></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"><p class='$(className)'>${str}</p></span><br><span class="line"></body></span><br><span class="line"></html>`;</span><br></pre></td></tr></table></figure></li><li><p>数组的拓展</p><ul><li><p>Array.form // 把伪数组等转换成正式的数组</p><figure class="highlight plain"><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">let allList = document.getElementsByTagName("li"); //这是一个伪数组</span><br><span class="line">console.log(allList);</span><br><span class="line">console.log(Array.isArray(allList)) // false</span><br><span class="line"></span><br><span class="line">console.log(Array.from(allList))</span><br><span class="line">console.log(Array.isArray(allList)) // true</span><br></pre></td></tr></table></figure></li><li><p>Array.of</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(Array.of(1,2,3,4)) // [1,2,3,4]</span><br><span class="line">console.log(Array.of('张三','李四','王五')) // ['张三','李四','王五']</span><br></pre></td></tr></table></figure></li></ul></li><li><p>对象的拓展</p><ul><li><p>key和value是一样的时候，写一个就够了</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">let name = "张三";</span><br><span class="line">let age = "18";</span><br><span class="line"></span><br><span class="line">/*let obj = {</span><br><span class="line">name: name,</span><br><span class="line">age:age</span><br><span class="line">}*/</span><br><span class="line"></span><br><span class="line">let obj = {</span><br><span class="line">name,</span><br><span class="line">age</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>Object.assign() //多个对象合成一个对象</p><figure class="highlight plain"><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">let obj = {name:'张三'};</span><br><span class="line">let obj1 = {age:18};</span><br><span class="line">let obj2 = {sex:'男'};</span><br><span class="line"></span><br><span class="line">Object.assign(obj, obj1, obj2)</span><br></pre></td></tr></table></figure></li></ul></li></ol><blockquote><h3 id="延展操作符"><a href="#延展操作符" class="headerlink" title="延展操作符"></a>延展操作符</h3></blockquote><pre><code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let str = '天气很好';</span><br><span class="line">let strArr = [...str]</span><br><span class="line">console.log(strArr) // ['天','气','很','好']</span><br></pre></td></tr></table></figure><figure class="highlight plain"><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><br><span class="line"></span><br><span class="line">let myArr = [1,2,3,4,5,2,3];</span><br><span class="line">console.log([...new Set(myArr)]) // [1,2,3,4,5]</span><br></pre></td></tr></table></figure></code></pre><blockquote><h3 id="函数的拓展"><a href="#函数的拓展" class="headerlink" title="函数的拓展"></a>函数的拓展</h3></blockquote><ol><li><p>形参设置默认值</p> <figure class="highlight plain"><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">/*function sum(num1,num2){</span><br><span class="line">num1 = num1 || 10;</span><br><span class="line">num2 = num2 || 20</span><br><span class="line">console.log(num1 + num2)</span><br><span class="line">}*/</span><br><span class="line"></span><br><span class="line">function sum(num1 = 10,num2 = 20){</span><br><span class="line">console.log(num1 + num2)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">sum();</span><br></pre></td></tr></table></figure></li><li><p>参数形式：延展操作符</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">/*function sum(){</span><br><span class="line">let result = 0;</span><br><span class="line">for (let value of arguments){</span><br><span class="line">result += value;</span><br><span class="line">}</span><br><span class="line">return result;</span><br><span class="line">}</span><br><span class="line">console.log(sum(10,20,30,40))</span><br><span class="line">*/</span><br><span class="line"></span><br><span class="line">function sum(name,sex,...nums){</span><br><span class="line">let result = 0;</span><br><span class="line">console.log(name);</span><br><span class="line">console.log(sex);</span><br><span class="line">for (let value of nums){</span><br><span class="line">result += value;</span><br><span class="line">}</span><br><span class="line">return result;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">console.log(sum('张三','男',10,20,30,40)) //参数多样化的传递</span><br></pre></td></tr></table></figure></li><li><p>箭头函数 ()=>{} 解决了this指向的问题</p> <figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">/*</span><br><span class="line">function (){}</span><br><span class="line">*/</span><br><span class="line"></span><br><span class="line">let sum = (num1,num2)=>{return num1 + num2;};</span><br><span class="line"></span><br><span class="line">let arr = ['张三','李四','王五'];</span><br><span class="line">arr.forEach((value,index)=>{</span><br><span class="line">console.log(index + ";" +value);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">function demo(){</span><br><span class="line">setTimeout(function (){</span><br><span class="line">console.log(this); // 这里指向的是window</span><br><span class="line">},1000);</span><br><span class="line"></span><br><span class="line">setTimeout(()=>{</span><br><span class="line">console.log(this); // 这里指向的obj</span><br><span class="line">},1000)</span><br><span class="line">}</span><br><span class="line">let obj = {};</span><br><span class="line">demo.call(obj)</span><br></pre></td></tr></table></figure></li></ol><ul><li><p>函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。</p></li><li><p>不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。</p></li><li><p>不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。</p></li><li><p>不可以使用yield命令，因此箭头函数不能用作 Generator 函数。</p><p> 上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。</p></li></ul><p>更多ES6学习请参考阮一峰的 <a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">ECMAScript 6 入门</a></p>]]></content>
<summary type="html">
<blockquote>
<h3 id="let-与-var"><a href="#let-与-var" class="headerlink" title="let 与 var"></a>let 与 var</h3></blockquote>
<ol>
<li><p>作用域只局限
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="ES6" scheme="http://yoursite.com/younghf.github.io/tags/ES6/"/>
</entry>
<entry>
<title>CSS布局</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/06/CSS%E5%B8%83%E5%B1%80/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/06/CSS布局/</id>
<published>2017-12-06T07:36:53.000Z</published>
<updated>2017-12-06T15:13:48.698Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="内容包括："><a href="#内容包括：" class="headerlink" title="内容包括："></a>内容包括：</h1></blockquote><p>布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)</p><blockquote><h1 id="布局属性："><a href="#布局属性：" class="headerlink" title="布局属性："></a>布局属性：</h1></blockquote><p>Display:设置元素的显示方式</p><p>语法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex</p><p>默认值：inline</p><p>取值：</p><ul><li>none： 隐藏对象。与visibility 属性的hidden 值不同，其不为被隐藏的对象保留其物理空间</li><li>inline： 指定对象为内联元素。</li><li>block： 指定对象为块元素。</li><li>list-item： 指定对象为列表项目。</li><li>inline-block： 指定对象为内联块元素。（CSS2）</li><li>table： 指定对象作为块元素级的表格。类同于html 标签<table>（CSS2）</li><li>inline-table： 指定对象作为内联元素级的表格。类同于html 标签<table>（CSS2）</li><li>table-caption： 指定对象作为表格标题。类同于html 标签<caption>（CSS2）</li><li>table-cell： 指定对象作为表格单元格。类同于html 标签<td>（CSS2）</li><li>table-row： 指定对象作为表格行。类同于html 标签<tr>（CSS2）</li><li>table-row-group： 指定对象作为表格行组。类同于html 标签<tbody>（CSS2）</li><li>table-column： 指定对象作为表格列。类同于html 标签<col>（CSS2）</li><li>table-column-group： 指定对象作为表格列组显示。类同于html 标签<colgroup>（CSS2）</li><li>table-header-group： 指定对象作为表格标题组。类同于html 标签<thead>（CSS2）</li><li>table-footer-group： 指定对象作为表格脚注组。类同于html 标签<tfoot>（CSS2）</li><li>run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）</li><li>box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）</li><li>inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）</li><li>flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）</li><li>inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）</li><li>flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）</li><li>inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）</li></ul><blockquote><h3 id="Display-Block（块级元素）"><a href="#Display-Block（块级元素）" class="headerlink" title="Display: Block（块级元素）"></a>Display: Block（块级元素）</h3></blockquote><ul><li>默认宽度为父元素宽度</li><li>可设置宽高</li><li>换行显示</li></ul><p>默认的display:block 元素有：div,h1-h6,p,ul,form,……</p><blockquote><h3 id="Display-inline（行内元素）"><a href="#Display-inline（行内元素）" class="headerlink" title="Display: inline（行内元素）"></a>Display: inline（行内元素）</h3></blockquote><ul><li>默认宽度为内容宽度</li><li>不可设置宽高</li><li>同行显示</li></ul><blockquote><h3 id="Display-block-与display-inline-比较"><a href="#Display-block-与display-inline-比较" class="headerlink" title="Display:block 与display:inline 比较"></a>Display:block 与display:inline 比较</h3></blockquote><table><thead><tr><th>display</th><th>默认宽度</th><th>可设置宽高</th><th>起始位置</th></tr></thead><tbody><tr><td>block</td><td>父元素宽度</td><td>是</td><td>换行</td></tr><tr><td>inline</td><td>内容宽度</td><td>否</td><td>同行</td></tr></tbody></table><blockquote><h3 id="Display-inline-block（行内元素）"><a href="#Display-inline-block（行内元素）" class="headerlink" title="Display: inline-block（行内元素）"></a>Display: inline-block（行内元素）</h3></blockquote><ul><li>默认宽度为内容宽度</li><li>可设置宽高</li><li>同行显示</li><li>整块换行</li></ul><p>默认display:inline-block 元素有：img,input,textarea,select,button,……</p><blockquote><h3 id="display-none-或visibility-hidden"><a href="#display-none-或visibility-hidden" class="headerlink" title="display:none 或visibility:hidden"></a>display:none 或visibility:hidden</h3></blockquote><p>隐藏一个元素可以通过把display 属性设置为”none”，或把visibility 属性设置为”hidden”。display 属性设置一个元素应如何显示，visibility 属性指定一个元素应可见还是隐藏。这两种方法会产生不同的结果。</p><ul><li>visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局.</li><li>display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。</li></ul><blockquote><h3 id="与Display-相关布局模式"><a href="#与Display-相关布局模式" class="headerlink" title="与Display 相关布局模式"></a>与Display 相关布局模式</h3></blockquote><p>块级元素水平居中</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">margin:0 auto;</span><br></pre></td></tr></table></figure><p><strong>参考知识：</strong></p><p>在CSS 中，html 中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。</p><pre><code>常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有： <img>、<input></code></pre><h3 id="解决内联元素（行内元素）间隙bug-问题"><a href="#解决内联元素（行内元素）间隙bug-问题" class="headerlink" title="解决内联元素（行内元素）间隙bug 问题"></a><strong>解决内联元素（行内元素）间隙bug 问题</strong></h3><p>行内元素之间会产生间隙bug 问题的场景：</p><p>当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。</p><p>解决方法：</p><ol><li><p>写在一行，之间不要有空格之类的符号。</p><pre><code><div><a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em></div></code></pre></li><li><p>使用font-size:0，设置内联元素的父元素字体大小为0，然后设置内联元素字体大小。</p><pre><code>div{font-size:0;}a,span,em{font-size:16px;}/*div 为a、span、em 元素的父元素*/</code></pre></li><li><p>标签分开写，例如：</p><pre><code><div> <a>1</a > <a>2</a > <span>33333</span > <span>44444</span > <em>555555</em></div></code></pre></li></ol><h3 id="如何实现浏览器兼容版的inline-block-显示"><a href="#如何实现浏览器兼容版的inline-block-显示" class="headerlink" title="如何实现浏览器兼容版的inline-block 显示"></a><strong>如何实现浏览器兼容版的inline-block 显示</strong></h3><p>IE6,7 支持inline 元素转换成inline-block，但不支持block 元素转换成inline-block，所以非inline 元素在IE6,7 下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block 类似的效果；你可以这样：</p><p>全兼容的inline-block：</p><pre><code>div { display: inline-block; *display: inline; *zoom: 1;}</code></pre><p>对应的脚本特性为display。</p><blockquote><h3 id="定位（position）"><a href="#定位（position）" class="headerlink" title="定位（position）:"></a>定位（position）:</h3></blockquote><p>CSS 定位(Positioning) 属性允许你对元素进行定位。</p><p>定位的基本思想:它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</p><p><strong>CSS 定位机制</strong></p><p>CSS 有三种基本的定位机制：普通流、浮动和绝对定位。</p><p>除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在(X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。</p><p><strong>CSS 定位属性</strong></p><ul><li>Position-设置定位方式</li><li>Top,right,bottom,left,z-index-设置元素边缘距离参照物边缘的距离</li></ul><p>CSS 定位属性允许你对元素进行定位。</p><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>position</td><td>把元素放置到一个静态的、相对的、绝对的、或固定的位置中。</td></tr><tr><td>top</td><td>定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</td></tr><tr><td>right</td><td>定义了定位元素右外边距边界与其包含块右边界之间的偏移。</td></tr><tr><td>bottom</td><td>定义了定位元素下外边距边界与其包含块下边界之间的偏移。</td></tr><tr><td>left</td><td>定义了定位元素左外边距边界与其包含块左边界之间的偏移。</td></tr><tr><td>overflow</td><td>设置当元素的内容溢出其区域时发生的事情。</td></tr><tr><td>clip</td><td>设置元素的形状。元素被剪入这个形状之中，然后显示出来。</td></tr><tr><td>vertical-align</td><td>设置元素的垂直对齐方式。</td></tr><tr><td>z-index</td><td>设置元素的堆叠顺序。</td></tr></tbody></table><blockquote><h3 id="CSS-position-属性"><a href="#CSS-position-属性" class="headerlink" title="CSS position 属性"></a>CSS position 属性</h3></blockquote><p>通过使用position 属性，我们可以选择4 种不同类型的定位，这会影响元素框生成的方式。</p><h3 id="static"><a href="#static" class="headerlink" title="* static"></a>* static</h3><p>元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。</p><h3 id="relative"><a href="#relative" class="headerlink" title="* relative"></a>* relative</h3><p>元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。</p><p><img src="/2017/12/06/CSS布局/relative.jpg" alt="relative.jpg"></p><h3 id="absolute"><a href="#absolute" class="headerlink" title="* absolute"></a>* absolute</h3><p>元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。</p><p><img src="/2017/12/06/CSS布局/absolute.jpg" alt="absolute.jpg"></p><h3 id="fixed"><a href="#fixed" class="headerlink" title="* fixed"></a>* fixed</h3><p>元素框的表现类似于将position 设置为absolute，不过其包含块是视窗本身。</p><p><img src="/2017/12/06/CSS布局/fixed.jpg" alt="fixed.jpg"></p><blockquote><h3 id="Z-index-设置元素在z-轴上的排序"><a href="#Z-index-设置元素在z-轴上的排序" class="headerlink" title="Z-index -设置元素在z 轴上的排序"></a>Z-index -设置元素在z 轴上的排序</h3></blockquote><p>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</p><ul><li>元素可拥有负的z-index 属性值。</li><li>Z-index 仅能在定位元素上奏效（例如position:absolute;）</li></ul><p><strong>Z-index 栈</strong></p><p><img src="/2017/12/06/CSS布局/z-index.jpg" alt="z-index.jpg"></p><blockquote><h3 id="Float-浮动"><a href="#Float-浮动" class="headerlink" title="Float 浮动:"></a>Float 浮动:</h3></blockquote><p>浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p><p>float 属性定义元素在哪个方向浮动.</p><p>以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。</p><p>语法：<br>float：none | left | right</p><p><img src="/2017/12/06/CSS布局/float.jpg" alt="float.jpg"></p><p><strong>Float 浮动基本特征：</strong></p><ol><li>float 的元素在同一文档流</li></ol><p><img src="/2017/12/06/CSS布局/float1.jpg" alt="float1.jpg"></p><ol><li>float 元素半脱离文档流</li></ol><p><img src="/2017/12/06/CSS布局/float2.jpg" alt="float2.jpg"></p><p>对元素，脱离文档流；对内容，在文档流。</p><p><strong>Clear-清除浮动：</strong></p><p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear 属性。clear 属性规定元素的哪一侧不允许其他浮动元素。</p><p>语法：</p><p>clear：none | left | right | both</p><ul><li>应用于(浮动元素)后续元素；</li><li>应用于块级元素；</li></ul><p>使用方式：</p><ol><li>增加空白元素</li><li>Clearfix</li></ol><p>代码：</p><pre><code>.clearfix:after{ Content:”.”;display:block;clear:both;height:0; Overflow:hidden;visibility:hidden;}.clearfix{zoom:1;}</code></pre><blockquote><h3 id="Flex-伸缩布局"><a href="#Flex-伸缩布局" class="headerlink" title="Flex 伸缩布局:"></a>Flex 伸缩布局:</h3></blockquote><p>Flex Terms-基本概念：</p><p>Flex 容器（flex container）：</p><p>采用Flex 布局的元素，称为Flex 容器（flex container），简称”容器”。</p><p>Flex 项目（flex item）:</p><p>Flex 容器的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称”项目”。</p><p><img src="/2017/12/06/CSS布局/flex.jpg" alt="flex.jpg"></p><p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p><p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p><p>创建flex container 容器：</p><p>Display:flex</p><p>Flex items（flex 项目）</p><p>在文档流中的子元素是弹性子元素</p><p><img src="/2017/12/06/CSS布局/flex1.jpg" alt="flex1.jpg"></p><p><strong>弹性布局特性：</strong></p><p>与方向有关：</p><ul><li>flex-direction</li><li>Flex-wrap</li><li>Flex-flow</li><li>order</li></ul><p>与弹性有关：</p><ul><li>Flex-basis</li><li>Flex-grow</li><li>Flex-shrink</li><li>flex</li></ul><p>与对齐有关：</p><ul><li>Justify-content</li><li>Align-items</li><li>Align-self</li><li>Align-content</li></ul><p><strong>Flex-direction:</strong></p><p>决定主轴的方向（即项目的排列方向）</p><p>Flex-direction:row|row-reverse|column|column-reverse</p><p><img src="/2017/12/06/CSS布局/flex2.jpg" alt="flex2.jpg"></p><p>它可能有4 个值。</p><ul><li>row（默认值）：主轴为水平方向，起点在左端。</li><li>row-reverse：主轴为水平方向，起点在右端。</li><li>column：主轴为垂直方向，起点在上沿。</li><li>column-reverse：主轴为垂直方向，起点在下沿。</li></ul><p>Flex-wrap:</p><p>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。</p><p>Flex-wrap:nowrap|wrap|wrap-reverse</p><p><img src="/2017/12/06/CSS布局/flex3.jpg" alt="flex3.jpg"></p><p>它可能取三个值。</p><p>（1）nowrap（默认）：不换行。</p><p><img src="/2017/12/06/CSS布局/flex4.jpg" alt="flex4.jpg"></p><p>（2）wrap：换行，第一行在上方。</p><p><img src="/2017/12/06/CSS布局/flex5.jpg" alt="flex5.jpg"></p><p>（3）wrap-reverse：换行，第一行在下方。</p><p><img src="/2017/12/06/CSS布局/flex6.jpg" alt="flex6.jpg"></p><p><strong>Flex-flow:</strong></p><p>flex-flow 属性是flex-direction 属性和flex-wrap 属性的简写形式，默认值为row nowrap。</p><p>Flex-flow:：<’ flex-direction ‘> || <’ flex-wrap ‘></p><p><img src="/2017/12/06/CSS布局/flex7.jpg" alt="flex7.jpg"></p><p><strong>Order:</strong></p><p>order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p><p>Order:<interger></interger></p><p>Initial:0 (初始值为0)</p><p><img src="/2017/12/06/CSS布局/flex8.jpg" alt="flex8.jpg"></p><p><strong>Flex-basis</strong></p><p>flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p><ul><li>flex-basis: <length> | auto; /<em> default auto </em>/</length></li><li>设置flex item 的初始宽/高</li></ul><p>它可以设为跟width 或height 属性一样的值（比如350px），则项目将占据固定空间。</p><p><strong>Flex-grow:</strong></p><p>flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。设置元素所能分配到的空余空间的比例。</p><ul><li>Flex-grow:<number></number></li><li>Initial:0</li></ul><p><img src="/2017/12/06/CSS布局/flex9.jpg" alt="flex9.jpg"></p><ol><li>默认情况下，flex-grow:0,flex-item 项目不占据额外空间。</li><li>如果只设置一个flex-item 项目的flex-grow 为1，则它将占据剩余空间。</li><li>如果一个项目的flex-grow 属性为2，一个项目为1，则前者占据的剩余空间比后者多一倍。</li><li>计算方法：flex-basis + flow-grow/sum(flow-grow) * remain</li></ol><p>示例：b,c 将按照1:3 的比率分配剩余空间</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><ul class="flex"><li>a</li><li>b</li><li>c</li></ul></span><br><span class="line">CSS Code:</span><br><span class="line">.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}.flex li:nth-child(1){width:200px;}.flex li:nth-child(2){flex-grow:1;width:50px;}.flex li:nth-child(3){flex-grow:3;width:50px;}</span><br></pre></td></tr></table></figure><p>flex-grow 的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。</p><p>本例中b,c 两项都显式的定义了flex-grow，flex 容器的剩余空间分成了4 份，其中b 占1份，c 占3 分，即1:3</p><p>flex 容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c 的长度分别为：</p><pre><code>a: 200+(300/4*0)=200pxb: 50+(300/4*1)=125pxa: 50+(300/4*3)=275px</code></pre><p><strong>Flex-shrink:</strong></p><p>flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p><ul><li>Flex-shrink:<number></number></li><li>Initial:1</li></ul><p><img src="/2017/12/06/CSS布局/flex-shrink.jpg" alt="flex-shrink.jpg"></p><p>如果所有项目的flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。</p><p>计算方法：flex-basis + flow-shrink/sum(flow-shrink) * remain</p><p>示例：a,b,c 将按照1:1:3 的比率来收缩空间</p><pre><code><ul class="flex"><li>a</li><li>b</li><li>c</li></ul>CSS Code:.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex li{width:200px;}.flex li:nth-child(3){flex-shrink:3;}</code></pre><p>flex-shrink 的默认值为1，如果没有显示定义该属性，将会自动按照默认值1 在所有因子相加之后计算比率来进行空间收缩。</p><p>本例中c 显式的定义了flex-shrink，a,b 没有显式定义，但将根据默认值1 来计算，可以看到总共将剩余空间分成了5 份，其中a 占1 份，b 占1 份，c 占3 分，即1:1:3</p><p>我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px 需要被a,b,c 消化</p><p>通过收缩因子，所以加权综合可得200<em>1+200</em>1+200*3=1000px；</p><p>于是我们可以计算a,b,c 将被移除的溢出量是多少：</p><pre><code>a 被移除溢出量：(200*1/1000)*200，即约等于40pxb 被移除溢出量：(200*1/1000)*200，即约等于40pxc 被移除溢出量：(200*3/1000)*200，即约等于120px</code></pre><p>最后a,b,c 的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px</p><p><strong>Flex</strong></p><p>flex 属性是flex-grow, flex-shrink 和flex-basis 的简写，默认值为0 1 auto。后两个属性可选。</p><ul><li>Flex: [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]|none</li><li>Initial:0 1 auto</li></ul><p>该属性有两个快捷值：auto (1 1 auto) 和none (0 0 auto)。</p><p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p><p>取值：</p><ul><li>none： none 关键字的计算值为: 0 0 auto</li><li><’ flex-grow ‘>： 用来指定扩展比率，即剩余空间是正值时此「flex 子项」相对于「flex 容器」里其他「flex 子项」能分配到空间比例。在「flex」属性中该值如果被省略则默认为「1」</li><li><’ flex-shrink ‘>： 用来指定收缩比率，即剩余空间是负值时此「flex 子项」相对于「flex 容器」里其他「flex 子项」能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权在「flex」属性中该值如果被省略则默认为「1」</li><li><’ flex-basis ‘>： 用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex 子项」长度的起始数值。在「flex」属性中该值如果被省略则默认为「0%」在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的<’ width’> 设置，如果自身的宽度没有定义，则长度取决于内容。</li><li>如果缩写「flex: 1」, 则其计算值为「1 1 0%」</li><li>如果缩写「flex: auto」, 则其计算值为「1 1 auto」</li><li>如果「flex: none」, 则其计算值为「0 0 auto」</li><li>如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值</li></ul><p><strong>Justify-content</strong></p><ul><li>justify-content: flex-start | flex-end | center | space-between | space-around</li><li>定义了项目在主轴(main-axis)上的对齐方式。</li></ul><p><img src="/2017/12/06/CSS布局/Justify-content.jpg" alt="Justify-content.jpg"></p><p>它可能取5 个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p><ul><li>flex-start（默认值）：左对齐</li><li>flex-end：右对齐</li><li>center： 居中</li><li>space-between：两端对齐，项目之间的间隔都相等。</li><li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li></ul><p><strong>Align-items</strong></p><ul><li>align-items: flex-start | flex-end | center | baseline | stretch</li><li>定义项目在交叉轴(辅轴，cross-axis)上如何对齐。</li></ul><p><img src="/2017/12/06/CSS布局/align-items.jpg" alt="align-items.jpg"></p><p>它可能取5 个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p><ul><li>flex-start：交叉轴的起点对齐。</li><li>flex-end：交叉轴的终点对齐。</li><li>center：交叉轴的中点对齐。</li><li>baseline: 项目的第一行文字的基线对齐。</li><li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li></ul><p><strong>Align-self</strong></p><p>align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。</p><p>默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。</p><ul><li>align-self: auto | flex-start | flex-end | center | baseline | stretch</li><li>设置单个flex item 在cross-axis 方向上对齐方式。</li></ul><p><img src="/2017/12/06/CSS布局/align-self.jpg" alt="align-self.jpg"></p><p><strong>Align-content</strong></p><p>align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p><ul><li>align-content: flex-start | flex-end | center | space-between | space-around | stretch</li><li>设置cross-axis 方向上行对齐方式</li></ul><p><img src="/2017/12/06/CSS布局/align-content.jpg" alt="align-content.jpg"></p><p>该属性可能取6 个值。</p><ul><li>flex-start：与交叉轴的起点对齐。</li><li>flex-end：与交叉轴的终点对齐。</li><li>center：与交叉轴的中点对齐。</li><li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li><li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li><li>stretch（默认值）：轴线占满整个交叉轴。</li></ul><p>关于flex 布局，可参看资源：</p><p><a href="http://www.xifengxx.com/seo/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1408.html" target="_blank" rel="noopener">http://www.xifengxx.com/seo/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A<br>0/1408.html</a></p>]]></content>
<summary type="html">
<blockquote>
<h1 id="内容包括："><a href="#内容包括：" class="headerlink" title="内容包括："></a>内容包括：</h1></blockquote>
<p>布局简介、display(水平居中、居中导航)、positio
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS布局" scheme="http://yoursite.com/younghf.github.io/tags/CSS%E5%B8%83%E5%B1%80/"/>
</entry>
<entry>
<title>CSS背景</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/06/CSS%E8%83%8C%E6%99%AF/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/06/CSS背景/</id>
<published>2017-12-06T05:43:19.000Z</published>
<updated>2017-12-06T14:51:19.737Z</updated>
<content type="html"><![CDATA[<blockquote><h3 id="background-属性"><a href="#background-属性" class="headerlink" title="background 属性"></a>background 属性</h3></blockquote><table><thead><tr><th>值描述</th><th>CSS</th></tr></thead><tbody><tr><td>background-color</td><td>规定要使用的背景颜色。</td><td>1</td></tr><tr><td>background-position</td><td>规定背景图像的位置。</td><td>1</td></tr><tr><td>background-size</td><td>规定背景图片的尺寸。</td><td>3</td></tr><tr><td>background-repeat</td><td>规定如何重复背景图像。</td><td>1</td></tr><tr><td>background-origin</td><td>规定背景图片的定位区域。</td><td>3</td></tr><tr><td>background-clip</td><td>规定背景的绘制区域。</td><td>3</td></tr><tr><td>background-attachment</td><td>规定背景图像是否固定或者随着页面的其余部分滚动。</td><td>1</td></tr><tr><td>background-image</td><td>规定要使用的背景图像。</td><td>1</td></tr><tr><td>inherit</td><td>规定应该从父元素继承background 属性的设置。</td><td>1</td></tr></tbody></table><h3 id="1-背景颜色-background-color"><a href="#1-背景颜色-background-color" class="headerlink" title="1. 背景颜色-background-color"></a>1. 背景颜色-background-color</h3><p>默认值：transparent ，即背景是透明的。</p><h3 id="2-背景图像-background-image"><a href="#2-背景图像-background-image" class="headerlink" title="2. 背景图像-background-image"></a>2. 背景图像-background-image</h3><p>background-image:url(“../App_images/lesson/run_cj/one piece.jpg”);</p><p><strong>注意：引号也可以不写</strong></p><h3 id="3-background-repeat"><a href="#3-background-repeat" class="headerlink" title="3. background-repeat"></a>3. background-repeat</h3><p>语法：</p><p>background-repeat：<repeat-style> [ , <repeat-style> ]*</p><p><repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}</p><p>默认值：repeat</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>no-repeat</td><td>表示不平铺</td></tr><tr><td>repeat</td><td>默认值，表示在水平方向（x 轴）和垂直方向（y 轴）同时平铺</td></tr><tr><td>repeat-x</td><td>表示在水平方向（x 轴）平铺</td></tr><tr><td>repeat-y</td><td>表示在垂直方向（y 轴）平铺</td></tr><tr><td>space</td><td>背景图像以相同的间距平铺且填充满整个容器或某个方向。</td></tr><tr><td>round</td><td>背景图像自动缩放(不是等比的)直到适应且填充满整个容器。</td></tr></tbody></table><p>设置或检索对象的背景图像如何铺排填充。必须先指定<’ background-image ‘> 属性。</p><ul><li>允许提供2 个参数，如果提供全部2 个参数，第1 个用于横向，第二个用于纵向。</li><li>如果只提供1 个参数，则用于横向和纵向。特殊值repeat-x 和repeat-y 除外，因为repeat-x 相当于repeat no-repeat，repeat-y 相当于no-repeat repeat，即其实repeat-x 和repeat-y 等价于提供了2 个参数值.</li></ul><h3 id="4-background-position-属性"><a href="#4-background-position-属性" class="headerlink" title="4. background-position 属性"></a>4. background-position 属性</h3><p>语法：<br>background-position：<position> [ , <position> ]*</p><p><position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left<br>| center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> |<br><length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top<br>| bottom ] [ <percentage> | <length> ]? ]</p><p>默认值：0% 0%，效果等同于left top</p><h3 id="5-background-attachment-属性"><a href="#5-background-attachment-属性" class="headerlink" title="5. background-attachment 属性"></a>5. background-attachment 属性</h3><p>在CSS 中，使用背景附件属性background-attachment 可以设置背景图像是随对象滚动还是固定不动。</p><p>语法：</p><p>background-attachment：<attachment> [ , <attachment> ]*</attachment></attachment></p><p><attachment> = fixed | scroll | local</attachment></p><p>默认值：scroll</p><ul><li>fixed： 背景图像相对于窗体固定。</li><li>scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。</li><li>local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）</li></ul><h3 id="6-background-size-属性"><a href="#6-background-size-属性" class="headerlink" title="6. background-size 属性"></a>6. background-size 属性</h3><p>在CSS3 中，我们可以使用background-size 属性来设置背景图片的大小，这使得我们可以在不同的环境中重复使用背景图片。</p><p>语法：background-size: auto | <长度值> | <百分比> | cover | contain</p><table><thead><tr><th>关键字</th><th>说明</th></tr></thead><tbody><tr><td>cover</td><td>即“覆盖”，将背景图片以等比缩放来填充整个容器元素</td></tr><tr><td>contain</td><td>即“容纳”，将背景图片等比缩放至某一边紧贴容器边缘为止</td></tr><tr><td>auto</td><td>默认值，不改变背景图片的原始高度和宽度</td></tr><tr><td><长度值></td><td>成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放</td></tr><tr><td><百分比></td><td>0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上</td></tr></tbody></table><h3 id="7-background-origin-属性"><a href="#7-background-origin-属性" class="headerlink" title="7. background-origin 属性"></a>7. background-origin 属性</h3><p>在CSS3 中，我们可以使用background-origin 属性来设置元素背景图片平铺的最开始位置。</p><p>语法：background-origin ： border-box | padding-box | content-box;</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>border-box</td><td>表示背景图片是从边框开始平铺</td></tr><tr><td>padding-box</td><td>表示背景图片是从内边距开始平铺（默认值）</td></tr><tr><td>content-box</td><td>表示背景图片是从内容区域开始平铺</td></tr></tbody></table><p>总结：background-origin 属性往往都是配合background-position 属性来使用，其中background-origin 属性规定background-position 属性相对于什么位置来定位。浏览器默认采用“background-position:top left;”。因此不管background-origin 属性值如何变化，背景图片都是从“左上”开始平铺。</p><p>效果如下：</p><p><img src="/2017/12/06/CSS背景/background-origin.jpg" alt="background-origin.jpg"></p><p><strong>注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。</strong></p><h3 id="8-background-clip-属性"><a href="#8-background-clip-属性" class="headerlink" title="8. background-clip 属性"></a>8. background-clip 属性</h3><p>在CSS3 中，使用background-clip 属性来将背景图片根据实际需要进行剪切。</p><p>语法：background-clip ： border-box | padding-box | content-box | no-clip</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>border-box</td><td>默认值，表示从边框border 开始剪切</td></tr><tr><td>padding-box</td><td>表示从内边距padding 开始剪切</td></tr><tr><td>content-box</td><td>表示从内容区域content 开始剪切</td></tr><tr><td>No-clip</td><td>不裁切，和参数border-box 显示同样的效果</td></tr></tbody></table><p><img src="/2017/12/06/CSS背景/background-clip.jpg" alt="background-clip.jpg"></p><p>background-clip 属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置（即background-origin 属性）无关。背景绘制的位置可以出现在不显示背景的区域。这就相当于背景图片被不显示背景的区域裁剪了一部分一样。</p><h3 id="9-Background-缩写"><a href="#9-Background-缩写" class="headerlink" title="9. Background 缩写"></a>9. Background 缩写</h3><p>多重背景(multiple backgrounds)，也就是CSS2 里background 的属性外加origin、clip 和size 组成的新background 的多次叠加，缩写时为用逗号隔开的每组值。</p><p>用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。</p><p>语法缩写如下：</p><pre><code>background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [backgroundclip] | [background-origin],...</code></pre><p>可以把上面的缩写拆解成以下形式：</p><pre><code>background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;</code></pre><p>注意：</p><ol><li>用逗号隔开每组background 的缩写值；</li><li>如果有size 值，需要紧跟position 并且用”/“ 隔开；</li><li>如果有多个背景图片，而其他属性只有一个（例如background-repeat 只有一个），表明所有背景图片应用该属性值。</li><li>background-color 只能设置一个。</li></ol>]]></content>
<summary type="html">
<blockquote>
<h3 id="background-属性"><a href="#background-属性" class="headerlink" title="background 属性"></a>background 属性</h3></blockquote>
<t
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS背景" scheme="http://yoursite.com/younghf.github.io/tags/CSS%E8%83%8C%E6%99%AF/"/>
</entry>
<entry>
<title>CSS盒模型</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/05/CSS%E7%9B%92%E6%A8%A1%E5%9E%8B/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/05/CSS盒模型/</id>
<published>2017-12-05T08:22:53.000Z</published>
<updated>2017-12-06T07:27:44.908Z</updated>
<content type="html"><![CDATA[<p>每个元素都可以看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height 两大辅助性属性。</p><p>下图为一个CSS 盒子模型的内部结构：</p><p><img src="/2017/12/05/CSS盒模型/box.jpg" alt="box.jpg"></p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>border</td><td>（边框）元素边框</td></tr><tr><td>margin</td><td>（外边距）用于定义页面中元素与元素之间的距离</td></tr><tr><td>padding</td><td>（内边距）用于定义内容与边框之间的距离</td></tr><tr><td>content</td><td>（内容）可以是文字或图片</td></tr></tbody></table><p>以上属性的就不赘述了，请自行查阅相关资料。</p><blockquote><h3 id="CSS-外边距合并"><a href="#CSS-外边距合并" class="headerlink" title="CSS 外边距合并"></a>CSS 外边距合并</h3></blockquote><p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</p><p>当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：</p><p><img src="/2017/12/05/CSS盒模型/margin1.jpg" alt="margin1.jpg"></p><p>当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：</p><p><img src="/2017/12/05/CSS盒模型/margin2.jpg" alt="margin2.jpg"></p><p>尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。</p><p>假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：</p><p><img src="/2017/12/05/CSS盒模型/margin3.jpg" alt="margin3.jpg"></p><p>如果这个外边距遇到另一个元素的外边距，它还会发生合并：</p><p><img src="/2017/12/05/CSS盒模型/margin4.jpg" alt="margin4.jpg"></p><p><strong>注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。</strong></p><p>参考资料：<br>外边距margin 合并（塌陷），请查看以下资料：<br><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin_collapsing" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin_collapsing</a></p><p><a href="http://www.w3help.org/zh-cn/kb/006/" target="_blank" rel="noopener">http://www.w3help.org/zh-cn/kb/006/</a></p><blockquote><h3 id="Border-radius—圆角边框"><a href="#Border-radius—圆角边框" class="headerlink" title="Border-radius—圆角边框"></a>Border-radius—圆角边框</h3></blockquote><p>常用的CSS3 边框属性：</p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>border-radius</td><td>圆角效果</td></tr><tr><td>border-colors</td><td>多色边框</td></tr><tr><td>border-image</td><td>边框背景</td></tr><tr><td>box-shadow</td><td>边框阴影</td></tr></tbody></table><p>border-radius 属性</p><p>语法：border-radius:长度值;</p><p>说明：长度值可以是px、百分比、em 等。</p><p>Border-radius 属性设置长度值顺序：“左上角、右上角、右下角和左下角”。</p><p>border-radius 画实心半圆和实心圆</p><ol><li><p>实心半圆</p><p> 实心半圆分为：实心上半圆、实心下半圆、实心左半圆、实心右半圆。我们只要掌握<br>制作一个方向的实心半圆的方法，其他方向的实心半圆就可以轻松实现，因为原理都一样。<br>假如我们要制作实现上半圆，实现方法：把高度(height)设为宽度（width）的一半，<br>并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设<br>置为0。</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width:200px;height:100px;border:1px solid red;border-radius:100px 100px 0 0;</span><br></pre></td></tr></table></figure></li></ol><ol><li><p>实心圆</p><p> 在CSS3 中，使用border-radius 属性实现实心圆方法：把宽度（width）与高度(height)<br>值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width:100px;height:100px;border:1px solid red;border-radius:50px;</span><br></pre></td></tr></table></figure></li></ol><pre><code>**border-radius 属性派生子属性**border-radius 属性可以分开，分别为四个角设置相应的圆角值，分别是：* border-top-right-radius：右上角；* border-bottom-right-radius：右下角；* border-bottom-left-radius：左下角；* border-top-left-radius：左上角；</code></pre><blockquote><h3 id="box-shadow-边框阴影"><a href="#box-shadow-边框阴影" class="headerlink" title="box-shadow 边框阴影"></a>box-shadow 边框阴影</h3></blockquote><p>语法：box-shadow：x-shadow y-shadow blur spread color inset;</p><p>说明：</p><ol><li>x-shadow：设置水平阴影的位置（X 轴），可以使用负值；</li><li>y-shadow：设置垂直阴影的位置（y 轴），可以使用负值；</li><li>blur：设置阴影模糊半径；</li><li>spread：阴影扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0。</li><li>color：设置阴影的颜色；</li><li>inset：这个参数默认不设置。默认情况下为外阴影，inset 表示内阴影。（这个值可以放在开头位置。）</li><li>outset: 默认值</li></ol><p><strong>技巧：当水平阴影位置x-shadow 和垂直阴影位置y-shadow 都为0 时，阴影都向外发散或者都向内发散。</strong></p><p><img src="/2017/12/05/CSS盒模型/box-shadow.jpg" alt="box-shadow.jpg"></p><p><img src="/2017/12/05/CSS盒模型/box-shadow1.jpg" alt="box-shadow1.jpg"></p><p><strong>注意：阴影不占空间</strong></p><blockquote><h3 id="Overflow-属性"><a href="#Overflow-属性" class="headerlink" title="Overflow 属性"></a>Overflow 属性</h3></blockquote><p>overflow 属性规定当内容溢出元素框时发生的事情.</p><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>visible</td><td>默认值。内容不会被修剪，会呈现在元素框之外。</td></tr><tr><td>hidden</td><td>内容会被修剪，并且其余内容是不可见的。</td></tr><tr><td>scroll</td><td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td></tr><tr><td>auto</td><td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承overflow 属性的值。</td></tr></tbody></table><p><img src="/2017/12/05/CSS盒模型/overflow.jpg" alt="overflow.jpg"></p><blockquote><h3 id="Box-sizing-属性"><a href="#Box-sizing-属性" class="headerlink" title="Box-sizing 属性"></a>Box-sizing 属性</h3></blockquote><p>语法：</p><p>box-sizing: content-box|border-box|inherit;</p><table><thead><tr><th>属性值</th><th>属性值说明</th></tr></thead><tbody><tr><td>content-box</td><td>默认值，其让元素维持W3C 的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height</td></tr><tr><td>border-box</td><td>重新定义CSS2.1 中盒模型组成的模式，让元素维持IE 传统的盒模型（IE6 以下版本和IE6-7 怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。</td></tr><tr><td>inherit</td><td>使元素继承父元素的盒模型模式</td></tr></tbody></table><p>其中最为关键的是box-sizing 中content-box 和border-box 两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：</p><p><img src="/2017/12/05/CSS盒模型/box-sizing.jpg" alt="box-sizing.jpg"></p><p>参考资料：</p><ol><li>box-sizing 理解： <a href="http://www.w3cplus.com/content/css3-box-sizing" target="_blank" rel="noopener">http://www.w3cplus.com/content/css3-box-sizing</a></li><li>CSS 属性的浏览器兼容性：<a href="http://caniuse.com/" target="_blank" rel="noopener">http://caniuse.com/</a></li></ol><blockquote><h3 id="outline-轮廓"><a href="#outline-轮廓" class="headerlink" title="outline 轮廓"></a>outline 轮廓</h3></blockquote><p>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作<br>用。其属性规定元素轮廓的样式、颜色和宽度。</p><table><thead><tr><th>属性</th><th>描述</th><th>CSS</th></tr></thead><tbody><tr><td>outline</td><td>在一个声明中设置所有的轮廓属性。</td><td>2</td></tr><tr><td>outline-color</td><td>设置轮廓的颜色。</td><td>2</td></tr><tr><td>outline-style</td><td>设置轮廓的样式。</td><td>2</td></tr><tr><td>outline-width</td><td>设置轮廓的宽度。</td><td>2</td></tr></tbody></table>]]></content>
<summary type="html">
<p>每个元素都可以看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height 两大辅助性属性。</p>
<p>下图为一个CSS 盒子模型的内部
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS盒模型" scheme="http://yoursite.com/younghf.github.io/tags/CSS%E7%9B%92%E6%A8%A1%E5%9E%8B/"/>
</entry>
<entry>
<title>CSS文本</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/05/CSS%E6%96%87%E6%9C%AC/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/05/CSS文本/</id>
<published>2017-12-05T04:01:11.000Z</published>
<updated>2017-12-06T15:18:13.748Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="CSS-字体属性"><a href="#CSS-字体属性" class="headerlink" title="CSS 字体属性"></a><a href="http://www.w3school.com.cn/cssref/pr_font_font.asp" target="_blank" rel="noopener">CSS 字体属性</a></h1></blockquote><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>font</td><td>简写属性。作用是把所有针对字体的属性设置在一个声明中。</td></tr><tr><td>font-family</td><td>设置字体系列。</td></tr><tr><td>font-size</td><td>设置字体的尺寸。</td></tr><tr><td>font-style</td><td>设置字体风格。</td></tr><tr><td>font-variant</td><td>以小型大写字体或者正常字体显示文本。</td></tr><tr><td>font-weight</td><td>设置字体的粗细。</td></tr></tbody></table><p>以上具体的属性介绍在此不再赘述。</p><p><img src="/2017/12/05/CSS文本/font.jpg" alt="font 缩写"></p><p>如上图，灰色的属性表示不常用，其中font-size、font-family为必填项，所以最后两种缩写的方式是不起作用的。</p><blockquote><h3 id="Line-height–行间距（行高）"><a href="#Line-height–行间距（行高）" class="headerlink" title="Line-height–行间距（行高）"></a>Line-height–行间距（行高）</h3></blockquote><p>line-height: normal | <number> | <length> | <percentage></p><p><strong>注意：<percentage>是先计算后继承，<number>是直接继承</number></strong></p><blockquote><h3 id="Color-颜色"><a href="#Color-颜色" class="headerlink" title="Color 颜色"></a>Color 颜色</h3></blockquote><p>检索或设置对象的文本颜色。无默认值。</p><p>可以使用Color Name(颜色名称), HEX（十六进制颜色）, RGB, RGBA, HSL, HSLA, transparent来指定color。</p><p><strong>注意，用颜色名称指定color 可能不被一些浏览器接受。</strong></p><p>color 属性值被间接用来提供一个中间值currentColor 以供其他接受颜色值的属性使用。</p><p>示例：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">div {border: 10px solid;color: red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>如上代码，没有定义边框的颜色，但定义了color 的颜色为red，那么这时red 将会作为一个间接值currentColor 提供给边框颜色属性，所以最终边框色也为red。</p><blockquote><h3 id="Text-align-文本对齐方式"><a href="#Text-align-文本对齐方式" class="headerlink" title="Text-align 文本对齐方式"></a>Text-align 文本对齐方式</h3></blockquote><p>text-align 属性规定元素中的文本的水平对齐方式。<strong>只能针对文本文字和img 标签，对其他标签无效。</strong></p><p>该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值justify；不同用户代理可能会得到不同的结果。</p><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>默认值</td><td>如果direction 属性是ltr，则默认值是left；如果direction 是rtl，则为right。</td></tr><tr><td>left</td><td>把文本排列到左边。默认值：由浏览器决定。</td></tr><tr><td>right</td><td>把文本排列到右边。</td></tr><tr><td>center</td><td>把文本排列到中间。</td></tr><tr><td>justify</td><td>实现两端对齐文本效果。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承text-align 属性的值。</td></tr></tbody></table><blockquote><h3 id="vertical-align-垂直对齐方式"><a href="#vertical-align-垂直对齐方式" class="headerlink" title="vertical-align 垂直对齐方式"></a>vertical-align 垂直对齐方式</h3></blockquote><p>该属性定义<strong>行内元素</strong>的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>baseline</td><td>默认。元素放置在父元素的基线上。</td></tr><tr><td>sub</td><td>垂直对齐文本的下标。</td></tr><tr><td>super</td><td>垂直对齐文本的上标</td></tr><tr><td>top</td><td>把元素的顶端与行中最高元素的顶端对齐</td></tr><tr><td>text-top</td><td>把元素的顶端与父元素字体的顶端对齐</td></tr><tr><td>middle</td><td>把此元素放置在父元素的中部。</td></tr><tr><td>bottom</td><td>把元素的顶端与行中最低的元素的顶端对齐。</td></tr><tr><td>text-bottom</td><td>把元素的底端与父元素字体的底端对齐。</td></tr><tr><td>length</td><td></td></tr><tr><td>%</td><td>使用”line-height” 属性的百分比值来排列此元素。允许使用负值。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承vertical-align 属性的值。</td></tr></tbody></table><blockquote><h3 id="Text-indent-设置首行缩进"><a href="#Text-indent-设置首行缩进" class="headerlink" title="Text-indent 设置首行缩进"></a>Text-indent 设置首行缩进</h3></blockquote><p>中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{text-indent:2em;}</span><br></pre></td></tr></table></figure><blockquote><h3 id="White-space"><a href="#White-space" class="headerlink" title="White-space"></a>White-space</h3></blockquote><p>white-space 属性设置如何处理元素内的空白（空白符）。</p><table><thead><tr><th>可能值</th><th>描述</th></tr></thead><tbody><tr><td>normal</td><td>默认。空白会被浏览器忽略。丢掉多余的空白符，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。</td></tr><tr><td>pre</td><td>空白会被浏览器保留。其行为方式类似HTML 中的<pre> 标签。</td></tr><tr><td>nowrap</td><td>文本不会换行，文本会在在同一行上继续，直到遇到<br> 标签为止。</td></tr><tr><td>pre-wrap</td><td>保留空白符序列，但是正常地进行换行。</td></tr><tr><td>pre-line</td><td>合并空白符序列，但是保留换行符。</td></tr><tr><td>inherit</td><td>规定应该从父元素继承white-space 属性的值。</td></tr></tbody></table><p>white-space 属性的行为：</p><table><thead><tr><th>值</th><th>空白符</th><th>换行符</th><th>自动换行</th></tr></thead><tbody><tr><td>pre-line</td><td>合并</td><td>保留</td><td>允许</td></tr><tr><td>normal</td><td>合并</td><td>忽略</td><td>允许</td></tr><tr><td>nowrap</td><td>合并</td><td>忽略</td><td>不允许</td></tr><tr><td>pre</td><td>保留</td><td>保留</td><td>不允许</td></tr><tr><td>pre-wrap</td><td>保留</td><td>保留</td><td>允许</td></tr></tbody></table><blockquote><h3 id="Word-wrap"><a href="#Word-wrap" class="headerlink" title="Word-wrap"></a>Word-wrap</h3></blockquote><p>word-wrap 属性允许长单词或 URL 地址换行到下一行。一般情况下，如果你开发的是英文网站，就很有可能用到word-wrap 这个属性了。</p><p>语法:</p><p>word-wrap: normal | break-word;</p><blockquote><h3 id="Word-break"><a href="#Word-break" class="headerlink" title="Word-break"></a>Word-break</h3></blockquote><p>设置或检索对象内文本的字内换行行为。</p><p>对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all 属性值；</p><p>语法：</p><p>word-break：normal | keep-all | break-all</p><p>默认值：normal</p><p>取值：</p><ul><li>normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。</li><li>keep-all：与所有非亚洲语言的normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。</li><li>break-all：该行为与亚洲语言的normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。</li></ul><blockquote><h3 id="Text-decoration-文本修饰"><a href="#Text-decoration-文本修饰" class="headerlink" title="Text-decoration -文本修饰"></a>Text-decoration -文本修饰</h3></blockquote><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>none</td><td>默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式</td></tr><tr><td>underline</td><td>下划线</td></tr><tr><td>line-through</td><td>删除线</td></tr><tr><td>overline</td><td>顶划线</td></tr></tbody></table><p>underline 会对元素加下划线，就像HTML 中的U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值line-through 则在文本中间画一个贯穿线，等价于HTML 中的S 和strike 元素。</p><p>none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。</p><p>例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下CSS 来做到这一点：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a {text-decoration: none;}</span><br></pre></td></tr></table></figure><blockquote><h3 id="Text-shadow-文字阴影"><a href="#Text-shadow-文字阴影" class="headerlink" title="Text-shadow 文字阴影"></a>Text-shadow 文字阴影</h3></blockquote><p>语法：text-shadow:x-offset y-offset blur color;</p><p>说明：</p><ul><li>x-offset：（水平阴影）表示阴影的水平偏移距离，单位可以是px、em 或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；</li><li>y-offset：（垂直阴影）表示阴影的垂直偏移距离，单位可以是px、em 或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；</li><li>blur：（模糊距离）表示阴影的模糊程度，单位可以是px、em 或者百分比等。blur 值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以把blur 值设置为0；</li><li>color：（阴影的颜色）表示阴影的颜色。</li></ul><p>在CSS3 中，可以使用text-shadow 属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。也就是说，text-shadow 属性可以为一个以英文逗号隔开的“值列表”，如：text-shadow:0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3;当text-shadow 属性值为“值列表”时，阴影效果会按照给定的值顺序应用到该元素的文本上，因此有可能出现互相覆盖的现象。但是text-shadow 属性永远不会覆盖文本本身，阴影效果也不会改变边框的尺寸。</p><blockquote><h3 id="text-stroke-属性"><a href="#text-stroke-属性" class="headerlink" title="text-stroke 属性"></a>text-stroke 属性</h3></blockquote><p>语法：text-stroke:宽度值颜色值;</p><p>在CSS3 中，我们可以使用text-stroke 属性为文字添加描边效果。这个描边效果，说白了就是<strong>给文字添加边框</strong>。</p><blockquote><h3 id="text-overflow-属性"><a href="#text-overflow-属性" class="headerlink" title="text-overflow 属性"></a>text-overflow 属性</h3></blockquote><p>在CSS3 中，文本溢出text-overflow 用于设置是否使用一个省略标记（…）标示对象内文本的溢出。</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>ellipsis</td><td>当对象内文本溢出时显示省略标记（…）</td></tr><tr><td>clip</td><td>当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉</td></tr></tbody></table><p>单独使用text-overflow 属性是无法得到上面图1 效果的。因为text-overflow 属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还须定义2 个内容：</p><ul><li>（1）white-space:nowrap;（强制文本在一行内显示）；</li><li>（2）overflow:hidden;（溢出内容为隐藏）；</li></ul><p>下面是实现文字溢出时产生省略号效果的完整语法：</p><pre><code>text-overflow:ellipsis;overflow:hidden;white-space:nowrap;</code></pre><p>这3个属性是必须一起使用才会有效果。</p><blockquote><h3 id="Cursor-属性"><a href="#Cursor-属性" class="headerlink" title="Cursor 属性"></a>Cursor 属性</h3></blockquote><p>在CSS 中，使用cursor 属性来定义鼠标的样式。</p><p>语法：cursor:属性值;</p><p>cursor 属性取值如下，默认值为default。在实际开发中，我们一般只用到“default”和“pointer”这两个属性值，其他的一般都很少用得上，无需记忆。</p><p><img src="/2017/12/05/CSS文本/cursor.jpg" alt="cursor.jpg"></p><blockquote><h3 id="Inherit-属性"><a href="#Inherit-属性" class="headerlink" title="Inherit 属性"></a>Inherit 属性</h3></blockquote><p>该值使得属性能够继承祖先设置。</p><p>inherit 属于CSS-wide 关键字，这表示所有的属性都可以接受该值。</p><p>如何让一个不具备继承特性的属性可以继承父元素的定义？</p><p>示例代码：</p><pre><code>div { position: relative;}div a { position: inherit;}</code></pre><p>上述代码，超链接a 将会继承父元素的position 定义，也会定义为relative。常用的CSS 属性继承性：</p><p><img src="/2017/12/05/CSS文本/Inherit.jpg" alt="Inherit.jpg"></p>]]></content>
<summary type="html">
<blockquote>
<h1 id="CSS-字体属性"><a href="#CSS-字体属性" class="headerlink" title="CSS 字体属性"></a><a href="http://www.w3school.com.cn/cssref/pr_fon
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS文本" scheme="http://yoursite.com/younghf.github.io/tags/CSS%E6%96%87%E6%9C%AC/"/>
</entry>
<entry>
<title>CSS选择器</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/01/CSS%E9%80%89%E6%8B%A9%E5%99%A8/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/01/CSS选择器/</id>
<published>2017-12-01T07:42:19.000Z</published>
<updated>2017-12-01T16:33:25.437Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="CSS-选择器"><a href="#CSS-选择器" class="headerlink" title="CSS 选择器"></a>CSS 选择器</h1></blockquote><p>选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS 样式。CSS 有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。</p><p>选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS 样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。</p><blockquote><h3 id="标签选择器"><a href="#标签选择器" class="headerlink" title="标签选择器"></a>标签选择器</h3></blockquote><p>标签选择器其实就是html 代码中的标签。例如下面代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{font-size:12px;line-height:1.6em;}</span><br></pre></td></tr></table></figure><p>上面的css 样式代码的作用：为p 标签设置12px 字号，行间距设置1.6em 的样式。</p><blockquote><h3 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h3></blockquote><p>语法：<br>.选择器名称{css 样式代码;}</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.selector{color:red;}</span><br></pre></td></tr></table></figure><p>注意：</p><ol><li>英文圆点开头</li><li>其中类选器名称可以任意起名（但不要起中文噢）</li></ol><blockquote><h3 id="ID-选择器"><a href="#ID-选择器" class="headerlink" title="ID 选择器"></a>ID 选择器</h3></blockquote><p>语法：<br>#选择器名称{css 样式代码;}</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">#selector{color:red;}</span><br></pre></td></tr></table></figure><blockquote><h1 id="类和ID-选择器的区别"><a href="#类和ID-选择器的区别" class="headerlink" title="类和ID 选择器的区别"></a>类和ID 选择器的区别</h1></blockquote><p>相同点：可以应用于任何元素</p><p>不同点：</p><ol><li>ID 选择器只能在文档中使用一次。与类选择器不同，在一个HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。</li><li>可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的（不能使用ID 词列表）。</li></ol><blockquote><h1 id="通用选择器（通配符选择器）"><a href="#通用选择器（通配符选择器）" class="headerlink" title="通用选择器（通配符选择器）"></a>通用选择器（通配符选择器）</h1></blockquote><p>通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html 中所有标签元素，如下使用下面代码使用html 中任意标签元素字体颜色全部设置为红色：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">*{color:red;}</span><br></pre></td></tr></table></figure><blockquote><h1 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h1></blockquote><table><thead><tr><th>选择器</th><th>描述</th></tr></thead><tbody><tr><td>[attribute]</td><td>用于选取带有指定属性的元素。</td></tr><tr><td>[attribute=value]</td><td>用于选取带有指定属性和值的元素。</td></tr><tr><td>[attribute~=value]</td><td>用于选取属性值中包含指定词汇的元素。</td></tr><tr><td>[attribute丨=value]</td><td>用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。</td></tr><tr><td>[attribute^=value]</td><td>匹配属性值以指定值开头的每个元素。</td></tr><tr><td>[attribute$=value]</td><td>匹配属性值以指定值结尾的每个元素。</td></tr><tr><td>[attribute*=value]</td><td>匹配属性值中包含指定值的每个元素。</td></tr></tbody></table><p>实例展示：</p><p>html 代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><a href="xxx.pdf">我链接的是PDF 文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title 是more">我的title 是more</a></span><br></pre></td></tr></table></figure><p>css 代码:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a[class^=icon]{background: green;color:#fff;}a[href$=pdf]{background: orange;color: #fff;}a[title*=more]{background: blue;color: #fff;}</span><br></pre></td></tr></table></figure><p>结果显示：</p><p><img src="/2017/12/01/CSS选择器/code.jpg" alt="code.jpg"></p><blockquote><h3 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h3></blockquote><p>CSS 伪类用于向某些选择器添加特殊的效果。又叫伪类选择符，它允许给html 不存在的标签（标签<br>的某种状态）设置样式，比如说我们给html 中一个标签元素的鼠标滑过的状态来设置字体颜色：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a:hover{color:red;}</span><br></pre></td></tr></table></figure><table><thead><tr><th>属性</th><th>描述</th><th>CSS</th></tr></thead><tbody><tr><td>:focus</td><td>向拥有键盘输入焦点的元素添加样式。</td><td>2</td></tr><tr><td>:hover</td><td>当鼠标悬浮在元素上方时，向元素添加样式。</td><td>1</td></tr><tr><td>:link</td><td>向未被访问的链接添加样式。</td><td>1</td></tr><tr><td>:visited</td><td>向已被访问的链接添加样式。</td><td>1</td></tr><tr><td>:first-child</td><td>向元素的第一个子元素添加样式。</td><td>2</td></tr><tr><td>:lang</td><td>向带有指定lang 属性的元素添加样式。</td><td>2</td></tr><tr><td>:enabled</td><td>匹配每个启用的元素（主要用于表单元素）。</td><td>3</td></tr><tr><td>:disabled</td><td>匹配每个禁用的元素（主要用于表单元素）。</td><td>3</td></tr><tr><td>:checked</td><td>匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。</td><td>3</td></tr></tbody></table><blockquote><h3 id="结构伪类选择器"><a href="#结构伪类选择器" class="headerlink" title="结构伪类选择器"></a>结构伪类选择器</h3></blockquote><p>是针对HTML 层次“结构”的伪类选择器。例如我们想要某一个父元素下面的第n 个子元素。</p><p><img src="/2017/12/01/CSS选择器/table.jpg" alt="table.jpg"></p><p><strong>总结：</strong> “:first-child”是选择父元素下的第1 个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1 个子元素（区分元素类型）。</p><blockquote><h3 id="UI-元素状态伪类选择器"><a href="#UI-元素状态伪类选择器" class="headerlink" title="UI 元素状态伪类选择器"></a>UI 元素状态伪类选择器</h3></blockquote><p>UI，是用户界面（User Interface）的意思。所谓的UI 设计是指对软件的人机交互、操作<br>逻辑、界面美观的综合设计。</p><p>UI 元素状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。<br>这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态<br>下不起作用。UI 元素状态伪类选择器大多数都是针对表单元素来使用的。</p><table><thead><tr><th>选择器</th><th>说明</th></tr></thead><tbody><tr><td>E:focus</td><td>指定元素获得光标焦点时使用的样式</td></tr><tr><td>E:checked</td><td>选择E 元素中所有被选中的元素</td></tr><tr><td>E::selection</td><td>改变E 元素中被选择的网页文本的显示效果</td></tr><tr><td>E:enabled</td><td>选择E 元素中所有“可用”元素</td></tr><tr><td>E:disabled</td><td>选择E 元素中所有“不可用”元素</td></tr><tr><td>E:read-write</td><td>选择E 元素中所有“可读写”元素</td></tr><tr><td>E:read-only</td><td>选择E 元素中所有“只读”元素</td></tr><tr><td>E::before</td><td>在E 元素之前插入内容</td></tr><tr><td>E::after</td><td>在E 元素之后插入内容</td></tr></tbody></table><blockquote><h3 id="CSS-伪元素选择器"><a href="#CSS-伪元素选择器" class="headerlink" title="CSS 伪元素选择器"></a>CSS 伪元素选择器</h3></blockquote><table><thead><tr><th>选择器</th><th>说明</th></tr></thead><tbody><tr><td>::first-letter</td><td>向文本的第一个字母添加特殊样式</td></tr><tr><td>::first-line</td><td>向文本的首行添加特殊样式</td></tr><tr><td>::before</td><td>在元素之前添加内容</td></tr><tr><td>::after</td><td>在元素之后添加内容</td></tr><tr><td>::selection</td><td>改变元素中被选择的网页文本的显示效果</td></tr></tbody></table><blockquote><h3 id="CSS-组合选择器"><a href="#CSS-组合选择器" class="headerlink" title="CSS 组合选择器"></a>CSS 组合选择器</h3></blockquote><ol><li><p>子选择器:</p><p> 即大于符号(>),用于选择指定标签元素的第一代子元素。如下代码：</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.food>li{border:1px solid red;}</span><br></pre></td></tr></table></figure><p> 这行代码会使class 名为food 下的子元素li 加入红色实线边框。</p></li><li><p>包含(后代)选择器:</p><p> 即加入空格,用于选择指定标签元素下的后辈元素。如下代码：</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.first span{color:red;}</span><br></pre></td></tr></table></figure></li></ol><pre><code>请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。**总结：** >作用于元素的第一代后代，空格作用于元素的所有后代。</code></pre><ol><li><p>相邻选择器:</p><p> 相邻选择器只会命中符合条件的相邻的兄弟元素，使用“+”号。</p><p> 如：p+p{color:#f00;}<br> 即设置与p 元素相邻的p 元素的颜色。</p></li><li><p>兄弟选择器</p><p> 兄弟选择器会命中所有符合条件的兄弟元素，而不强制是紧邻的元素，使用“~”符号</p><p> 如：p~p{color:#f00;}</p></li><li><p>群组选择器</p><p> 群组选择器，就是同时对几个选择器进行相同的操作。</p><p> 语法：h3,div,p,span{color:red;}</p></li></ol><blockquote><h3 id="CSS-继承"><a href="#CSS-继承" class="headerlink" title="CSS 继承"></a>CSS 继承</h3></blockquote><p>CSS 的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应<br>用于某个特定html 标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p 标<br>签，这个颜色设置不仅应用p 标签，还应用于p 标签中的所有子元素文本，这里子元素为<br>span 标签。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure><p>注意: 有一些css 样式是不具有继承性的。如border:1px solid red;</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{border:1px solid red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure><p>在上面例子中它代码的作用只是给p 标签设置了边框为1 像素、红色、实心边框线，而对于子元素span 是没用起到作用的。</p><blockquote><h3 id="CSS-优先级（特殊性）"><a href="#CSS-优先级（特殊性）" class="headerlink" title="CSS 优先级（特殊性）"></a>CSS 优先级（特殊性）</h3></blockquote><p>CSS 的优先级也可以称为CSS 的特殊性(specificity)或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示.<br>有的时候我们为同一个元素设置了不同的CSS 样式代码，那么元素会启用哪一个CSS 样式呢?</p><p>我们来看一下面的代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{color:red;}.first{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure><p>p 和.first 都匹配到了p 这个标签上，那么会显示哪种颜色呢？green 是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css 样式的，权值高的就使用哪种css样式。</p><p><strong>权值的规则：</strong>标签的权值为1，类选择符的权值为10，ID 选择符的权值最高为100。</p><p>例如下面的代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/\#footer .note p{color:yellow;} /*权值为100+10+1=111*/</span><br></pre></td></tr></table></figure><p><strong>注意：</strong>还有一个权值比较特殊—继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。</p><p>如何改变CSS 的优先级？</p><ol><li>改变CSS 的先后顺序；</li><li>提升权重；</li><li>使用!important.</li></ol><blockquote><h3 id="CSS-层叠"><a href="#CSS-层叠" class="headerlink" title="CSS 层叠"></a>CSS 层叠</h3></blockquote><p>层叠就是在html 文件中对于同一个元素可以有多个css 样式存在，当有相同权重的样式存在时，会根据这些css 样式的前后顺序来决定，处于最后面的css 样式会被应用。</p><p>如下面代码:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{color:red;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure><p>最后p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。</p><p>所以前面的css 样式优先级就不难理解了：</p><p><strong>内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。</strong></p><blockquote><h3 id="重要性-important"><a href="#重要性-important" class="headerlink" title="重要性(!important)"></a>重要性(!important)</h3></blockquote><p>我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？</p><p>这时候我们可以使用!important 来解决。</p><p>如下代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">p{color:red!important;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure><p>这时p 段落中的文本会显示的red 红色。</p><p><strong>注意：</strong>!important 要写在分号的前面这里注意当网页制作者不设置css 样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：</p><p><strong>浏览器默认的样式< 网页制作者样式< 用户自己设置的样式</strong></p><p>但记住!important 优先级样式是个例外，权值高于用户自己设置的样式。</p><p>参考资料：<br><a href="http://www.quirksmode.org/css/selectors/" target="_blank" rel="noopener">http://www.quirksmode.org/css/selectors/</a></p>]]></content>
<summary type="html">
<blockquote>
<h1 id="CSS-选择器"><a href="#CSS-选择器" class="headerlink" title="CSS 选择器"></a>CSS 选择器</h1></blockquote>
<p>选择器，说白了就是用一种方式把你想要的那一个标
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS选择器" scheme="http://yoursite.com/younghf.github.io/tags/CSS%E9%80%89%E6%8B%A9%E5%99%A8/"/>
</entry>
<entry>
<title>CSS简介</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/01/CSS/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/01/CSS/</id>
<published>2017-12-01T05:22:24.000Z</published>
<updated>2017-12-06T15:28:26.771Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="CSS-简介"><a href="#CSS-简介" class="headerlink" title="CSS 简介"></a>CSS 简介</h1></blockquote><ol><li>概念：CSS 全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。</li><li>在HTML 中引入CSS 共有3 种方式：</li></ol><ul><li>外部样式表 </li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head></span><br></pre></td></tr></table></figure><ul><li>内部样式表 </li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></span><br></pre></td></tr></table></figure><ul><li>内联样式表</li></ul><p>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><p style="color:sienna;margin-left:20px">This is a paragraph.</p></span><br></pre></td></tr></table></figure></p><blockquote><h3 id="层叠次序"><a href="#层叠次序" class="headerlink" title="层叠次序"></a>层叠次序</h3></blockquote><p>当同一个HTML 元素被不止一个样式定义时，会使用哪个样式呢？<br>一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4 拥有最高的优先权。</p><ol><li>浏览器缺省设置</li><li>外部样式表</li><li>内部样式表（位于<head>标签内部）</li><li>内联样式（在HTML元素内部）</li></ol><p>内联样式> 标签中的样式声明> 外部样式表中的样式声明(或者浏览器中的样式声明（缺省值）)</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">提示:如果你使用了外部文件的样式在<head>中也定义了该样式，则内部样式表会取代外部文件的样式。注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css 样式是在的相同权值的情况下。</span><br></pre></td></tr></table></figure><blockquote><h3 id="CSS语法"><a href="#CSS语法" class="headerlink" title="CSS语法"></a>CSS语法</h3></blockquote><p><img src="/2017/12/01/CSS/grammar.jpg" alt="grammar"></p><p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</p><p>选择器（selector）通常是您需要改变样式的HTML 元素。</p><p>每条声明(Declaration)由一个属性(property)和一个值(value)组成。在英文大括号“｛｝”中的的就是声明。</p><p>属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属<br>性和值被冒号分开。</p><blockquote><h3 id="浏览器私有属性"><a href="#浏览器私有属性" class="headerlink" title="浏览器私有属性"></a>浏览器私有属性</h3></blockquote><p>由于CSS3 很多属性尚未成为W3C 标准的一部分，因此每种内核的浏览器都只能<br>识别带有自身私有前缀的CSS3 属性。我们在书写CSS3 代码时，需要在属性前加上浏<br>览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3 属性。</p><table><thead><tr><th>私有前缀</th><th style="text-align:center">对应的浏览器</th></tr></thead><tbody><tr><td>-webkit-</td><td style="text-align:center">chrome 和 safari</td></tr><tr><td>-moz-</td><td style="text-align:center">Firefox</td></tr><tr><td>-ms-</td><td style="text-align:center">IE</td></tr><tr><td>-o-</td><td style="text-align:center">opera</td></tr></tbody></table><p>举个例子，假如我们想要使用CSS3 实现半径为10px 的圆角效果的话，就需要这么写：</p><p>border-radius:10px;</p><p>-webkit-border-radius:10px; /<em>兼容chrome 和Safari</em>/</p><p>-moz-border-radius:10px; /<em>兼容Firefox</em>/</p><p>-ms-border-radius:10px; /<em>兼容IE</em>/</p><p>-o-border-radius:10px; /<em>兼容opera</em>/</p><p>CSS 属性值定义参考资源：</p><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSSValue_definition_syntax" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/CSSValue_definition_syntax</a><br><a href="http://www.dreamdu.com/css/property_value/" target="_blank" rel="noopener">http://www.dreamdu.com/css/property_value/</a></p><blockquote><h3 id="规则及语法"><a href="#规则及语法" class="headerlink" title="@规则及语法"></a>@规则及语法</h3></blockquote><ol><li><p>@media 指定样式表规则用于指定的媒体类型和查询条件。</p><p> IE8 及以下只能实现CSS2 中的部分，即只可以设置媒体类型。</p><p> 代码示例：</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@media screen and (width:800px){ … }@import url(example.css) screen and (width:800px);</span><br></pre></td></tr></table></figure></li><li><p>@keyframes 指定动画名称和动画效果。</p><p> 定义动画时，简单的动画可以直接使用关键字from 和to，即从一种状态过渡到另一种状态：<br> 代码示例：</p> <figure class="highlight plain"><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">@keyframes testanimations {from { opacity: 1; }to { opacity: 0; }}</span><br><span class="line"></span><br><span class="line">@keyframes testanimations {from { transform: translate(0, 0); }20% { transform: translate(20px, 20px); }40% { transform: translate(40px, 0); }60% { transform: translate(60px, 20); }80% { transform: translate(80px, 0); }to { transform: translate(100px, 20px); }}</span><br><span class="line"></span><br><span class="line">当然，也可以不使用关键字from 和to，而都使用<percentage>，如将上面的示例代码中的“from”、“to”分别换成“0%”、“100%”。</span><br></pre></td></tr></table></figure></li></ol><ol><li><p>@font-face 设置嵌入HTML 文档的字体。</p><p> 需要兼容当前的主流浏览器， 需同时使用TureTpe(.ttf) 、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。</p><p> 嵌入HTML 文档的字体是指将OpenType 字体（压缩的TrueType 字体）文件映射到客户端系统，用来提供HTML 文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。</p><p> .eot(Embedded Open Type)为IE 的私有字体格式。Safari3.1 开始支持.ttf(TrueType)和.otf(OpenType)。未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式</p><p> 示例代码：</p> <figure class="highlight plain"><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">@font-face {font-family: 'diyfont';src: url('diyfont.eot');</span><br><span class="line"> /* IE9+ */src: url('diyfont.eot?#iefix') format('embedded-opentype'),</span><br><span class="line"> /* IE6-IE8 */url('diyfont.woff') format('woff'),</span><br><span class="line"> /*chrome、firefox */url('diyfont.ttf') format('truetype'),</span><br><span class="line"> /*chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('diyfont.svg#fontname') format('svg');/* iOS 4.1- */}</span><br></pre></td></tr></table></figure><p> 另外， 还有其他几种@ 规则， 如@import/@charset/@namespace/@page/@supports/@document 等，这几类规则用的比较少，具体可以查看CSS 参考手册：<br><a href="http://www.css88.com/book/css/" target="_blank" rel="noopener">http://www.css88.com/book/css/</a></p></li></ol>]]></content>
<summary type="html">
<blockquote>
<h1 id="CSS-简介"><a href="#CSS-简介" class="headerlink" title="CSS 简介"></a>CSS 简介</h1></blockquote>
<ol>
<li>概念：CSS 全称为“层叠样式表(Casc
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="CSS" scheme="http://yoursite.com/younghf.github.io/tags/CSS/"/>
</entry>
<entry>
<title>HTML标签</title>
<link href="http://yoursite.com/younghf.github.io/2017/12/01/html/"/>
<id>http://yoursite.com/younghf.github.io/2017/12/01/html/</id>
<published>2017-12-01T04:44:27.000Z</published>
<updated>2017-12-01T06:52:51.736Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="HTML常用标签汇总"><a href="#HTML常用标签汇总" class="headerlink" title="HTML常用标签汇总"></a>HTML常用标签汇总</h1></blockquote><p>关于各类标签及其用法，参考下面网站链接：<br><br>HTML 参考手册：<br><a href="http://www.runoob.com/tags/html-reference.html" target="_blank" rel="noopener">http://www.runoob.com/tags/html-reference.html</a><br><br>HTML 字符实体参考手册：<a href="http://www.runoob.com/tags/ref-entities.html" target="_blank" rel="noopener">http://www.runoob.com/tags/ref-entities.html</a><br><br>HTML有许多不同的版本，在此只介绍HTML5，主流浏览器都兼容HTML5 的新标签，对于IE8 及以下版本不认识HTML5 的新元素，可以使用JavaScript 创建一个没用的元素来解决，例如：<br><script>document.createElement(“header”);</script>，也可以使用shiv 来解决兼容性问题，详情可参考<a href="https://github.com/afarkas/html5shiv" target="_blank" rel="noopener">HTML5 Shiv</a>。</p><p><img src="/2017/12/01/html/html_tag.png" alt="html_tag"></p><blockquote><h3 id="标签规则"><a href="#标签规则" class="headerlink" title="标签规则"></a>标签规则</h3></blockquote><ol><li>HTML 标签是由尖括号包围的关键词，比如<html></html></li><li>HTML 标签通常是成对出现的，比如<b> 和</b>（ 当然也有例外，比如表示换行的单标签：</br> ）</li><li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li><li>开始和结束标签也被称为开放标签和闭合标签 </li></ol><blockquote><h3 id="标签书写规范"><a href="#标签书写规范" class="headerlink" title="标签书写规范"></a>标签书写规范</h3></blockquote><ol><li>标签统一用小写</li><li>属性值用双引号</li><li>嵌套缩进</li></ol><blockquote><h3 id="HTML-常用属性（全局属性）"><a href="#HTML-常用属性（全局属性）" class="headerlink" title="HTML 常用属性（全局属性）"></a>HTML 常用属性（全局属性）</h3></blockquote><ol><li>id</li><li>class</li><li>style</li><li>title</li></ol><p>具体内容，可以参考：<br><br>HTML 全局属性：<a href="http://www.runoob.com/tags/ref-standardattributes.html" target="_blank" rel="noopener">http://www.runoob.com/tags/ref-standardattributes.html</a></p><blockquote><h3 id="HTML-标签语义化："><a href="#HTML-标签语义化：" class="headerlink" title="HTML 标签语义化："></a>HTML 标签语义化：</h3></blockquote><p>标签的用途：语义化，让网页更好的被搜索引擎理解。<br>什么叫做语义化呢？说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）<br>比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标<br>题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使<br>用em 标签表示强调等等。<br>语义化可以给我们带来什么样的好处呢？</p><ul><li>更容易被搜索引擎收录(SEO)</li><li>更容易让屏幕阅读器读出网页内容(可访问性)</li><li>代码可读性</li></ul><blockquote><h3 id="文档声明"><a href="#文档声明" class="headerlink" title="文档声明"></a>文档声明</h3></blockquote><pre><code><!DOCTYPE html></code></pre><blockquote><h3 id="文档头部"><a href="#文档头部" class="headerlink" title="文档头部"></a>文档头部</h3></blockquote><pre><code>head 标签是页面的“头部”，只能定义一些特殊的内容。一般来说，只有6 个标签能放在<head>标签内：</code></pre><table><thead><tr><th><head>内部标签</th><th style="text-align:center">说明</th></tr></thead><tbody><tr><td><title></td><td style="text-align:center">定义网页的标题</td></tr><tr><td><meta></td><td style="text-align:center">定义网页的基本信息（供搜索引擎）</td></tr><tr><td><style></td><td style="text-align:center">定义CSS 样式</td></tr><tr><td><link></td><td style="text-align:center">链接外部CSS 文件或脚本文件，以及favicon 样式</td></tr><tr><td><script></td><td style="text-align:center">定义脚本语言</td></tr><tr><td><base></td><td style="text-align:center">定义页面所有链接的基础定位</td></tr></tbody></table><blockquote><h3 id="文档章节"><a href="#文档章节" class="headerlink" title="文档章节"></a>文档章节</h3></blockquote><ol><li>body</li><li>header</li><li>nav</li><li>aside</li><li>article</li><li>section</li><li>footer</li><li>h1~h6</li></ol><p><img src="/2017/12/01/html/document.jpg" alt="document"></p><blockquote><h3 id="文本"><a href="#文本" class="headerlink" title="文本"></a>文本</h3></blockquote><p>1.超链接</p><ul><li><a></a><ul><li>创建指向另一个文档的链接</li><li>创建一个文档内部的锚点</li><li>链接到Email地址</li></ul></li></ul><p>2.强调—em,strong</p><p>3.span</p><p>4.br …</p><blockquote><h3 id="组合内容"><a href="#组合内容" class="headerlink" title="组合内容"></a>组合内容</h3></blockquote><p>1.分区</p><ul><li>div</li></ul><p>2.段落</p><ul><li>p</li></ul><p>3.列表</p><ul><li><p>无序列表 ul</p> <figure class="highlight plain"><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"><ul></span><br><span class="line"><li></li></span><br><span class="line"><li></li></span><br><span class="line"><li></li></span><br><span class="line"></ul></span><br></pre></td></tr></table></figure></li><li><p>有序列表 ol </p> <figure class="highlight plain"><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"><ol type='a' start='2'></span><br><span class="line"><li></li></span><br><span class="line"><li></li></span><br><span class="line"><li></li></span><br><span class="line"></ol></span><br></pre></td></tr></table></figure></li><li><p>自定义列表 dl</p> <figure class="highlight plain"><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"><dl></span><br><span class="line"><dt>作者</dt></span><br><span class="line"><dd>Hoff</dd></span><br><span class="line"><dd>Bill</dd></span><br><span class="line"><dt>出版年</dt></span><br><span class="line"><dd>1991</dd></span><br><span class="line"></dl></span><br></pre></td></tr></table></figure></li></ul><p>4.pre</p><p>5.blockquote</p><blockquote><h3 id="嵌入资源"><a href="#嵌入资源" class="headerlink" title="嵌入资源"></a>嵌入资源</h3></blockquote><p>1.img</p><p>2.iframe</p><p>3.object</p><p>4.embed</p><p>5.video</p><p>6.audio</p><p>7.图形图像</p><ul><li>canvas</li><li>svg</li></ul><p>8.热点区域</p><ul><li>map</li><li>area</li></ul><blockquote><h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3></blockquote><p>内容较多且重要，请自行查阅相关文档！</p><blockquote><h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3></blockquote><p>内容较多且重要，请自行查阅相关文档！</p>]]></content>
<summary type="html">
<blockquote>
<h1 id="HTML常用标签汇总"><a href="#HTML常用标签汇总" class="headerlink" title="HTML常用标签汇总"></a>HTML常用标签汇总</h1></blockquote>
<p>关于各类标签及其用法，
</summary>
<category term="前端" scheme="http://yoursite.com/younghf.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="HTML" scheme="http://yoursite.com/younghf.github.io/tags/HTML/"/>
</entry>
<entry>
<title>Markdown</title>
<link href="http://yoursite.com/younghf.github.io/2017/11/30/Markdown/"/>
<id>http://yoursite.com/younghf.github.io/2017/11/30/Markdown/</id>
<published>2017-11-30T06:27:20.000Z</published>
<updated>2017-11-30T07:14:48.009Z</updated>
<content type="html"><![CDATA[<blockquote><h1 id="Markdown-语法入门"><a href="#Markdown-语法入门" class="headerlink" title="Markdown 语法入门"></a>Markdown 语法入门</h1></blockquote><p>第一次写博客，也是第一次用Markdown，感觉还不错吧，用的MAC，官网介绍的编辑器是MOU，结果当前的版本还不支持Sierra…所以就用了<strong><a href="http://macdown.uranusjr.com/" target="_blank" rel="noopener">MacDown</a></strong>界面如下：</p><p><img src="/2017/11/30/Markdown/MacDown.png" alt="MacDown"></p><p>Markdown用法很简单，语法也很少，简单练习下就可以上手，这里我就不赘述啦，直接丢链接：</p><ul><li><p>简明版 <a href="http://wowubuntu.com/markdown/basic.html" target="_blank" rel="noopener">Markdown 语法说明(简体中文版)</a></p></li><li><p>完整版 <a href="http://wowubuntu.com/markdown/index.html" target="_blank" rel="noopener">Markdown 语法说明(简体中文版)</a></p></li></ul><p>掌握了语法就开始你的写作吧。</p>]]></content>
<summary type="html">
<blockquote>
<h1 id="Markdown-语法入门"><a href="#Markdown-语法入门" class="headerlink" title="Markdown 语法入门"></a>Markdown 语法入门</h1></blockquote>
<p
</summary>
<category term="工具" scheme="http://yoursite.com/younghf.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="Markdown" scheme="http://yoursite.com/younghf.github.io/tags/Markdown/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://yoursite.com/younghf.github.io/2017/11/28/hello-world/"/>
<id>http://yoursite.com/younghf.github.io/2017/11/28/hello-world/</id>
<published>2017-11-28T08:12:14.240Z</published>
<updated>2017-11-28T08:12:14.240Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
</feed>