-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
975 lines (693 loc) · 203 KB
/
index.html
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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Tec</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Web Tec">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Web Tec">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Web Tec">
<link rel="icon" href="/css/images/favicon.ico">
<link rel="stylesheet" href="/css/style.css">
<!-- baidu webmaster push -->
<script src='//push.zhanzhang.baidu.com/push.js'></script>
</head>
<body class="home blog custom-background custom-font-enabled single-author">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title">
<a href="/" title="Web Tec" rel="home">Web Tec</a>
</h1>
<h2 class="site-description">
<a href="/" id="subtitle">与您共享web技术</a>
</h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle">菜单</button>
<a class="assistive-text" href="/#content" title="跳至内容">跳至内容</a><!--TODO-->
<div class="menu-main-container">
<ul id="menu-main" class="nav-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/archives">Archives</a></li>
</ul>
</div>
</nav>
</header>
<div id="main" class="wrapper">
<div id="primary" class="site-content"><div id="content" role="main">
<article id="post-Grid布局" class="post-Grid布局 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/30/Grid布局/">Grid布局</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/30/Grid布局/" data-id="cjfdcq1bs0001msht8nbpf1cf" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="CSS网格布局"><a href="#CSS网格布局" class="headerlink" title="CSS网格布局"></a>CSS网格布局</h1><p>（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。</p>
<h2 id="基础知识以及浏览器支持情况"><a href="#基础知识以及浏览器支持情况" class="headerlink" title="基础知识以及浏览器支持情况"></a>基础知识以及浏览器支持情况</h2><p>一开始你需要使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入网格。 与flexbox类似，网格子元素的原始顺序不重要。 你的可以在 CSS 里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。 想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。 网格是有史以来最强大的CSS模块之一。</p>
<p>截至2017年3月，许多浏览器都提供了原生的、不加前缀的对CSS Grid的支持，比如 Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但需要使用过时的语法。 Edge浏览器已经宣布将支持标准的Grid语法，但暂未支持。</p>
<h3 id="桌面浏览器"><a href="#桌面浏览器" class="headerlink" title="桌面浏览器"></a>桌面浏览器</h3><p><img src="/2018/03/30/Grid布局/76447637.jpg" alt=""></p>
<h3 id="移动端-平板"><a href="#移动端-平板" class="headerlink" title="移动端/平板"></a>移动端/平板</h3><p><img src="/2018/03/30/Grid布局/47605447.jpg" alt=""></p>
<h2 id="重要术语"><a href="#重要术语" class="headerlink" title="重要术语"></a>重要术语</h2><p>Grid Container<br>设置了 display: gird 的元素。 这是所有grid item的直接父项。 在下面的例子中，.container就是是 grid container。</p>
<figure class="highlight bash"><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"><div class=<span class="string">"container"</span>></span><br><span class="line"> <div class=<span class="string">"item item-1"</span>></div></span><br><span class="line"> <div class=<span class="string">"item item-2"</span>></div></span><br><span class="line"> <div class=<span class="string">"item item-3"</span>></div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>Grid Item<br>Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但 .sub-item不是。</p>
<figure class="highlight bash"><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"><div class=<span class="string">"container"</span>></span><br><span class="line"> <div class=<span class="string">"item"</span>></div> </span><br><span class="line"> <div class=<span class="string">"item"</span>></span><br><span class="line"> <p class=<span class="string">"sub-item"</span>></p></span><br><span class="line"> </div></span><br><span class="line"> <div class=<span class="string">"item"</span>></div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>Grid Line<br>这个分界线组成网格结构。 它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。 下面例中的黄线就是一个列网格线。<br><img src="/2018/03/30/Grid布局/1186625.jpg" alt=""><br>Grid Track<br>两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。 下面是第二行和第三行网格线之间的网格轨道。<br><img src="/2018/03/30/Grid布局/42074980.jpg" alt=""><br>Grid Cell<br>两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 下面是行网格线1和2之间以及列网格线2和3的网格单元。<br><img src="/2018/03/30/Grid布局/87865938.jpg" alt=""><br>Grid Area<br>四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。 下面是行网格线1和3以及列网格线1和3之间的网格区域。<br><img src="/2018/03/30/Grid布局/55252683.jpg" alt=""></p>
<h2 id="Grid-属性列表"><a href="#Grid-属性列表" class="headerlink" title="Grid 属性列表"></a>Grid 属性列表</h2><p>Grid Container 的全部属性</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">display</span><br><span class="line">grid-template-columns</span><br><span class="line">grid-template-rows</span><br><span class="line">grid-template-areas</span><br><span class="line">grid-template</span><br><span class="line">grid-column-gap</span><br><span class="line">grid-row-gap</span><br><span class="line">grid-gap</span><br><span class="line">justify-items</span><br><span class="line">align-items</span><br><span class="line">justify-content</span><br><span class="line">align-content</span><br><span class="line">grid-auto-columns</span><br><span class="line">grid-auto-rows</span><br><span class="line">grid-auto-flow</span><br><span class="line">grid</span><br></pre></td></tr></table></figure>
<p>Grid Items 的全部属性</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">grid-column-start</span><br><span class="line">grid-column-end</span><br><span class="line">grid-row-start</span><br><span class="line">grid-row-end</span><br><span class="line">grid-column</span><br><span class="line">grid-row</span><br><span class="line">grid-area</span><br><span class="line">justify-self</span><br><span class="line">align-self</span><br></pre></td></tr></table></figure>
<h2 id="父容器-Grid-Container-的属性"><a href="#父容器-Grid-Container-的属性" class="headerlink" title="父容器(Grid Container)的属性"></a>父容器(Grid Container)的属性</h2><p>display<br>将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。</p>
<p>值:</p>
<p>grid - 生成一个块级(block-level)网格<br>inline-grid - 生成一个行级(inline-level)网格<br>subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> display: grid | inline-grid | subgrid;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>注意：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响</p>
<p>grid-template-columns / grid-template-rows<br>使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: <track-size> ... | <line-name> <track-size> ...;</span><br><span class="line"> grid-template-rows: <track-size> ... | <line-name> <track-size> ...;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>例子:</p>
<p>(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 40px 50px auto 50px 40px;</span><br><span class="line"> grid-template-rows: 25% 100px auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/76172788.jpg" alt=""><br>但你可以给网格线指定确切的命名。 注意中括号里的网格线命名语法：<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];</span><br><span class="line"> grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/39647772.jpg" alt=""><br>需要注意的是，一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：row1-end 和 row2-start：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: repeat(3, 20px [col-start]) 5%;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>上面的写法和下面等价：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>“fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 1fr 1fr 1fr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>自由空间是在排除所有不可伸缩的 grid item 之后计算得到的。 在下面的示例中，fr单位可用的自由空间总量不包括50px:</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 1fr 50px 1fr 1fr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="grid-template-areas"><a href="#grid-template-areas" class="headerlink" title="grid-template-areas"></a>grid-template-areas</h2><p>通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。</p>
<p>值：</p>
<p><grid-area-name> - 使用 grid-area 属性设置的网格区域的名称<br>. - 点号代表一个空网格单元<br>none - 没有定义网格区域<br>举例：</grid-area-name></p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> grid-area: header;</span><br><span class="line"> }</span><br><span class="line"> .item-b {</span><br><span class="line"> grid-area: main;</span><br><span class="line"> }</span><br><span class="line"> .item-c {</span><br><span class="line"> grid-area: sidebar;</span><br><span class="line"> }</span><br><span class="line"> .item<span class="_">-d</span> {</span><br><span class="line"> grid-area: footer;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .container {</span><br><span class="line"> grid-template-columns: 50px 50px 50px 50px;</span><br><span class="line"> grid-template-rows: auto;</span><br><span class="line"> grid-template-areas: </span><br><span class="line"> <span class="string">"header header header header"</span></span><br><span class="line"> <span class="string">"main main . sidebar"</span></span><br><span class="line"> <span class="string">"footer footer footer footer"</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。<br><img src="/2018/03/30/Grid布局/13361308.jpg" alt=""><br>你的声明中的每一行都需要有相同数量的单元格。</p>
<p>您可以使用任意数量的相邻的.来声明单个空单元格。 只要这些点号之间没有空格，他们就代表了一个单一的单元格。</p>
<p>需要注意的是你不是在用这个语法命名网格线，而是在命名区域。 当你使用这种语法时，区域两端的网格线实际上是自动命名的。 比如，如果网格区域的名称是foo，那么区域的起始的行网格线和列网格线名称是 foo-start，并且区域终点的行网格线和列网格线名称是 foo-end。 这意味着某些网格线可能有多个名称，比如上面的例子中最左边的一条网格线有三个名字：header-start，main-start 和 footer-start。</p>
<p>grid-template<br>在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。</p>
<p>值：</p>
<p>none - 将三个属性都设置为其初始值<br>subgrid - 把 grid-template-rows 和 grid-template-columns 设置为 subgrid, 并且 grid-template-areas 设置为初始值<br>grid-template-rows / <grid-template-columns - 把 grid-template-columns 和 grid-template-rows 设置为指定值, 与此同时, 设置 grid-template-areas 为 none<br>.container {<br> grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;<br>}<br>它也可以使用一个更复杂但相当方便的语法来指定这三个值。 一个例子：</grid-template-columns></grid-template-rows></p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template:</span><br><span class="line"> [row1-start] <span class="string">"header header header"</span> 25px [row1-end]</span><br><span class="line"> [row2-start] <span class="string">"footer footer footer"</span> 25px [row2-end]</span><br><span class="line"> / auto 50px auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>以上等价于：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];</span><br><span class="line"> grid-template-columns: auto 50px auto;</span><br><span class="line"> grid-template-areas: </span><br><span class="line"> <span class="string">"header header header"</span> </span><br><span class="line"> <span class="string">"footer footer footer"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>由于 grid-template 不会重置隐式网格属性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而这可能是大多数情况下你想要做的。因此建议使用grid属性来代替grid-template。</p>
<p>grid-column-gap / grid-row-gap<br>指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。</p>
<p>值：</p>
<p>line-size - 一个长度值<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-column-gap: <line-size>;</span><br><span class="line"> grid-row-gap: <line-size>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 100px 50px 100px;</span><br><span class="line"> grid-template-rows: 80px auto 80px; </span><br><span class="line"> grid-column-gap: 10px;</span><br><span class="line"> grid-row-gap: 15px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/90840935.jpg" alt=""><br>只能在列/行之间创建缝隙，而不是在外部边缘创建。</p>
<p>grid-gap<br>grid-row-gap 和 grid-column-gap 的缩写</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-gap: <grid-row-gap> <grid-column-gap>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>Example:</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 100px 50px 100px;</span><br><span class="line"> grid-template-rows: 80px auto 80px; </span><br><span class="line"> grid-gap: 10px 15px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果没有指定 grid-row-gap，则会被设置为与 grid-column-gap 相同的值。</p>
<p>justify-items<br>沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。</p>
<p>值：</p>
<p>start: 内容与网格区域的左端对齐<br>end: 内容与网格区域的右端对齐<br>center: 内容位于网格区域的中间位置<br>stretch: 内容宽度占据整个网格区域空间(这是默认值)<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-items: start | end | center | stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-items: start;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/32375396.jpg" alt=""><br><figure class="highlight bash"><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">.container{</span><br><span class="line"> justify-items: end;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-items: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/43043811.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-items: stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/65748525.jpg" alt=""><br>也可以通过给单个 grid item 设置justify-self属性来达到上述效果。</p>
<p>align-items<br>沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。</p>
<p>值：</p>
<p>start: 内容与网格区域的顶端对齐<br>end: 内容与网格区域的底部对齐<br>center: 内容位于网格区域的垂直中心位置<br>stretch: 内容高度占据整个网格区域空间(这是默认值)<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-items: start | end | center | stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例:</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> align-items: start;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/29288460.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-items: end;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/75785569.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-items: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/73680243.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-items: stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/96677310.jpg" alt=""><br>也可以通过给单个 grid item 设置align-self属性来达到上述效果。</p>
<p>justify-content<br>有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。</p>
<p>值：</p>
<p>start - 网格与网格容器的左边对齐<br>end - 网格与网格容器的右边对齐<br>center - 网格与网格容器的中间对齐<br>stretch - 调整g rid item 的大小，让宽度填充整个网格容器<br>space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半<br>space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙<br>space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: start | end | center | stretch | space-around | space-between | space-evenly; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: start;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/26607839.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: end; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/58401412.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: center; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/6935373.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: stretch; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/19778168.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: space-around; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/10289607.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: space-between; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/31776210.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> justify-content: space-evenly; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/17152914.jpg" alt=""><br>align-content<br>有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着列轴对齐网格（与之对应的是 justify-content, 即沿着行轴对齐）。</p>
<p>值：</p>
<p>start - 网格与网格容器的顶部对齐<br>end - 网格与网格容器的底部对齐<br>center - 网格与网格容器的中间对齐<br>stretch - 调整 grid item 的大小，让高度填充整个网格容器<br>space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半<br>space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙<br>space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: start | end | center | stretch | space-around | space-between | space-evenly; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: start; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/18950896.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: end; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/42155578.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: center; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/49948606.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: stretch; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/55248081.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: space-around; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/44376898.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: space-between; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/36459977.jpg" alt=""><br><figure class="highlight bash"><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">.container {</span><br><span class="line"> align-content: space-evenly; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>！<a href="Grid布局/75773096.jpg"></a><br>grid-auto-columns / grid-auto-rows<br>指定自动生成的网格轨道（又名隐式网格轨道）的大小。 隐式网格轨道在你显式的定位超出指定网格范围的行或列（使用 grid-template-rows/grid-template-columns）时被创建。</p>
<p>值：</p>
<p><track-size> - 可以是一个长度值，一个百分比值，或者一个自由空间的一部分（使用 fr 单位）</track-size></p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-auto-columns: <track-size> ...;</span><br><span class="line"> grid-auto-rows: <track-size> ...;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>为了说明如何创建隐式网格轨道，思考如下代码：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-columns: 60px 60px;</span><br><span class="line"> grid-template-rows: 90px 90px</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/5405435.jpg" alt=""><br>这里创建了一个 2x2的网格。</p>
<p>但是，现在想象一下，使用 grid-column 和 grid-row 来定位你的网格项目，如下所示：</p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> grid-column: 1 / 2;</span><br><span class="line"> grid-row: 2 / 3;</span><br><span class="line">}</span><br><span class="line">.item-b {</span><br><span class="line"> grid-column: 5 / 6;</span><br><span class="line"> grid-row: 2 / 3;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/26723160.jpg" alt=""><br>这里我们指定 .item-b开始于列网格线 5 并结束于在列网格线 6，但我们并未定义列网格线 5 或 6。因为我们引用不存在的网格线，宽度为0的隐式轨道的就会被创建用与填补间隙。我们可以使用 grid-auto-columns 和 grid-auto-rows属性来指定这些隐式轨道的宽度：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-auto-columns: 60px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/29377999.jpg" alt=""><br>grid-auto-flow<br>如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目。 而该属性则用于控制自动布局算法的工作方式。</p>
<p>值：</p>
<p>row - 告诉自动布局算法依次填充每行，根据需要添加新行<br>column - 告诉自动布局算法依次填充每列，根据需要添加新列<br>dense - 告诉自动布局算法，如果后面出现较小的 grid item，则尝试在网格中填充空洞<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-auto-flow: row | column | row dense | column dense</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>需要注意的是，dense 可能导致您的 grid item 乱序。</p>
<p>举例， 考虑如下 HTML：</p>
<figure class="highlight bash"><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"><section class=<span class="string">"container"</span>></span><br><span class="line"> <div class=<span class="string">"item-a"</span>>item<span class="_">-a</span></div></span><br><span class="line"> <div class=<span class="string">"item-b"</span>>item-b</div></span><br><span class="line"> <div class=<span class="string">"item-c"</span>>item-c</div></span><br><span class="line"> <div class=<span class="string">"item-d"</span>>item<span class="_">-d</span></div></span><br><span class="line"> <div class=<span class="string">"item-e"</span>>item<span class="_">-e</span></div></span><br><span class="line"></section></span><br></pre></td></tr></table></figure>
<p>你定义一个有5列和2行的网格，并将 grid-auto-flow 设置为 row（这也是默认值）：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> display: grid;</span><br><span class="line"> grid-template-columns: 60px 60px 60px 60px 60px;</span><br><span class="line"> grid-template-rows: 30px 30px;</span><br><span class="line"> grid-auto-flow: row;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>当把 grid item 放在网格上时，你只把其中两个设置了固定的位置：</p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> grid-column: 1;</span><br><span class="line"> grid-row: 1 / 3;</span><br><span class="line">}</span><br><span class="line">.item<span class="_">-e</span> {</span><br><span class="line"> grid-column: 5;</span><br><span class="line"> grid-row: 1 / 3;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>因为我们将 grid-auto-flow 设置为row，所以我们的grid就像这样。 注意观察我们没有做设置的三个项目（item-b，item-c和item-d）是如何在剩余的行水平摆放位置的：<br><img src="/2018/03/30/Grid布局/22296927.jpg" alt=""><br>如果我们将 grid-auto-flow 设置为 column，则 item-b，item-c 和 item-d 以列的顺序上下摆放：<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> display: grid;</span><br><span class="line"> grid-template-columns: 60px 60px 60px 60px 60px;</span><br><span class="line"> grid-template-rows: 30px 30px;</span><br><span class="line"> grid-auto-flow: column;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/61019296.jpg" alt=""><br>grid<br>在单个属性中设置所有以下属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同时也将 sets grid-column-gap 和 grid-row-gap 设置为它们的初始值，即使它们不能被此属性显示设置。</p>
<p>值：</p>
<p>none - 将所有子属性设置为其初始值</p>
<p><grid-template-rows> / <grid-template-columns> - 将 grid-template-rows 和 grid-template-columns 分别设置为指定值，将所有其他子属性设置为其初始值</grid-template-columns></grid-template-rows></p>
<p><grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - 接受所有与grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。 如果省略grid-auto-columns，则将其设置为为grid-auto-rows指定的值。 如果两者都被省略，则它们被设置为它们的初始值<br><figure class="highlight bash"><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">.container {</span><br><span class="line"> grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];</span><br><span class="line">}</span><br></pre></td></tr></table></figure></grid-auto-columns></grid-auto-rows></grid-auto-flow></p>
<p>举例：</p>
<p>以下代码写法等价</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid: 200px auto / 1fr auto 1fr;</span><br><span class="line">}</span><br><span class="line">.container {</span><br><span class="line"> grid-template-rows: 200px auto;</span><br><span class="line"> grid-template-columns: 1fr auto 1fr;</span><br><span class="line"> grid-template-areas: none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>以下代码写法等价</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid: column 1fr / auto;</span><br><span class="line">}</span><br><span class="line">.container {</span><br><span class="line"> grid-auto-flow: column;</span><br><span class="line"> grid-auto-rows: 1fr;</span><br><span class="line"> grid-auto-columns: auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>它也可用使用一个更复杂但相当方便的语法来一次设置所有内容。 你可以指定 grid-template-areas、grid-template-rows 以及 grid-template-columns，并将所有其他子属性设置为其初始值。 你现在所做的是在其网格区域内，指定网格线名称和内联轨道大小。 可以看下面的例子：</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid: [row1-start] <span class="string">"header header header"</span> 1fr [row1-end]</span><br><span class="line"> [row2-start] <span class="string">"footer footer footer"</span> 25px [row2-end]</span><br><span class="line"> / auto 50px auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>上述代码等价于</p>
<figure class="highlight bash"><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">.container {</span><br><span class="line"> grid-template-areas: </span><br><span class="line"> <span class="string">"header header header"</span></span><br><span class="line"> <span class="string">"footer footer footer"</span>;</span><br><span class="line"> grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];</span><br><span class="line"> grid-template-columns: auto 50px auto; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>孩子(Grid Items)的属性<br>grid-column-start / grid-column-end / grid-row-start /grid-row-end<br>使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。</p>
<p>值：</p>
<p><line></line>: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线<br>span <number>: 网格项将跨越指定数量的网格轨道<br>span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线<br>auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道<br><figure class="highlight bash"><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">.item {</span><br><span class="line"> grid-column-start: <number> | <name> | span <number> | span <name> | auto</span><br><span class="line"> grid-column-end: <number> | <name> | span <number> | span <name> | auto</span><br><span class="line"> grid-row-start: <number> | <name> | span <number> | span <name> | auto</span><br><span class="line"> grid-row-end: <number> | <name> | span <number> | span <name> | auto</span><br><span class="line">}</span><br></pre></td></tr></table></figure></name></number></p>
<p>举例：</p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> grid-column-start: 2;</span><br><span class="line"> grid-column-end: five;</span><br><span class="line"> grid-row-start: row1-start</span><br><span class="line"> grid-row-end: 3</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/62513801.jpg" alt=""><br><figure class="highlight bash"><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">.item-b {</span><br><span class="line"> grid-column-start: 1;</span><br><span class="line"> grid-column-end: span col4-start;</span><br><span class="line"> grid-row-start: 2</span><br><span class="line"> grid-row-end: span 2</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/35982385.jpg" alt=""><br>如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道。</p>
<p>网格项可以相互重叠。 您可以使用z-index来控制它们的堆叠顺序。</p>
<p>grid-column / grid-row<br>grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。</p>
<p>值：</p>
<p><start-line> / <end-line> - 每个值的用法都和属性分开写时的用法一样</end-line></start-line></p>
<figure class="highlight bash"><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">.item {</span><br><span class="line"> grid-column: <start-line> / <end-line> | <start-line> / span <value>;</span><br><span class="line"> grid-row: <start-line> / <end-line> | <start-line> / span <value>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>举例：</p>
<figure class="highlight bash"><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">.item-c {</span><br><span class="line"> grid-column: 3 / span 2;</span><br><span class="line"> grid-row: third-line / 4;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/10747075.jpg" alt=""><br>如果没有指定结束行值，则该网格项默认跨越1个轨道。</p>
<p>grid-area<br>给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。另外也可以做为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式。</p>
<p>值：</p>
<p><name> - 你的命名</name></p>
<p><row-start> / <column-start> / <row-end> /<column-end> - 可以是数字，也可以是网格线的名字</column-end></row-end></column-start></row-start></p>
<figure class="highlight bash"><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">.item {</span><br><span class="line"> grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>举例:</p>
<p>给一个网格项命名</p>
<figure class="highlight bash"><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">.item<span class="_">-d</span> {</span><br><span class="line"> grid-area: header</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>作为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写:</p>
<figure class="highlight bash"><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">.item<span class="_">-d</span> {</span><br><span class="line"> grid-area: 1 / col4-start / last-line / 6</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/63828119.jpg" alt=""><br>justify-self<br>沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）。 此属性对单个网格项内的内容生效。</p>
<p>值：</p>
<p>start - 将内容对齐到网格区域的左端<br>end - 将内容对齐到网格区域的右端<br>center - 将内容对齐到网格区域的中间<br>stretch - 填充网格区域的宽度 (这是默认值)<br>举例：</p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> justify-self: start;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/35387818.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> justify-self: end;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/35091017.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> justify-self: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/83987258.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> justify-self: stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/37197638.jpg" alt=""><br>要为网格中的所有grid items 设置对齐方式，也可以通过 justify-items 属性在网格容器上设置此行为。</p>
<p>align-self<br>沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）。 此属性对单个网格项内的内容生效。</p>
<p>值：</p>
<p>start - 将内容对齐到网格区域的顶部<br>end - 将内容对齐到网格区域的底部<br>center - 将内容对齐到网格区域的中间<br>stretch - 填充网格区域的高度 (这是默认值)<br><figure class="highlight bash"><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">.item {</span><br><span class="line"> align-self: start | end | center | stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p>举例:</p>
<figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> align-self: start;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="/2018/03/30/Grid布局/74400279.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> align-self: end;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/99183390.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> align-self: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/8106350.jpg" alt=""><br><figure class="highlight bash"><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">.item<span class="_">-a</span> {</span><br><span class="line"> align-self: stretch;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/30/Grid布局/84267878.jpg" alt=""><br>要为网格中的所有grid items 统一设置对齐方式，也可以通过 align-items 属性在网格容器上设置此行为。</p>
<p>参考：<a href="https://segmentfault.com/a/1190000012889793" target="_blank" rel="noopener">CSS Grid 系列(上)-Grid布局完整指南</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/30/Grid布局/">
<time datetime="2018-03-30T00:55:58.000Z" class="entry-date">
2018-03-30
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS3/">CSS3</a></li></ul>
</footer>
</article>
<article id="post-display属性" class="post-display属性 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/24/display属性/">display属性</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/24/display属性/" data-id="cjfdcq1ch0006mshtaw6azuit" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="display属性值block，inline和inline-block概念和区别"><a href="#display属性值block，inline和inline-block概念和区别" class="headerlink" title="display属性值block，inline和inline-block概念和区别"></a>display属性值block，inline和inline-block概念和区别</h1><h2 id="一、总体概念"><a href="#一、总体概念" class="headerlink" title="一、总体概念"></a>一、总体概念</h2><p>1、block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。</p>
<p>2、大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：</p>
<p>常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。</p>
<p>常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。</p>
<p>3、block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。</p>
<p>4、一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。</p>
<h2 id="二、block，inline和inlinke-block细节对比"><a href="#二、block，inline和inlinke-block细节对比" class="headerlink" title="二、block，inline和inlinke-block细节对比"></a>二、block，inline和inlinke-block细节对比</h2><p>display:block</p>
<p>1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。</p>
<p>2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。</p>
<p>3、block元素可以设置margin和padding属性。</p>
<p>display:inline</p>
<p>1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。</p>
<p>2、inline元素设置width,height属性无效。</p>
<p>3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。</p>
<p>display:inline-block</p>
<p>简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。</p>
<h2 id="三、补充说明"><a href="#三、补充说明" class="headerlink" title="三、补充说明"></a>三、补充说明</h2><p>1、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。</p>
<p>2、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。</p>
<p>IE下块元素如何实现display:inline-block的效果，有两种方法：</p>
<p> 1）、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（…为省略的其他属性内容）：</p>
<figure class="highlight bash"><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 {display:inline-block;...} </span><br><span class="line"> div {display:inline;}</span><br></pre></td></tr></table></figure>
<p> 2）、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：</p>
<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">div {display:inline; zoom:1;...}</span><br></pre></td></tr></table></figure>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/24/display属性/">
<time datetime="2018-03-24T09:13:44.000Z" class="entry-date">
2018-03-24
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css/">css</a></li></ul>
</footer>
</article>
<article id="post-javaScript-跨域" class="post-javaScript-跨域 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/20/javaScript-跨域/">javaScript 跨域</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/20/javaScript-跨域/" data-id="cjfdcq1cq000bmshthv7godwf" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="什么是跨域？"><a href="#什么是跨域？" class="headerlink" title="什么是跨域？"></a>什么是跨域？</h1><p>在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：</p>
<p>Cookie、LocalStorage 和 IndexDB 无法读取。<br>DOM 无法获得。<br>AJAX 请求不能发送。</p>
<p>那么有时候我们又不得不去解决不同域之间的js交互，这时候就要解决浏览器同源策略的问题，也就是需要跨域。<br>跨域的解决办法</p>
<h1 id="跨域的解决办法"><a href="#跨域的解决办法" class="headerlink" title="跨域的解决办法"></a>跨域的解决办法</h1><h2 id="一、JSONP"><a href="#一、JSONP" class="headerlink" title="一、JSONP"></a>一、JSONP</h2><p>在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，script标签里的src属性来完成的，jsonp正是利用这个特性来实现的。<br>比如，在桌面新建一个crossDomain.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是<a href="http://192.168.x.xxx/JSONP/jsonpTest.php那么crossDomain.html中的代码就可以这样：" target="_blank" rel="noopener">http://192.168.x.xxx/JSONP/jsonpTest.php那么crossDomain.html中的代码就可以这样：</a><br><figure class="highlight bash"><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"><script <span class="built_in">type</span>=<span class="string">"text/javascript"</span>></span><br><span class="line">var text = document.querySelector(<span class="string">'.text'</span>);</span><br><span class="line"><span class="keyword">function</span> dosomething(jsondata) {</span><br><span class="line"> var str = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">for</span> (var i = 0; i < jsondata.length; i++) {</span><br><span class="line"> str += jsondata[i];</span><br><span class="line"> }</span><br><span class="line"> text.innerHTML = <span class="string">'我是JS通过JSONP跨域请求来的数据：'</span>+<span class="string">'<span class="show">'</span>+str+<span class="string">'</span>'</span>;</span><br><span class="line">}</span><br><span class="line"></script></span><br><span class="line"><script <span class="built_in">type</span>=<span class="string">"text/javascript"</span> src=<span class="string">"http://192.168.x.xxx/JSONP/jsonpTest.php?callback=dosomething"</span>></script></span><br></pre></td></tr></table></figure></p>
<p>可以看到在获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。<br> 因为是当做一个js文件来引入的，所以<a href="http://192.168.x.xxx/JSONP/jsonpTest.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的" target="_blank" rel="noopener">http://192.168.x.xxx/JSONP/jsonpTest.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的</a>:<br> <figure class="highlight bash"><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"><?php <span class="variable">$callback</span> = <span class="variable">$_GET</span>[<span class="string">'callback'</span>];//得到回掉函数名</span><br><span class="line"> <span class="variable">$data</span> = array(<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>);//要返回的数据</span><br><span class="line"> <span class="built_in">echo</span> <span class="variable">$callback</span>.<span class="string">'('</span>.json_encode(<span class="variable">$data</span>).<span class="string">')'</span>; </span><br><span class="line"> //输出</span><br><span class="line"> ?></span><br></pre></td></tr></table></figure></p>
<p> 然后在crossDomain.html中打印出返回的jsondata如下：</p>
<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">[<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>]</span><br></pre></td></tr></table></figure>
<p> 可以看到请求成功了，然后就可以在crossDomain.html这个页面里处理这个数据了。<br> 这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。<br> 当然可以直接用一些已经封装过的库，这样就不用每次去创建script标签了。如下为JQ的跨域API：<br> <figure class="highlight bash"><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">$.getJSON(<span class="string">'http://192.168.x.xxx/JSONP/jsonpTest.php?callback=?'</span>,<span class="keyword">function</span>(jsondata){</span><br><span class="line"> console.log(jsondata);//[<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>]</span><br><span class="line"> var str = <span class="string">""</span>;</span><br><span class="line"> $.each(jsondata,<span class="keyword">function</span>(i,index){</span><br><span class="line"> <span class="built_in">return</span> str += index;</span><br><span class="line"> });</span><br><span class="line"> $(<span class="string">".text1"</span>).html(<span class="string">'我是JQ通过JSONP跨域请求来的数据：'</span>+<span class="string">'<span class="show">'</span>+str+<span class="string">'</span>'</span>);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure></p>
<p> jquery的getJSON方法会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。<br> <img src="/2018/03/20/javaScript-跨域/20170423222120173.png" alt="跨域"></p>
<h2 id="二、通过修改document-domain来跨子域"><a href="#二、通过修改document-domain来跨子域" class="headerlink" title="二、通过修改document.domain来跨子域"></a>二、通过修改document.domain来跨子域</h2><p> 上面的jsonp是来解决ajax跨域请求的，那么如果是需要处理 Cookie 和 iframe 该怎么办呢？这时候就可以通过修改document.domain来跨子域。两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie或者处理iframe。比如A网页是<a href="http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享Cookie。" target="_blank" rel="noopener">http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享Cookie。</a><br> <figure class="highlight bash"><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">document.domain = <span class="string">'example.com'</span>;</span><br><span class="line"> //现在，A网页通过脚本设置一个 Cookie。</span><br><span class="line"> document.cookie = <span class="string">"test1=hello"</span>;</span><br><span class="line"> //B网页就可以读到这个 Cookie。</span><br><span class="line"> var allCookie = document.cookie;</span><br></pre></td></tr></table></figure></p>
<p> 注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。<br> 另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如.example.com。<br> <figure class="highlight bash"><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-Cookie: key=value; domain=.example.com; path=/</span><br><span class="line">//这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。</span><br></pre></td></tr></table></figure></p>
<p> 不同的iframe 之间（父子或同辈），是能够获取到彼此的window对象的，但是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。<br> 首先说明一下同域之间的iframe是可以操作的。比如<a href="http://127.0.0.1/JSONP/a.html里面嵌入一个iframe指向http://127.0.0.1/myPHP/b.html。那么在a.html里面是可以操作iframe里面的DOM的。" target="_blank" rel="noopener">http://127.0.0.1/JSONP/a.html里面嵌入一个iframe指向http://127.0.0.1/myPHP/b.html。那么在a.html里面是可以操作iframe里面的DOM的。</a><br> <figure class="highlight bash"><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"><iframe src=<span class="string">"http://127.0.0.1/myPHP/b.html"</span> frameborder=<span class="string">"1"</span>></iframe></span><br><span class="line"><body></span><br><span class="line"><script <span class="built_in">type</span>=<span class="string">"text/javascript"</span>></span><br><span class="line">var iframe = document.querySelector(<span class="string">"iframe"</span>);</span><br><span class="line">iframe.onload = <span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> var win = iframe.contentWindow;</span><br><span class="line"> var doc = win.document;</span><br><span class="line"> var ele = doc.querySelector(<span class="string">".text1"</span>);</span><br><span class="line"> var text = ele.innerHTML=<span class="string">"123456"</span>;</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure></p>
<p> 如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。如果两个窗口一级域名相同，只是二级域名不同，那么document.domain属性，就可以规避同源政策，拿到DOM。<br> 对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。</p>
<p> 片段识别符（fragment identifier）<br> window.name<br> 跨文档通信API（Cross-document messaging）</p>
<p> ##三、使用片段识别符来进行跨域<br> 片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如<a href="http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。" target="_blank" rel="noopener">http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。</a><br> 父窗口可以把信息，写入子窗口的片段标识符。在父窗口写入：<br> <figure class="highlight bash"><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">document.getElementById(<span class="string">'frame'</span>).onload = <span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> var src = <span class="string">"http://127.0.0.1/JSONP/b.html"</span> + <span class="string">'#'</span> + <span class="string">"data"</span>;</span><br><span class="line"> this.src = src;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<p> 同样的，子窗口也可以改变父窗口的片段标识符。<br> <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">parent.location.href= target + <span class="string">"#"</span> + <span class="built_in">hash</span>;</span><br></pre></td></tr></table></figure></p>
<h2 id="四、使用window-name来进行跨域"><a href="#四、使用window-name来进行跨域" class="headerlink" title="四、使用window.name来进行跨域"></a>四、使用window.name来进行跨域</h2><p> window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。<br> 比如：有一个页面a.html,它里面有这样的代码：<br> <figure class="highlight bash"><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">window.name = <span class="string">"我是a页面设置的"</span>;</span><br><span class="line">setTimeout(<span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> window.location = <span class="string">"http://127.0.0.1/JSONP/b.html"</span>;</span><br><span class="line">},1000)</span><br></pre></td></tr></table></figure></p>
<p> b.html页面的代码：<br> <figure class="highlight bash"><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"> console.log(window.name);</span><br><span class="line"> ``` </span><br><span class="line">a.html页面载入后1秒，跳转到了b.html页面，结果b页面打印出了：</span><br><span class="line">```bash</span><br><span class="line">我是a页面设置的</span><br></pre></td></tr></table></figure></p>
<p>可以看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。<br>利用window.name可以对同域或者不同域的之间的js进行交互。<br>那么在a.html页面中，我们怎么把b.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入b.html页面，因为我们想要即使a.html页面不跳转也能得到b.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取b.html的数据，然后a.html再去得到iframe获取到的数据。</p>
<h2 id="五、window-postMessage"><a href="#五、window-postMessage" class="headerlink" title="五、window.postMessage"></a>五、window.postMessage</h2><p>上面两种方法都属于破解，HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。<br>这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。<br>举例来说，父窗口<a href="http://a.com向子窗口http://b.com发消息，调用postMessage方法就可以了。" target="_blank" rel="noopener">http://a.com向子窗口http://b.com发消息，调用postMessage方法就可以了。</a><br>a页面：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><iframe id=<span class="string">"frame1"</span> src=<span class="string">"http://127.0.0.1/JSONP/b.html"</span> frameborder=<span class="string">"1"</span>></iframe></span><br><span class="line">document.getElementById(<span class="string">'frame1'</span>).onload = <span class="function"><span class="title">function</span></span>(){</span><br><span class="line"> var win = document.getElementById(<span class="string">'frame1'</span>).contentWindow;</span><br><span class="line"> win.postMessage(<span class="string">"我是来自a页面的"</span>,<span class="string">"http://127.0.0.1/JSONP/b.html"</span>)</span><br><span class="line">}</span><br><span class="line">``` </span><br><span class="line">b页面通过监听message事件可以接受到来自a页面的消息。</span><br><span class="line">```bash</span><br><span class="line">window.onmessage = <span class="keyword">function</span>(e){</span><br><span class="line"> e = e || event;</span><br><span class="line"> console.log(e.data);//我是来自a页面的</span><br><span class="line">}</span><br><span class="line">``` </span><br><span class="line">子窗口向父窗口发送消息的写法类似。</span><br><span class="line">```bash</span><br><span class="line">window.opener.postMessage(<span class="string">'我是来自b页面的'</span>, <span class="string">'http://a.com'</span>);</span><br><span class="line">//父窗口和子窗口都可以通过message事件，监听对方的消息。</span><br><span class="line">``` </span><br><span class="line">通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。 </span><br><span class="line">下面是一个例子，主窗口写入iframe子窗口的localStorage。 </span><br><span class="line">父窗口发送消息代码</span><br><span class="line">```bash</span><br><span class="line">var win = document.getElementsByTagName(<span class="string">'iframe'</span>)[0].contentWindow;</span><br><span class="line">var obj = { name: <span class="string">'Jack'</span> };</span><br><span class="line">// 存入对象</span><br><span class="line">win.postMessage(JSON.stringify({key: <span class="string">'storage'</span>, method: <span class="string">'set'</span>, data: obj}), <span class="string">'http://b.com'</span>);</span><br><span class="line">// 读取对象</span><br><span class="line">win.postMessage(JSON.stringify({key: <span class="string">'storage'</span>, method: <span class="string">"get"</span>}), <span class="string">"*"</span>);</span><br><span class="line">window.onmessage = <span class="keyword">function</span>(e) {</span><br><span class="line"> <span class="keyword">if</span> (e.origin != <span class="string">'http://a.com'</span>) <span class="built_in">return</span>;</span><br><span class="line"> // <span class="string">"Jack"</span></span><br><span class="line"> console.log(JSON.parse(e.data).name);</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>
<p>子窗口接收消息的代码<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">window.onmessage = <span class="keyword">function</span>(e) {</span><br><span class="line"> <span class="keyword">if</span> (e.origin !== <span class="string">'http://bbb.com'</span>) <span class="built_in">return</span>;</span><br><span class="line"> var payload = JSON.parse(e.data);</span><br><span class="line"> switch (payload.method) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'set'</span>:</span><br><span class="line"> localStorage.setItem(payload.key, JSON.stringify(payload.data));</span><br><span class="line"> <span class="built_in">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'get'</span>:</span><br><span class="line"> var parent = window.parent;</span><br><span class="line"> var data = localStorage.getItem(payload.key);</span><br><span class="line"> parent.postMessage(data, <span class="string">'http://aaa.com'</span>);</span><br><span class="line"> <span class="built_in">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'remove'</span>:</span><br><span class="line"> localStorage.removeItem(payload.key);</span><br><span class="line"> <span class="built_in">break</span>;</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>
<h2 id="六、通过WebSocket进行跨域"><a href="#六、通过WebSocket进行跨域" class="headerlink" title="六、通过WebSocket进行跨域"></a>六、通过WebSocket进行跨域</h2><p>WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。<br>下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。<br><figure class="highlight bash"><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">GET /chat HTTP/1.1</span><br><span class="line">Host: server.example.com</span><br><span class="line">Upgrade: websocket</span><br><span class="line">Connection: Upgrade</span><br><span class="line">Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==</span><br><span class="line">Sec-WebSocket-Protocol: chat, superchat</span><br><span class="line">Sec-WebSocket-Version: 13</span><br><span class="line">Origin: http://example.com</span><br></pre></td></tr></table></figure></p>
<p>上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。<br>正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。<br><figure class="highlight bash"><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">HTTP/1.1 101 Switching Protocols</span><br><span class="line">Upgrade: websocket</span><br><span class="line">Connection: Upgrade</span><br><span class="line">Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=</span><br><span class="line">Sec-WebSocket-Protocol: chat</span><br></pre></td></tr></table></figure></p>
<h2 id="七、-CORS"><a href="#七、-CORS" class="headerlink" title="七、 CORS"></a>七、 CORS</h2><p>CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。<br>整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。<br>因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。由于CORS涉及内容较多，以后会写一篇 专门介绍CORS的文章。</p>
<h2 id="八、服务端设置代理页面专门处理前端跨域请求"><a href="#八、服务端设置代理页面专门处理前端跨域请求" class="headerlink" title="八、服务端设置代理页面专门处理前端跨域请求"></a>八、服务端设置代理页面专门处理前端跨域请求</h2><p>总结：以上整理了各种常见的跨域解决办法，在开发过程中我们可以根据不同的场景选择最佳的解决办法。处理ajax的跨域可以选择JSONP、CORS，服务端设置代理、WebSocket。如果主域相同，处理多级子域之间的通信可以选择document.domain，处理不同域之间的iframe,子窗口可以选择window.name、window.postMessage、location.hash来解决。<br>本文参考:<a href="http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html" target="_blank" rel="noopener">浏览器同源政策及其规避方法</a><br><a href="https://my.oschina.net/u/3341316/blog/856682" target="_blank" rel="noopener">js中几种实用的跨域方法原理详解</a><br><a href="https://www.javascriptcn.com/read-41.html" target="_blank" rel="noopener">《js权威指南第六版》</a><br><a href="http://blog.csdn.net/frontender_way/article/details/70568113" target="_blank" rel="noopener">解决跨域汇总</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/20/javaScript-跨域/">
<time datetime="2018-03-20T09:52:39.000Z" class="entry-date">
2018-03-20
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原生js/">原生js</a></li></ul>
</footer>
</article>
<article id="post-CSS-伸缩布局" class="post-CSS-伸缩布局 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/18/CSS-伸缩布局/">CSS3 伸缩布局</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/18/CSS-伸缩布局/" data-id="cjfdcq1bl0000msht1i24iwyc" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="CSS3伸缩布局"><a href="#CSS3伸缩布局" class="headerlink" title="CSS3伸缩布局"></a>CSS3伸缩布局</h1><p>CSS3中引入的布局模式Flexbox布局，主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（适配所有类型的现实设备和屏幕大小）。<br>Flexbox布局功能主要有以下几点：</p>
<p>屏幕和浏览器窗口大小改变时可以灵活调整布局<br>指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），来调整项目大小。（注意，额外空间的概念要理清楚！）<br>指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间<br>指定如何将垂直于元素布局周的额外空间分布到该元素的周围<br>控制元素在页面上的布局方向<br>可以在浏览器渲染周不按照文档流先后顺序重排伸缩项目顺序</p>
<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><p> 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。<br><img src="/2018/03/18/CSS-伸缩布局/bg2015071004.png" alt="CSS3伸缩布局"></p>
<p>以下6个属性设置在容器上：</p>
<p>flex-direction 容器内项目的排列方向(默认横向排列) <br>flex-wrap 容器内项目换行方式<br>flex-flow 以上两个属性的简写方式<br>justify-content 项目在主轴上的对齐方式<br>align-items 项目在交叉轴上如何对齐<br>align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<p>flex-direction<br><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">1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }</span><br></pre></td></tr></table></figure></p>
<p>属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。</p>
<p>flex-wrap<br><figure class="highlight bash"><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">1 .box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }</span><br><span class="line">``` </span><br><span class="line">属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~）</span><br><span class="line"></span><br><span class="line">flex-flow</span><br><span class="line">```bash</span><br><span class="line"> 1 .box { 2 flex-flow: <flex-direction> || <flex-wrap>; 3 }</span><br></pre></td></tr></table></figure></p>
<p>写法属性中，将上述两种方法的值用||连接即可</p>
<p>justify-content<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> 1 .box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3 }</span><br><span class="line">``` </span><br><span class="line">项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)</span><br><span class="line"></span><br><span class="line">flex-start：在主轴上由左或者上开始排列</span><br><span class="line"></span><br><span class="line">flex-end：在主轴上由右或者下开始排列</span><br><span class="line"></span><br><span class="line">center：在主轴上居中排列</span><br><span class="line"></span><br><span class="line">space-between：在主轴上左右两端或者上下两端开始排列</span><br><span class="line"></span><br><span class="line">space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</span><br><span class="line"></span><br><span class="line">align-items</span><br><span class="line">```bash</span><br><span class="line"> 1 .box { 2 align-items: flex-start | flex-end | center | baseline | stretch; 3 }</span><br></pre></td></tr></table></figure></p>
<p>这里面直接上图片说明的更清楚一些:<br><img src="/2018/03/18/CSS-伸缩布局/bg2015071011.png" alt="数值对齐"></p>
<p>align-content<br><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">1 .box { 2 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 3 }</span><br></pre></td></tr></table></figure></p>
<p><img src="/2018/03/18/CSS-伸缩布局/bg2015071012.png" alt="数值对齐"></p>
<p>以上介绍完了容器中的属性，下面说一下容器中项目的属性：</p>
<p>order 项目的排列顺序。数值越小，排列越靠前，默认为0。<br>flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。<br>flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。<br>flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。<br>flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。<br>align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
<p>order<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 order: <<span class="built_in">integer</span>>;</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>flex-grow<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 flex-grow: <number>; /* default 0 */</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>flex-shrink<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 flex-shrink: <number>; /* default 1 */</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>flex-basis<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 flex-basis: <length> | auto; /* default auto */</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>flex<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 flex: none | [ <<span class="string">'flex-grow'</span>> <<span class="string">'flex-shrink'</span>>? || <<span class="string">'flex-basis'</span>> ]</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>align-self<br><figure class="highlight bash"><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">1 .item {</span><br><span class="line">2 align-self: auto | flex-start | flex-end | center | baseline | stretch;</span><br><span class="line">3 }</span><br></pre></td></tr></table></figure></p>
<p>容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool" target="_blank" rel="noopener">更多内容可以到这里了解！</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/18/CSS-伸缩布局/">
<time datetime="2018-03-18T12:23:45.000Z" class="entry-date">
2018-03-18
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS3/">CSS3</a></li></ul>
</footer>
</article>
<article id="post-Http-请求" class="post-Http-请求 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/17/Http-请求/">Http 请求</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/17/Http-请求/" data-id="cjfdcq1de000lmsht1tddveta" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="HTTP协议（HyperText-Transfer-Protocol，超文本传输协议）"><a href="#HTTP协议（HyperText-Transfer-Protocol，超文本传输协议）" class="headerlink" title="HTTP协议（HyperText Transfer Protocol，超文本传输协议）"></a>HTTP协议（HyperText Transfer Protocol，超文本传输协议）</h1><p>是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。</p>
<p>HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）</p>
<h1 id="HTTP-工作原理"><a href="#HTTP-工作原理" class="headerlink" title="HTTP 工作原理"></a>HTTP 工作原理</h1><p>HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。</p>
<p>Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。</p>
<p>Web服务器根据接收到的请求后，向客户端发送响应信息。</p>
<p>HTTP默认端口号为80，但是你也可以改为8080或者其他端口。</p>
<figure class="highlight bash"><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">HTTP三点注意事项：</span><br><span class="line"></span><br><span class="line">HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。</span><br><span class="line">HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。</span><br><span class="line">HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。</span><br></pre></td></tr></table></figure>
<p>以下图表展示了HTTP协议通信流程：<br><img src="/2018/03/17/Http-请求/cgiarch.gif" alt="协议通信流程"></p>
<h1 id="HTTP-消息结构"><a href="#HTTP-消息结构" class="headerlink" title="HTTP 消息结构"></a>HTTP 消息结构</h1><p> HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。</p>
<p> 一个HTTP”客户端”是一个应用程序（Web浏览器或其他任何客户端），通过连接到服务器达到向服务器发送一个或多个HTTP的请求的目的。</p>
<p> 一个HTTP”服务器”同样也是一个应用程序（通常是一个Web服务，如Apache Web服务器或IIS服务器等），通过接收客户端的请求并向客户端发送HTTP响应数据。</p>
<p> HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。</p>
<p> 一旦建立连接后，数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展（MIME）[RFC2045]来传送。</p>
<h2 id="客户端请求消息"><a href="#客户端请求消息" class="headerlink" title="客户端请求消息"></a>客户端请求消息</h2><p> 客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成，下图给出了请求报文的一般格式。<br> <img src="/2018/03/17/Http-请求/2012072810301161.png" alt="请求报文"></p>
<h2 id="服务器响应消息"><a href="#服务器响应消息" class="headerlink" title="服务器响应消息"></a>服务器响应消息</h2><p> HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。<br> <img src="/2018/03/17/Http-请求/574e9258d109b3dea515b2e0c6bf6c81810a4c8b.jpg" alt="HTTP响应"><br>下面实例是一点典型的使用GET来传递数据的实例：</p>
<p>客户端请求：</p>
<figure class="highlight bash"><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">GET /hello.txt HTTP/1.1</span><br><span class="line">User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3</span><br><span class="line">Host: www.example.com</span><br><span class="line">Accept-Language: en, mi</span><br></pre></td></tr></table></figure>
<p>服务端响应:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">HTTP/1.1 200 OK</span><br><span class="line">Date: Mon, 27 Jul 2009 12:28:53 GMT</span><br><span class="line">Server: Apache</span><br><span class="line">Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT</span><br><span class="line">ETag: <span class="string">"34aa387-d-1568eb00"</span></span><br><span class="line">Accept-Ranges: bytes</span><br><span class="line">Content-Length: 51</span><br><span class="line">Vary: Accept-Encoding</span><br><span class="line">Content-Type: text/plain</span><br></pre></td></tr></table></figure>
<p>输出结果：</p>
<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">Hello World! My payload includes a trailing CRLF.</span><br></pre></td></tr></table></figure>
<h1 id="HTTP请求方法"><a href="#HTTP请求方法" class="headerlink" title="HTTP请求方法"></a>HTTP请求方法</h1><p>根据HTTP标准，HTTP请求可以使用多种请求方法。</p>
<p>HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。</p>
<p>HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。</p>
<h1 id="HTTP-响应头信息"><a href="#HTTP-响应头信息" class="headerlink" title="HTTP 响应头信息"></a>HTTP 响应头信息</h1><p>HTTP请求头提供了关于请求，响应或者其他的发送实体的信息。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">Allow </span><br><span class="line">服务器支持哪些请求方法（如GET、POST等）。</span><br><span class="line"></span><br><span class="line">Content-Encoding </span><br><span class="line">文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩，但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此，Servlet应该通过查看Accept-Encoding头（即request.getHeader(<span class="string">"Accept-Encoding"</span>)）检查浏览器是否支持gzip，为支持gzip的浏览器返回经gzip压缩的HTML页面，为其他浏览器返回普通页面。</span><br><span class="line"></span><br><span class="line">Content-Length </span><br><span class="line">表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势，可以把输出文档写入 ByteArrayOutputStream，完成后查看其大小，然后把该值放入Content-Length头，最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。</span><br><span class="line"></span><br><span class="line">Content-Type </span><br><span class="line">表示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置Content-Type，因此HttpServletResponse提供了一个专用的方法setContentType。</span><br><span class="line"></span><br><span class="line">Date </span><br><span class="line">当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。</span><br><span class="line"></span><br><span class="line">Expires </span><br><span class="line">应该在什么时候认为文档已经过期，从而不再缓存它？</span><br><span class="line"></span><br><span class="line">Last-Modified </span><br><span class="line">文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置。</span><br><span class="line"></span><br><span class="line">Location </span><br><span class="line">表示客户应当到哪里去提取文档。Location通常不是直接设置的，而是通过HttpServletResponse的sendRedirect方法，该方法同时设置状态代码为302。</span><br><span class="line"></span><br><span class="line">Refresh </span><br><span class="line">表示浏览器应该在多少时间之后刷新文档，以秒计。除了刷新当前文档之外，你还可以通过setHeader(<span class="string">"Refresh"</span>, <span class="string">"5; URL=http://host/path"</span>)让浏览器读取指定的页面。 </span><br><span class="line">注意这种功能通常是通过设置HTML页面HEAD区的＜META HTTP-EQUIV=<span class="string">"Refresh"</span> CONTENT=<span class="string">"5;URL=http://host/path"</span>＞实现，这是因为，自动刷新或重定向对于那些不能使用CGI或Servlet的HTML编写者十分重要。但是，对于Servlet来说，直接设置Refresh头更加方便。 </span><br><span class="line"></span><br><span class="line">注意Refresh的意义是<span class="string">"N秒之后刷新本页面或访问指定页面"</span>，而不是<span class="string">"每隔N秒刷新本页面或访问指定页面"</span>。因此，连续刷新要求每次都发送一个Refresh头，而发送204状态代码则可以阻止浏览器继续刷新，不管是使用Refresh头还是＜META HTTP-EQUIV=<span class="string">"Refresh"</span> ...＞。 </span><br><span class="line"></span><br><span class="line">注意Refresh头不属于HTTP 1.1正式规范的一部分，而是一个扩展，但Netscape和IE都支持它。</span><br><span class="line"></span><br><span class="line">Server </span><br><span class="line">服务器名字。Servlet一般不设置这个值，而是由Web服务器自己设置。</span><br><span class="line"></span><br><span class="line">Set-Cookie </span><br><span class="line">设置和页面关联的Cookie。Servlet不应使用response.setHeader(<span class="string">"Set-Cookie"</span>, ...)，而是应使用HttpServletResponse提供的专用方法addCookie。参见下文有关Cookie设置的讨论。</span><br><span class="line"></span><br><span class="line">WWW-Authenticate </span><br><span class="line">客户应该在Authorization头中提供什么类型的授权信息？在包含401（Unauthorized）状态行的应答中这个头是必需的。例如，response.setHeader(<span class="string">"WWW-Authenticate"</span>, <span class="string">"BASIC realm=＼"</span>executives＼<span class="string">""</span>)。 </span><br><span class="line">注意Servlet一般不进行这方面的处理，而是让Web服务器的专门机制来控制受密码保护页面的访问（例如.htaccess）。</span><br></pre></td></tr></table></figure>
<h1 id="HTTP状态码"><a href="#HTTP状态码" class="headerlink" title="HTTP状态码"></a>HTTP状态码</h1><p>当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。</p>
<p>HTTP状态码的英文为HTTP Status Code。</p>
<p>下面是常见的HTTP状态码：</p>
<figure class="highlight bash"><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">200 - 请求成功</span><br><span class="line">301 - 资源（网页等）被永久转移到其它URL</span><br><span class="line">404 - 请求的资源（网页等）不存在</span><br><span class="line">500 - 内部服务器错误</span><br></pre></td></tr></table></figure>
<p>HTTP状态码分类<br>HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：<br>1<strong> 信息，服务器收到请求，需要请求者继续执行操作<br>2</strong> 成功，操作被成功接收并处理<br>3<strong> 重定向，需要进一步的操作以完成请求<br>4</strong> 客户端错误，请求包含语法错误或无法完成请求<br>5** 服务器错误，服务器在处理请求的过程中发生了错误</p>
<h2 id="HTTP状态码列表"><a href="#HTTP状态码列表" class="headerlink" title="HTTP状态码列表:"></a>HTTP状态码列表:</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">100 Continue 继续。客户端应继续其请求</span><br><span class="line">101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议</span><br><span class="line">200 OK 请求成功。一般用于GET与POST请求</span><br><span class="line">201 Created 已创建。成功请求并创建了新的资源</span><br><span class="line">202 Accepted 已接受。已经接受请求，但未处理完成</span><br><span class="line">203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本</span><br><span class="line">204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档</span><br><span class="line">205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域</span><br><span class="line">206 Partial Content 部分内容。服务器成功处理了部分GET请求</span><br><span class="line">300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择</span><br><span class="line">301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替</span><br><span class="line">302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI</span><br><span class="line">303 See Other 查看其它地址。与301类似。使用GET和POST请求查看</span><br><span class="line">304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源</span><br><span class="line">305 Use Proxy 使用代理。所请求的资源必须通过代理访问</span><br><span class="line">306 Unused 已经被废弃的HTTP状态码</span><br><span class="line">307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向</span><br><span class="line">400 Bad Request 客户端请求的语法错误，服务器无法理解</span><br><span class="line">401 Unauthorized 请求要求用户的身份认证</span><br><span class="line">402 Payment Required 保留，将来使用</span><br><span class="line">403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求</span><br><span class="line">404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置<span class="string">"您所请求的资源无法找到"</span>的个性页面</span><br><span class="line">405 Method Not Allowed 客户端请求中的方法被禁止</span><br><span class="line">406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求</span><br><span class="line">407 Proxy Authentication Required 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权</span><br><span class="line">408 Request Time-out 服务器等待客户端发送的请求时间过长，超时</span><br><span class="line">409 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突</span><br><span class="line">410 Gone 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置</span><br><span class="line">411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息</span><br><span class="line">412 Precondition Failed 客户端请求信息的先决条件错误</span><br><span class="line">413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息</span><br><span class="line">414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理</span><br><span class="line">415 Unsupported Media Type 服务器无法处理请求附带的媒体格式</span><br><span class="line">416 Requested range not satisfiable 客户端请求的范围无效</span><br><span class="line">417 Expectation Failed 服务器无法满足Expect的请求头信息</span><br><span class="line">500 Internal Server Error 服务器内部错误，无法完成请求</span><br><span class="line">501 Not Implemented 服务器不支持请求的功能，无法完成请求</span><br><span class="line">502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求</span><br><span class="line">503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中</span><br><span class="line">504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求</span><br><span class="line">505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理</span><br></pre></td></tr></table></figure>
<h1 id="HTTP-content-type"><a href="#HTTP-content-type" class="headerlink" title="HTTP content-type"></a>HTTP content-type</h1><p>Content-Type，内容类型，一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些Asp网页点击的结果却是下载到的一个文件或一张图片的原因。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br></pre></td><td class="code"><pre><span class="line">.*（ 二进制流，不知道下载文件类型） application/octet-stream .tif image/tiff</span><br><span class="line">.001 application/x-001 .301 application/x-301</span><br><span class="line">.323 text/h323 .906 application/x-906</span><br><span class="line">.907 drawing/907 .a11 application/x-a11</span><br><span class="line">.acp audio/x-mei-aac .ai application/postscript</span><br><span class="line">.aif audio/aiff .aifc audio/aiff</span><br><span class="line">.aiff audio/aiff .anv application/x-anv</span><br><span class="line">.asa text/asa .asf video/x-ms-asf</span><br><span class="line">.asp text/asp .asx video/x-ms-asf</span><br><span class="line">.au audio/basic .avi video/avi</span><br><span class="line">.awf application/vnd.adobe.workflow .biz text/xml</span><br><span class="line">.bmp application/x-bmp .bot application/x-bot</span><br><span class="line">.c4t application/x-c4t .c90 application/x-c90</span><br><span class="line">.cal application/x-cals .cat application/vnd.ms-pki.seccat</span><br><span class="line">.cdf application/x-netcdf .cdr application/x-cdr</span><br><span class="line">.cel application/x-cel .cer application/x-x509-ca-cert</span><br><span class="line">.cg4 application/x-g4 .cgm application/x-cgm</span><br><span class="line">.cit application/x-cit .class java/*</span><br><span class="line">.cml text/xml .cmp application/x-cmp</span><br><span class="line">.cmx application/x-cmx .cot application/x-cot</span><br><span class="line">.crl application/pkix-crl .crt application/x-x509-ca-cert</span><br><span class="line">.csi application/x-csi .css text/css</span><br><span class="line">.cut application/x-cut .dbf application/x-dbf</span><br><span class="line">.dbm application/x-dbm .dbx application/x-dbx</span><br><span class="line">.dcd text/xml .dcx application/x-dcx</span><br><span class="line">.der application/x-x509-ca-cert .dgn application/x-dgn</span><br><span class="line">.dib application/x-dib .dll application/x-msdownload</span><br><span class="line">.doc application/msword .dot application/msword</span><br><span class="line">.drw application/x-drw .dtd text/xml</span><br><span class="line">.dwf Model/vnd.dwf .dwf application/x-dwf</span><br><span class="line">.dwg application/x-dwg .dxb application/x-dxb</span><br><span class="line">.dxf application/x-dxf .edn application/vnd.adobe.edn</span><br><span class="line">.emf application/x-emf .eml message/rfc822</span><br><span class="line">.ent text/xml .epi application/x-epi</span><br><span class="line">.eps application/x-ps .eps application/postscript</span><br><span class="line">.etd application/x-ebx .exe application/x-msdownload</span><br><span class="line">.fax image/fax .fdf application/vnd.fdf</span><br><span class="line">.fif application/fractals .fo text/xml</span><br><span class="line">.frm application/x-frm .g4 application/x-g4</span><br><span class="line">.gbr application/x-gbr . application/x-</span><br><span class="line">.gif image/gif .gl2 application/x-gl2</span><br><span class="line">.gp4 application/x-gp4 .hgl application/x-hgl</span><br><span class="line">.hmr application/x-hmr .hpg application/x-hpgl</span><br><span class="line">.hpl application/x-hpl .hqx application/mac-binhex40</span><br><span class="line">.hrf application/x-hrf .hta application/hta</span><br><span class="line">.htc text/x-component .htm text/html</span><br><span class="line">.html text/html .htt text/webviewhtml</span><br><span class="line">.htx text/html .icb application/x-icb</span><br><span class="line">.ico image/x-icon .ico application/x-ico</span><br><span class="line">.iff application/x-iff .ig4 application/x-g4</span><br><span class="line">.igs application/x-igs .iii application/x-iphone</span><br><span class="line">.img application/x-img .ins application/x-internet-signup</span><br><span class="line">.isp application/x-internet-signup .IVF video/x-ivf</span><br><span class="line">.java java/* .jfif image/jpeg</span><br><span class="line">.jpe image/jpeg .jpe application/x-jpe</span><br><span class="line">.jpeg image/jpeg .jpg image/jpeg</span><br><span class="line">.jpg application/x-jpg .js application/x-javascript</span><br><span class="line">.jsp text/html .la1 audio/x-liquid-file</span><br><span class="line">.lar application/x-laplayer-reg .latex application/x-latex</span><br><span class="line">.lavs audio/x-liquid-secure .lbm application/x-lbm</span><br><span class="line">.lmsff audio/x-la-lms .ls application/x-javascript</span><br><span class="line">.ltr application/x-ltr .m1v video/x-mpeg</span><br><span class="line">.m2v video/x-mpeg .m3u audio/mpegurl</span><br><span class="line">.m4e video/mpeg4 .mac application/x-mac</span><br><span class="line">.man application/x-troff-man .math text/xml</span><br><span class="line">.mdb application/msaccess .mdb application/x-mdb</span><br><span class="line">.mfp application/x-shockwave-flash .mht message/rfc822</span><br><span class="line">.mhtml message/rfc822 .mi application/x-mi</span><br><span class="line">.mid audio/mid .midi audio/mid</span><br><span class="line">.mil application/x-mil .mml text/xml</span><br><span class="line">.mnd audio/x-musicnet-download .mns audio/x-musicnet-stream</span><br><span class="line">.mocha application/x-javascript .movie video/x-sgi-movie</span><br><span class="line">.mp1 audio/mp1 .mp2 audio/mp2</span><br><span class="line">.mp2v video/mpeg .mp3 audio/mp3</span><br><span class="line">.mp4 video/mpeg4 .mpa video/x-mpg</span><br><span class="line">.mpd application/vnd.ms-project .mpe video/x-mpeg</span><br><span class="line">.mpeg video/mpg .mpg video/mpg</span><br><span class="line">.mpga audio/rn-mpeg .mpp application/vnd.ms-project</span><br><span class="line">.mps video/x-mpeg .mpt application/vnd.ms-project</span><br><span class="line">.mpv video/mpg .mpv2 video/mpeg</span><br><span class="line">.mpw application/vnd.ms-project .mpx application/vnd.ms-project</span><br><span class="line">.mtx text/xml .mxp application/x-mmxp</span><br><span class="line">.net image/pnetvue .nrf application/x-nrf</span><br><span class="line">.nws message/rfc822 .odc text/x-ms-odc</span><br><span class="line">.out application/x-out .p10 application/pkcs10</span><br><span class="line">.p12 application/x-pkcs12 .p7b application/x-pkcs7-certificates</span><br><span class="line">.p7c application/pkcs7-mime .p7m application/pkcs7-mime</span><br><span class="line">.p7r application/x-pkcs7-certreqresp .p7s application/pkcs7-signature</span><br><span class="line">.pc5 application/x-pc5 .pci application/x-pci</span><br><span class="line">.pcl application/x-pcl .pcx application/x-pcx</span><br><span class="line">.pdf application/pdf .pdf application/pdf</span><br><span class="line">.pdx application/vnd.adobe.pdx .pfx application/x-pkcs12</span><br><span class="line">.pgl application/x-pgl .pic application/x-pic</span><br><span class="line">.pko application/vnd.ms-pki.pko .pl application/x-perl</span><br><span class="line">.plg text/html .pls audio/scpls</span><br><span class="line">.plt application/x-plt .png image/png</span><br><span class="line">.png application/x-png .pot application/vnd.ms-powerpoint</span><br><span class="line">.ppa application/vnd.ms-powerpoint .ppm application/x-ppm</span><br><span class="line">.pps application/vnd.ms-powerpoint .ppt application/vnd.ms-powerpoint</span><br><span class="line">.ppt application/x-ppt .pr application/x-pr</span><br><span class="line">.prf application/pics-rules .prn application/x-prn</span><br><span class="line">.prt application/x-prt .ps application/x-ps</span><br><span class="line">.ps application/postscript .ptn application/x-ptn</span><br><span class="line">.pwz application/vnd.ms-powerpoint .r3t text/vnd.rn-realtext3d</span><br><span class="line">.ra audio/vnd.rn-realaudio .ram audio/x-pn-realaudio</span><br><span class="line">.ras application/x-ras .rat application/rat-file</span><br><span class="line">.rdf text/xml .rec application/vnd.rn-recording</span><br><span class="line">.red application/x-red .rgb application/x-rgb</span><br><span class="line">.rjs application/vnd.rn-realsystem-rjs .rjt application/vnd.rn-realsystem-rjt</span><br><span class="line">.rlc application/x-rlc .rle application/x-rle</span><br><span class="line">.rm application/vnd.rn-realmedia .rmf application/vnd.adobe.rmf</span><br><span class="line">.rmi audio/mid .rmj application/vnd.rn-realsystem-rmj</span><br><span class="line">.rmm audio/x-pn-realaudio .rmp application/vnd.rn-rn_music_package</span><br><span class="line">.rms application/vnd.rn-realmedia-secure .rmvb application/vnd.rn-realmedia-vbr</span><br><span class="line">.rmx application/vnd.rn-realsystem-rmx .rnx application/vnd.rn-realplayer</span><br><span class="line">.rp image/vnd.rn-realpix .rpm audio/x-pn-realaudio-plugin</span><br><span class="line">.rsml application/vnd.rn-rsml .rt text/vnd.rn-realtext</span><br><span class="line">.rtf application/msword .rtf application/x-rtf</span><br><span class="line">.rv video/vnd.rn-realvideo .sam application/x-sam</span><br><span class="line">.sat application/x-sat .sdp application/sdp</span><br><span class="line">.sdw application/x-sdw .sit application/x-stuffit</span><br><span class="line">.slb application/x-slb .sld application/x-sld</span><br><span class="line">.slk drawing/x-slk .smi application/smil</span><br><span class="line">.smil application/smil .smk application/x-smk</span><br><span class="line">.snd audio/basic .sol text/plain</span><br><span class="line">.sor text/plain .spc application/x-pkcs7-certificates</span><br><span class="line">.spl application/futuresplash .spp text/xml</span><br><span class="line">.ssm application/streamingmedia .sst application/vnd.ms-pki.certstore</span><br><span class="line">.stl application/vnd.ms-pki.stl .stm text/html</span><br><span class="line">.sty application/x-sty .svg text/xml</span><br><span class="line">.swf application/x-shockwave-flash .tdf application/x-tdf</span><br><span class="line">.tg4 application/x-tg4 .tga application/x-tga</span><br><span class="line">.tif image/tiff .tif application/x-tif</span><br><span class="line">.tiff image/tiff .tld text/xml</span><br><span class="line">.top drawing/x-top .torrent application/x-bittorrent</span><br><span class="line">.tsd text/xml .txt text/plain</span><br><span class="line">.uin application/x-icq .uls text/iuls</span><br><span class="line">.vcf text/x-vcard .vda application/x-vda</span><br><span class="line">.vdx application/vnd.visio .vml text/xml</span><br><span class="line">.vpg application/x-vpeg005 .vsd application/vnd.visio</span><br><span class="line">.vsd application/x-vsd .vss application/vnd.visio</span><br><span class="line">.vst application/vnd.visio .vst application/x-vst</span><br><span class="line">.vsw application/vnd.visio .vsx application/vnd.visio</span><br><span class="line">.vtx application/vnd.visio .vxml text/xml</span><br><span class="line">.wav audio/wav .wax audio/x-ms-wax</span><br><span class="line">.wb1 application/x-wb1 .wb2 application/x-wb2</span><br><span class="line">.wb3 application/x-wb3 .wbmp image/vnd.wap.wbmp</span><br><span class="line">.wiz application/msword .wk3 application/x-wk3</span><br><span class="line">.wk4 application/x-wk4 .wkq application/x-wkq</span><br><span class="line">.wks application/x-wks .wm video/x-ms-wm</span><br><span class="line">.wma audio/x-ms-wma .wmd application/x-ms-wmd</span><br><span class="line">.wmf application/x-wmf .wml text/vnd.wap.wml</span><br><span class="line">.wmv video/x-ms-wmv .wmx video/x-ms-wmx</span><br><span class="line">.wmz application/x-ms-wmz .wp6 application/x-wp6</span><br><span class="line">.wpd application/x-wpd .wpg application/x-wpg</span><br><span class="line">.wpl application/vnd.ms-wpl .wq1 application/x-wq1</span><br><span class="line">.wr1 application/x-wr1 .wri application/x-wri</span><br><span class="line">.wrk application/x-wrk .ws application/x-ws</span><br><span class="line">.ws2 application/x-ws .wsc text/scriptlet</span><br><span class="line">.wsdl text/xml .wvx video/x-ms-wvx</span><br><span class="line">.xdp application/vnd.adobe.xdp .xdr text/xml</span><br><span class="line">.xfd application/vnd.adobe.xfd .xfdf application/vnd.adobe.xfdf</span><br><span class="line">.xhtml text/html .xls application/vnd.ms-excel</span><br><span class="line">.xls application/x-xls .xlw application/x-xlw</span><br><span class="line">.xml text/xml .xpl audio/scpls</span><br><span class="line">.xq text/xml .xql text/xml</span><br><span class="line">.xquery text/xml .xsd text/xml</span><br><span class="line">.xsl text/xml .xslt text/xml</span><br><span class="line">.xwd application/x-xwd .x_b application/x-x_b</span><br><span class="line">.sis application/vnd.symbian.install .sisx application/vnd.symbian.install</span><br><span class="line">.x_t application/x-x_t .ipa application/vnd.iphone</span><br><span class="line">.apk application/vnd.android.package-archive .xap application/x-silverligh</span><br></pre></td></tr></table></figure></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/17/Http-请求/">
<time datetime="2018-03-17T14:31:19.000Z" class="entry-date">
2018-03-17
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Http/">Http</a></li></ul>
</footer>
</article>
<article id="post-数组sort-中文排序" class="post-数组sort-中文排序 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/16/数组sort-中文排序/">数组sort()中文排序</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/16/数组sort-中文排序/" data-id="cjfdcq1dl000omshtr8ah2ua0" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<p> sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。<br> <figure class="highlight bash"><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">var newArr = [];</span><br><span class="line"> newArr[0] = <span class="string">"aa"</span>;</span><br><span class="line"> newArr[1] = <span class="string">"ee"</span>;</span><br><span class="line"> newArr[2] = <span class="string">"dd"</span>;</span><br><span class="line"> newArr[3] = <span class="string">"uu"</span>;</span><br><span class="line"> newArr[4] = <span class="string">"ee"</span>;</span><br><span class="line"> newArr[5] = <span class="string">"cc"</span>;</span><br><span class="line"> newArr[6] = <span class="string">"qq"</span>;</span><br><span class="line"> newArr[7] = <span class="string">"bb"</span>;</span><br><span class="line"> document.write(newArr+<span class="string">'</br>'</span>);</span><br><span class="line"> document.write(newArr.sort() +<span class="string">'</br>'</span>);</span><br><span class="line"> //aa,ee,dd,uu,ee,cc,qq,bb</span><br><span class="line"> //aa,bb,cc,dd,ee,ee,qq,uu</span><br></pre></td></tr></table></figure></p>
<p> 语法：arrayObject.sort(sortby)；参数sortby可选。规定排序顺序。必须是函数。<br> 注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。</p>
<p> 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：<br> 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。<br> 若 a 等于 b，则返回 0。<br> 若 a 大于 b，则返回一个大于 0 的值。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">var newBrr = [];</span><br><span class="line"> newBrr[0] = 55;</span><br><span class="line"> newBrr[1] = 5;</span><br><span class="line"> newBrr[2] = 4;</span><br><span class="line"> newBrr[3] = 45;</span><br><span class="line"> newBrr[4] = 59;</span><br><span class="line"> newBrr[5] = 15;</span><br><span class="line"> newBrr[6] = 35;</span><br><span class="line"> newBrr[7] = 75;</span><br><span class="line"> document.write(newBrr+<span class="string">'</br>'</span>);</span><br><span class="line"> document.write(newBrr.sort(orderNumber) +<span class="string">'</br>'</span>);</span><br><span class="line"> <span class="keyword">function</span> orderNumber(a,b) {</span><br><span class="line"> <span class="keyword">if</span>(a>b){</span><br><span class="line"> console.info(newBrr);</span><br><span class="line"> //<span class="built_in">return</span> 1;</span><br><span class="line"> <span class="built_in">return</span> -1;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(a<b){</span><br><span class="line"> console.info(newBrr);</span><br><span class="line"> // <span class="built_in">return</span> -1;</span><br><span class="line"> <span class="built_in">return</span> 1;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> console.info(newBrr);</span><br><span class="line"> <span class="built_in">return</span> 0;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> //55,5,4,45,59,15,35,75</span><br><span class="line"> //75,59,55,45,35,15,5,4 这里是倒序！</span><br></pre></td></tr></table></figure>
<pre><code>特定顺序的汉字排序！！！
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">var arr = [</span><br><span class="line"> {age:11,name:<span class="string">"好好"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"得到"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"嗯嗯"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"好好"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"哇喔"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"前期"</span>},</span><br><span class="line"> {age:11,name:<span class="string">"刚刚"</span>}</span><br><span class="line"> ];</span><br><span class="line"> <span class="keyword">for</span>(i = 0;i<arr.length;i++){</span><br><span class="line"> document.write(arr[i].name+<span class="string">"<br/>"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> var arrComp ={</span><br><span class="line"> <span class="string">"好好"</span>:4,</span><br><span class="line"> <span class="string">"得到"</span>:7,</span><br><span class="line"> <span class="string">"嗯嗯"</span>:1,</span><br><span class="line"> <span class="string">"哇喔"</span>:5,</span><br><span class="line"> <span class="string">"好好"</span>:3,</span><br><span class="line"> <span class="string">"前期"</span>:2,</span><br><span class="line"> <span class="string">"刚刚"</span>:6</span><br><span class="line"> };</span><br><span class="line"> /*我想得到：嗯嗯</span><br><span class="line"> 前期</span><br><span class="line"> 好好</span><br><span class="line"> 好好</span><br><span class="line"> 哇喔</span><br><span class="line"> 刚刚</span><br><span class="line"> 得到 这样的排序！*/</span><br><span class="line"></span><br><span class="line"> /*document.write(arr.name+<span class="string">'</br>'</span>);</span><br><span class="line"> document.write(arr.sort(CompareText)+<span class="string">'</br>'</span>);*/</span><br><span class="line"> var show = arr.sort(CompareText);</span><br><span class="line"> <span class="keyword">for</span>(i = 0; i < show.length;i++)</span><br><span class="line"> {</span><br><span class="line"></span><br><span class="line"> document.write(show[i].name+<span class="string">"</br>"</span>);</span><br><span class="line"> }</span><br><span class="line"> /**</span><br><span class="line"> * @<span class="built_in">return</span> {number}</span><br><span class="line"> */</span><br><span class="line"> <span class="keyword">function</span> CompareText(a,b) {</span><br><span class="line"> <span class="built_in">return</span> arrComp[a.name] - arrComp[b.name];</span><br><span class="line"> }</span><br><span class="line"> /*</span><br><span class="line"> 好好</span><br><span class="line"> 得到</span><br><span class="line"> 嗯嗯</span><br><span class="line"> 好好</span><br><span class="line"> 哇喔</span><br><span class="line"> 前期</span><br><span class="line"> 刚刚*/</span><br><span class="line"> /*</span><br><span class="line"> 嗯嗯</span><br><span class="line"> 前期</span><br><span class="line"> 好好</span><br><span class="line"> 好好</span><br><span class="line"> 哇喔</span><br><span class="line"> 刚刚</span><br><span class="line"> 得到*/</span><br></pre></td></tr></table></figure>
</code></pre>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/16/数组sort-中文排序/">
<time datetime="2018-03-16T14:19:17.000Z" class="entry-date">
2018-03-16
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原生js/">原生js</a></li></ul>
</footer>
</article>
<article id="post-原生js-转换-Url" class="post-原生js-转换-Url post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/16/原生js-转换-Url/">原生js 转换 Url</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/16/原生js-转换-Url/" data-id="cjfdcq1cl0009mshtaysk03nf" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>JavaScript正则表达式及字符串匹配函数</p>
<p>解析这样一个Url<br><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">str = <span class="string">"https://www.baidu.com?name=lili&age=20&gender=男"</span>;</span><br></pre></td></tr></table></figure></p>
<p>我们用如下函数来解析<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> parseStrObjByRegExp(strDes) { </span><br><span class="line"> var obj = {}; </span><br><span class="line"> strDes.replace(/(\w+)(?:=([^&]*))?/g, <span class="keyword">function</span> (str, key, value) { </span><br><span class="line"> obj[key] = value; </span><br><span class="line"> }); </span><br><span class="line"> <span class="built_in">return</span> obj; </span><br><span class="line">} </span><br><span class="line">var obj = parseStrObjByRegExp(<span class="string">"name=jack&age=20&love=lily"</span>);</span><br></pre></td></tr></table></figure></p>
<p>这里应用到了 正则表达式冒号的使用<br><figure class="highlight bash"><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">(?: pattern)是非捕获型括号 匹配pattern，但不捕获匹配结果。</span><br><span class="line">(pattern )是捕获型括号。 匹配pattern，匹配pattern并捕获结果,自动获取组号</span><br><span class="line">(?<name> pattern ) 匹配pattern， 匹配pattern并捕获结果，设置name为组名 </span><br><span class="line"> 使用小括号指定一个子表达式后，匹配这个子表达式的文本(也就是此分组捕获的内容)可以 在表达式或其它程序中作进一步的处理。默认情况下，每个捕获组会自动拥有一个组号，规则 是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推。 </span><br><span class="line"> 如果正则表达式中同时存在普通捕获组和命名捕获组，那么捕获组的编号就要特别注意， 编号的规则是先对普通捕获组进行编号，再对命名捕获组进行编号。 </span><br><span class="line"> 为了避免括号太多使编号混乱，也为了避免无用的捕获提高效率，在不需要捕获只需要指定 分组的地方就可以使用非捕获型括号。问题里的非捕获型括号就是为此使用的</span><br></pre></td></tr></table></figure></p>
<p>以及replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。<br><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">stringObject.replace(regexp/substr,replacement)</span><br></pre></td></tr></table></figure></p>
<figure class="highlight bash"><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">参数 描述</span><br><span class="line">regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。</span><br><span class="line"> 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。</span><br><span class="line"></span><br><span class="line">replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。</span><br></pre></td></tr></table></figure>
<p>最后解析的结果是这样子的<br><figure class="highlight bash"><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">obg{</span><br><span class="line"> name:<span class="string">"jack"</span>,</span><br><span class="line"> age:<span class="string">"20"</span>,</span><br><span class="line"> love:<span class="string">"lily"</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/16/原生js-转换-Url/">
<time datetime="2018-03-16T13:27:28.000Z" class="entry-date">
2018-03-16
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原生js/">原生js</a></li></ul>
</footer>
</article>
<article id="post-原生js插件" class="post-原生js插件 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/15/原生js插件/">原生js插件</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/15/原生js插件/" data-id="cjfdcq1dg000mmshtfavmi98s" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>一个可复用的插件需要满足以下条件：</p>
<p>插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；<br>插件需具备默认设置参数；<br>插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件功能的默认参数，从而实现用户自定义插件效果；<br>插件支持链式调用；<br>插件需提供监听入口，及针对指定元素进行监听，使得该元素与插件响应达到插件效果。</p>
<h1 id="插件全局函数"><a href="#插件全局函数" class="headerlink" title="插件全局函数"></a>插件全局函数</h1><p>实现私有作用域，最好的办法就是使用闭包。可以把插件当做一个函数，插件内部的变量及函数的私有变量，为了在调用插件后依旧能使用其功能，闭包的作用就是延长函数(插件)内部变量的生命周期，使得插件函数可以重复调用，而不影响用户自身作用域。</p>
<p>故需将插件的所有功能写在一个立即执行函数中：</p>
<figure class="highlight bash"><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">(<span class="function"><span class="title">function</span></span> () {</span><br><span class="line"> //插件所有功能都写在这个函数下</span><br><span class="line">})();</span><br></pre></td></tr></table></figure>
<p>2、插件默认参数<br>插件的主要功能可以总结至几个关键参数，通过这几个关键参数即可修改插件的主要功能，也是第三步API设置的关键参数。</p>
<p>将默认参数放置在全局函数的最前面，参数变量名为options,通过对象字面量进行赋值：</p>
<figure class="highlight bash"><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 options = {</span><br><span class="line"> key1: para1,</span><br><span class="line"> key2: para2,</span><br><span class="line"> key3: para3,</span><br><span class="line"> ...</span><br><span class="line"> keyn: paran</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>key即为可以插件变量名字，para为该变量对应的值。如我需要编写一个设置颜色的插件，默认颜色为黑色，option应为：</p>
<figure class="highlight bash"><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">var options = {</span><br><span class="line"> color: <span class="string">'#333333'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>编写功能部分时调用方式：options.color。</p>
<h1 id="插件API、参数设置和监听"><a href="#插件API、参数设置和监听" class="headerlink" title="插件API、参数设置和监听"></a>插件API、参数设置和监听</h1><p>因为API指向的是使用者，故需要在用户调用插件时将API暴露给用户，因用户API时是通过插件提供的名字进行使用，故将API设置为Object类型，用户就可以通过调用API的key进行使用，具体的代码如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">var api = {</span><br><span class="line"> config: <span class="keyword">function</span> (ops) {</span><br><span class="line"> //....</span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line"> },</span><br><span class="line"> listen: <span class="keyword">function</span> listen(elem) {</span><br><span class="line"> //...</span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line"> },</span><br><span class="line"> feature1: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> //...</span><br><span class="line"> },</span><br><span class="line"> feature2: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> //...</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">this.pluginName = api;</span><br></pre></td></tr></table></figure>
<p>上面提供了api的写法示范，该api提供了config以设置自定义参数，listen为插件监听的dom操作，feature为插件的主要功能，使用options参数的功能都要写在api下，注意api.config和api.listen两个函数都应该在最后返回this，以便实现插件的链式调用。</p>
<p>有了上面的框架，针对config设置函数的写法就有了明确的要求：在用户没有传入自定义函数时，默认使用上一节options中的参数，如果用户有设置config参数，使用用户自定义参数：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">config: <span class="keyword">function</span> (opts) {</span><br><span class="line"> //没有参数传入，直接返回默认参数</span><br><span class="line"> <span class="keyword">if</span>(!opts) <span class="built_in">return</span> options;</span><br><span class="line"> //有参数传入，通过key将options的值更新为用户的值</span><br><span class="line"> <span class="keyword">for</span>(var key <span class="keyword">in</span> opts) {</span><br><span class="line"> options[key] = opts[key];</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>针对元素的监听listen，需要对所有符合条件的dom元素进行监听：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">listen: <span class="keyword">function</span> listen(elem) {</span><br><span class="line"> //这里通过typeof设置监听的元素需为字符串调用，实际可根据需要进行更改</span><br><span class="line"> <span class="keyword">if</span> (typeof elem === <span class="string">'string'</span>) {</span><br><span class="line"> //这里使用ES5的querySelectorAll方法获取dom元素</span><br><span class="line"> var elems = document.querySelectorAll(elem),</span><br><span class="line"> i = elems.length;</span><br><span class="line"> //通过递归将listen方法应用在所有的dom元素上</span><br><span class="line"> <span class="keyword">while</span> (i--) {</span><br><span class="line"> listen(elems[i]);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span></span><br><span class="line"> }</span><br><span class="line"> //在这里，你可以将插件的部分功能函数写在这里</span><br><span class="line"></span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>在config和listen这两个最基本的API完成后，需要将API与插件的名字结合起来：</p>
<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">this.pluginName = api;</span><br></pre></td></tr></table></figure>
<p>则最基本的API如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">var api = {</span><br><span class="line"> //插件参数设定</span><br><span class="line"> config: <span class="keyword">function</span> (opts) {</span><br><span class="line"> <span class="keyword">if</span>(!opts) <span class="built_in">return</span> options;</span><br><span class="line"> <span class="keyword">for</span>(var key <span class="keyword">in</span> opts) {</span><br><span class="line"> options[key] = opts[key];</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line"> },</span><br><span class="line"> //插件监听</span><br><span class="line"> listen: <span class="keyword">function</span> listen(elem) {</span><br><span class="line"> <span class="keyword">if</span> (typeof elem === <span class="string">'string'</span>) {</span><br><span class="line"> var elems = document.querySelectorAll(elem),</span><br><span class="line"> i = elems.length;</span><br><span class="line"> <span class="keyword">while</span> (i--) {</span><br><span class="line"> listen(elems[i]);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span></span><br><span class="line"> }</span><br><span class="line"> //插件功能函数可以写在这</span><br><span class="line"> <span class="built_in">return</span> this;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">//将API赋值给插件名字</span><br><span class="line">this.pluginName = api;</span><br><span class="line">则用户使用该插件时，调用方式为：</span><br><span class="line"></span><br><span class="line">pluginName.listen(<span class="string">'#demo'</span>);</span><br><span class="line">如需要自定义参数：</span><br><span class="line"></span><br><span class="line">pluginName.config({key: <span class="string">'para'</span>}).listen(<span class="string">'#demo'</span>);</span><br><span class="line">//因为config和listen已经返回this，所有可以这样调用：</span><br><span class="line">pluginName.listen(<span class="string">'#demo'</span>).config({key: <span class="string">'para'</span>});</span><br><span class="line">//还可以这样调用：</span><br><span class="line">pluginName.config({key: <span class="string">'para'</span>})</span><br><span class="line"> .listen(<span class="string">'#demo'</span>);</span><br></pre></td></tr></table></figure>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/15/原生js插件/">
<time datetime="2018-03-15T11:24:17.000Z" class="entry-date">
2018-03-15
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原生js/">原生js</a></li></ul>
</footer>
</article>
<article id="post-Hexo-建站浅谈" class="post-Hexo-建站浅谈 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/14/Hexo-建站浅谈/">Hexo 建站浅谈</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/14/Hexo-建站浅谈/" data-id="cjfdcq1co000amshtc2zzgx0a" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>很高兴与大家分享 <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>个人Blog构架! 这也是我第一个要和大家介绍的内容.<br>如果要了解更过 可以到这里 <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> . 遇到任何问题也可以到官网去解决！ <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or GitHub上大神们的解读 <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="让我们开始吧！"><a href="#让我们开始吧！" class="headerlink" title="让我们开始吧！"></a>让我们开始吧！</h2><h3 id="在安装好nodejs-npm进一步还需要Git环境后"><a href="#在安装好nodejs-npm进一步还需要Git环境后" class="headerlink" title="在安装好nodejs-npm进一步还需要Git环境后"></a>在安装好nodejs-npm进一步还需要Git环境后</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> 在hexo根目录新建文章</span><br></pre></td></tr></table></figure>
<p>了解更多: <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 或 hexo s</span><br></pre></td></tr></table></figure>
<p>了解更多: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="生成页面"><a href="#生成页面" class="headerlink" title="生成页面"></a>生成页面</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 或 hexo g</span><br></pre></td></tr></table></figure>
<p>了解更多: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="GitHub-部署"><a href="#GitHub-部署" class="headerlink" title="GitHub 部署"></a>GitHub 部署</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 或 hexo d</span><br></pre></td></tr></table></figure>
<p>了解更多: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/14/Hexo-建站浅谈/">
<time datetime="2018-03-14T12:26:55.000Z" class="entry-date">
2018-03-14
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/">Hexo</a></li></ul>
</footer>
</article>
<article id="post-Hexo-建站详解" class="post-Hexo-建站详解 post type-post status-publish format-standard hentry">
<!---->
<header class="entry-header">
<h1 class="entry-title">
<a class="article-title" href="/2018/03/14/Hexo-建站详解/">Hexo 建站详解</a>
</h1>
<div class="comments-link">
<a href="javascript:void(0);" data-url="http://yoursite.com/2018/03/14/Hexo-建站详解/" data-id="cjfdcq1cj0007mshtkbd0gwvq" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
</div><!-- .comments-link -->
</header><!-- .entry-header -->
<div class="entry-content">
<h1 id="Hexo-简介"><a href="#Hexo-简介" class="headerlink" title="Hexo 简介"></a>Hexo 简介</h1><p>Hexo 是一个快速、简洁且高效的Node.js静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>
<h1 id="Hexo-安装"><a href="#Hexo-安装" class="headerlink" title="Hexo 安装"></a>Hexo 安装</h1><p>我的 Hexo 安装版本为：vs_3.4.3；Node.js 版本为：vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功，接下来只需要使用 NPM 即可完成 Hexo 的安装。在计算机的某个盘符下（其他盘符/文件夹下亦可）新建文件夹 blog，进入到文件夹 blog 中使用 Git Bash （在任意位置单击右键，选择 “Git Bash Here” 即可）进行操作如下：</p>
<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">$ npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<p>Hexo 更新至最新版本，命令如下：</p>
<p>$ npm update hexo -g</p>
<h1 id="Hexo-初始化"><a href="#Hexo-初始化" class="headerlink" title="Hexo 初始化"></a>Hexo 初始化</h1><p>安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。<br><figure class="highlight bash"><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">$ hexo init blog</span><br><span class="line">$ <span class="built_in">cd</span> blog</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure></p>
<p>输入以下命令生成静态页面：</p>
<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>新建完成后，指定文件夹的目录如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml 网站的配置信息，您可以在此配置大部分的参数</span><br><span class="line">├── package.json 应用程序的信息</span><br><span class="line">├── scaffolds 模板文件夹</span><br><span class="line">├── <span class="built_in">source</span> 资源文件夹，存放用户资源</span><br><span class="line">| ├── _drafts</span><br><span class="line">| └── _posts</span><br><span class="line">└── themes 网站主题文件夹</span><br></pre></td></tr></table></figure>
<p>接着输入命令启动服务：</p>
<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>打印信息如下表示服务启动成功：</p>
<figure class="highlight bash"><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">$ hexo server</span><br><span class="line">INFO Start processing</span><br><span class="line">INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>
<p>然后在浏览器中访问：<a href="http://localhost:4000/，注意这里不能直接使用快捷键" target="_blank" rel="noopener">http://localhost:4000/，注意这里不能直接使用快捷键</a> Ctrl+C 去复制链接，需要单击鼠标右键选择复制或手动输入。注意看打印信息 Press Ctrl+C to stop. 所以你如果随手 Ctrl+C，服务就停了，也就无法访问了。如果操作无误且正确启动服务后仍无法访问，那么请您继续往下看：（四、常见问题及解决方法）</p>
<h1 id="Hexo-配置（-config-yml-文件）"><a href="#Hexo-配置（-config-yml-文件）" class="headerlink" title="Hexo 配置（_config.yml 文件）"></a>Hexo 配置（_config.yml 文件）</h1><figure class="highlight bash"><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">title 网站标题</span><br><span class="line">subtitle 网站副标题</span><br><span class="line">description 网站描述</span><br><span class="line">author 您的名字</span><br><span class="line">language 网站使用的语言</span><br><span class="line">timezone 网站时区。Hexo 默认使用您电脑的时区时区列表。比如说：America/New_York, Japan, 和 UTC 。</span><br></pre></td></tr></table></figure>
<p>其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。<br>复制代码<br>其他相关详细配置信息请参考：Hexo 配置</p>
<h1 id="Hexo-部署至-Github"><a href="#Hexo-部署至-Github" class="headerlink" title="Hexo 部署至 Github"></a>Hexo 部署至 Github</h1><p>首先需要在 Github 中新建仓库 new repository 为：【您的 Github 名称.github.io】，如：DestinyV.github.io。然后修改 _config.yml 配置文件 ，打开文件后找到 deploy: 修改如下：（注意冒号后面有一个空格： ）</p>
<h1 id="Deployment"><a href="#Deployment" class="headerlink" title="Deployment"></a>Deployment</h1><h2 id="Docs-https-hexo-io-docs-deployment-html"><a href="#Docs-https-hexo-io-docs-deployment-html" class="headerlink" title="Docs: https://hexo.io/docs/deployment.html"></a>Docs: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">https://hexo.io/docs/deployment.html</a></h2><figure class="highlight bash"><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">deploy: //记得要空格！！！</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repo: https://github.com/DestinyV/Blog.github.io.git</span><br><span class="line"> .io.git</span><br><span class="line"> branch: master</span><br><span class="line"> message:</span><br></pre></td></tr></table></figure>
<p>编辑完成后进行保存，接着安装 hexo-deployer-git，命令如下：</p>
<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">$ npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>等待安装完成以后，执行如下配置命令：</p>
<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>重新部署一下，命令如下：</p>
<figure class="highlight bash"><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">$ hexo clean</span><br><span class="line">$ hexo generate</span><br><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>在正常部署完成的情况下，打开浏览器输入：<br>【https://您的 Github 名称/github.io】进行访问，例如：<a href="https://DestinyV.github.io" target="_blank" rel="noopener">DestinyV</a>。此时你会发现没有网站主题，只有文字没样式并不好看，于是乎，选择一个自己喜欢的 Hexo主题：</p>
<p>四、常见问题及解决方法</p>
<ol>
<li><a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> 无法访问？</li>
</ol>
<p>出现该问题的可能原因是端口号4000被占用，将 index.js 文件（若找不到该index.js文件，请参考我的另一篇博客：Everything 工具使用）中的端口号修改为：4001或者其他，重启服务后再次访问即可。</p>
<figure class="highlight bash"><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">hexo.config.server = assign({</span><br><span class="line"> port: 4001,</span><br><span class="line"> <span class="built_in">log</span>: <span class="literal">false</span>,</span><br><span class="line"> ip: <span class="string">'0.0.0.0'</span>,</span><br><span class="line"> compress: <span class="literal">false</span>,</span><br><span class="line"> header: <span class="literal">true</span></span><br><span class="line">}, hexo.config.server);</span><br></pre></td></tr></table></figure>
<ol>
<li>博客出现中文乱码问题？</li>
</ol>
<p>若出现该问题请使用编辑器 Notepad++ 或 Sublime Text2/3 编辑 _config.yml 文件，设置编辑器的编码为 UTF-8 后进行保存即可。</p>
<h1 id="Hexo-Configuration"><a href="#Hexo-Configuration" class="headerlink" title="Hexo Configuration"></a>Hexo Configuration</h1><h2 id="Docs-https-hexo-io-docs-configuration-html"><a href="#Docs-https-hexo-io-docs-configuration-html" class="headerlink" title="Docs: https://hexo.io/docs/configuration.html"></a>Docs: <a href="https://hexo.io/docs/configuration.html" target="_blank" rel="noopener">https://hexo.io/docs/configuration.html</a></h2><h2 id="Source-https-github-com-hexojs-hexo"><a href="#Source-https-github-com-hexojs-hexo" class="headerlink" title="Source: https://github.com/hexojs/hexo/"></a>Source: <a href="https://github.com/hexojs/hexo/" target="_blank" rel="noopener">https://github.com/hexojs/hexo/</a></h2><h1 id="Site"><a href="#Site" class="headerlink" title="Site"></a>Site</h1><p>title: Hexo 网站主标题<br>subtitle: 网站二级标题/副标题<br>description: 网站描述<br>author: 网站作者<br>language: 网站使用语言<br>timezone: 网站时区，Hexo 默认使用您电脑的时区</p>
<ol>
<li>博客访问中出现404错误？</li>
</ol>
<p>若出现该问题，可能是在你修改 _config.yml 文件中 Hexo 主题后导致，比如将 theme: landscape 换成 theme: Next。</p>
<h1 id="Extensions"><a href="#Extensions" class="headerlink" title="Extensions"></a>Extensions</h1><h2 id="Plugins-https-hexo-io-plugins"><a href="#Plugins-https-hexo-io-plugins" class="headerlink" title="Plugins: https://hexo.io/plugins/"></a>Plugins: <a href="https://hexo.io/plugins/" target="_blank" rel="noopener">https://hexo.io/plugins/</a></h2><h2 id="Themes-https-hexo-io-themes"><a href="#Themes-https-hexo-io-themes" class="headerlink" title="Themes: https://hexo.io/themes/"></a>Themes: <a href="https://hexo.io/themes/" target="_blank" rel="noopener">https://hexo.io/themes/</a></h2><p>theme: landscape</p>
<ol>
<li>修改个人博客根目录下的配置文件或主题下的配制文件 _config.yml，刷新页面后修改的地方没有生效？</li>
</ol>
<p>首先进入到主题文件夹的目录下（如：../blog/themes/yilia/），执行命令：</p>
<p>$ git pull<br>然后返回到文件夹 ../blog 下，重新部署项目执行命令如下：<br><figure class="highlight bash"><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">$ hexo clean</span><br><span class="line">$ hexo g</span><br><span class="line">$ hexo d</span><br></pre></td></tr></table></figure></p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<a href="/2018/03/14/Hexo-建站详解/">
<time datetime="2018-03-14T12:22:00.000Z" class="entry-date">
2018-03-14
</time>
</a>
<span class="article-delim">•</span>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/">Hexo</a></li></ul>
</footer>
</article>
</div></div>
<div id="secondary" class="widget-area" role="complementary">
<aside id="search" class="widget widget_search"><form role="search" method="get" accept-charset="utf-8" id="searchform" class="searchform" action="//google.com/search">
<div>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="搜索" />
</div>
</form></aside>
<aside class="widget">
<h3 class="widget-title">Recents</h3>
<div class="widget-content">
<ul>
<li>
<a href="/2018/03/30/Grid布局/">Grid布局</a>
</li>
<li>
<a href="/2018/03/24/display属性/">display属性</a>
</li>
<li>
<a href="/2018/03/20/javaScript-跨域/">javaScript 跨域</a>
</li>
<li>
<a href="/2018/03/18/CSS-伸缩布局/">CSS3 伸缩布局</a>
</li>
<li>
<a href="/2018/03/17/Http-请求/">Http 请求</a>
</li>
</ul>
</div>
</aside>
<aside class="widget">
<h3 class="widget-title">Tags</h3>
<div class="widget-content">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hexo/">Hexo</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Http/">Http</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css/">css</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原生js/">原生js</a><span class="tag-list-count">4</span></li></ul>
</div>
</aside>
<aside class="widget">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget-content tagcloud">
<a href="/tags/CSS3/" style="font-size: 15px;">CSS3</a> <a href="/tags/Hexo/" style="font-size: 15px;">Hexo</a> <a href="/tags/Http/" style="font-size: 10px;">Http</a> <a href="/tags/css/" style="font-size: 10px;">css</a> <a href="/tags/原生js/" style="font-size: 20px;">原生js</a>
</div>
</aside>
</div>
</div>
<footer id="colophon" role="contentinfo">
<p>© 2018 DestinyV
All rights reserved.</p>
<p>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></p>
</footer>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<script src="/js/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
<script src="/js/navigation.js"></script>
<div id="bg"></div>
</div>
</body>
</html>