-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
955 lines (939 loc) · 47.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/yui_grids.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/modules.css">
<link rel="stylesheet" href="css/state.css">
<script src="js/jquery-1.7.1.js"></script>
<script src="js/anchorPos.js"></script>
</head>
<body>
<div id="css" class="yui3-g">
<div id="slide" class="yui3-u">
<h1 class="hd" href="#css">CSS学习笔记</h1>
<div class="bd">
<h2>CSS分类</h2>
<ol>
<li><a href="#base">1.1 基础 (Base.css)</a></li>
<li><a href="#layout">1.2 样式 (Layout.css)</a></li>
<li><a href="#module">1.3 模块 (Module.css)</a></li>
<li><a href="#state">1.4 状态 (State.css)</a></li>
<li><a href="#theme">1.5 主题 (Theme.css)</a></li>
<li><a href="#naming">1.6 命名约定</a></li>
</ol>
<h2>常见布局</h2>
<ol>
<li><a href="#fixedLayout">2.1 固态布局</a></li>
<li><a href="#fluidLayout">2.2 流式布局</a></li>
</ol>
<h2>定位问题</h2>
<ol>
<li><a href="#centerHorizontal">3.1 水平居中</a></li>
<li><a href="#centerVertical">3.2 垂直居中</a></li>
</ol>
<h2>专题介绍</h2>
<ol>
<li><a href="#responsive">4.1 响应性设计</a></li>
<li><a href="#hasLayout">4.2 hasLayout</a></li>
<li><a href="#BFC">4.3 BFC</a></li>
<li><a href="#boxModule">4.4 盒子模型</a></li>
<li><a href="#inlin-block">4.5 inline-block属性</a></li>
</ol>
<!--h2>前端利器</h2>
<ol>
<li><a href="#webstorm">5.1 webstorm</a></li>
<li><a href="#zen-coding">5.2 zen-coding</a></li>
</ol>
<h2>常见结构示例（模块化）</h2>
<ol>
<li><a href="">6.1 新闻列表结构</a></li>
<li><a href="">6.2 产品列表结构</a></li>
<li><a href="">6.3 排行榜结构</a></li>
</ol>
<h2>定位问题</h2>
<ol>
<li><a href="">4.1 浮动双边据BUG</a></li>
<li><a href="">4.2 浮动元素跟随问题</a></li>
<li><a href="">4.3 边距重叠问题</a></li>
</ol>
<h2>精品收录</h2>
<ol>
<li><a href="#excellentArticles">5.1 优秀文章收录</a></li>
<li><a href="#excellentWebsites">5.2 优秀网站收录</a></li>
</ol>
<h2>IE6下的极品</h2>
<ol>
<li><a href="">6.1 PNG透明问题</a></li>
<li><a href="">6.2 fixed定位问题</a></li>
</ol-->
</div>
<div class="switch">
<span class="switch-slider"></span>
</div>
</div>
<div id="main" class="yui3-u">
<div class="content">
<div class="hd">问题详情</div>
<div class="bd">
<h2>1. CSS分类</h2>
<div class="container">
<div class="causeBox">
<p>
<span>分类介绍：</span>每个项目中的CSS都需要组织和规划，如果总是在CSS文件中新增代码则会使项目变得更加复杂和混乱。那么我们应该怎样组织CSS样式才能使代码更容易理解呢。比较重要的一条是合理的分类，以下是五种类型的分类： 1. Base 2. Layout 3. Module 4. State 5. Theme<br/>
我们会发现我们自己定义的CSS中经常会混杂这些规则中的样式，如果我们能意识到这一点，并能理解我们所需要定义的样式，我们就能够避免这种样式混杂和交织的情况出现。而合理分类会让CSS代码更少，更易维护，和用户体验上的一致性。<br/>
Base rules定义的是默认样式，它们一般是单个的选择器元素，比如：属性选择器、伪类选择器、子选择器等。<br/>
Layout rules会划分整个页面为几个部分。每个部分又由若干个模块组成。<br/>
Modules是可重用的部分，是我们设计的模块部件。它们可以是标注、产品列表、导航等等。<br/>
State rules是描述我们的模块或布局在特定状态下的表现形式:它是隐藏或者是放大的？它是活动状态还是默认状态？<br/>
Theme rules和State rules规则类似。描述的是模块和布局的外在表现。大部分网站不需要这个样式。有皮肤定制需求的网站除外。<br/>
内容来源参考：<br/><a href="https://speakerdeck.com/snookca/your" title="CSS规范">https://speakerdeck.com/snookca/your</a> 和 <a href="http://smacss.com/" title="CSS规范">http://smacss.com/</a>
</p>
</div>
</div>
<h3 id="base">1.1 基础 (Base.css)</h3>
<div class="container">
<div class="causeBox">
<p>
<span>样式介绍：</span>base.css的规则应用在元素选择器，后代选择器或一个子选择器以及任何伪类元素上。它不应该包括任何类（class）或ID选择器。它定义的是页面中元素的默认样式。基础样式包括标题大小，默认链接样式，字体样式，BODY背景等。<br/>
</p>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
body, form {margin: 0;padding: 0}<br/>
a {color: #039}<br/>
a:hover {color: #03F}
</div>
</div>
<p>关于CSS Resets</p>
<div class="causeBox">
<p>
<span>样式介绍：</span>CSS Reset是为了在跨浏览器下达到默认元素样式的表现一致性而去除或者重新设置默认的margin,padding和其他属性等样式。很多reset framework因为过分设置导致引入更多问题。删除元素的margin和padding会导致重复创建，也会增加代码的体积。所以使用框架样式开发网站是积极有益的，但是要明确框架样式的弊端合理的设置默认样式。<br/>
</p>
</div>
</div>
<h3 id="layout">1.2 样式 (Layout.css)</h3>
<div class="container">
<div class="causeBox">
<p>
<span>样式介绍：</span>CSS存在的意义是用来将元素布局到页面上。通常一个页面，我们会将其划分为几个“部分”，比如头部（header），内容区（content）,侧边栏（slidebar）,尾部（footer）等。而这些“部分”的样式就是本节所讲的布局样式。而在这些区域里面，还会存在一些组件，比如导航项，登陆表单，新闻列表等，这些具体的模块（我们也可以将它们视为一个个对象来理解）样式就是下节所讲的modules样式。
</p>
</div>
<h4>
1) 布局样式中使用ID
</h4>
<p>
基于重用原则，布局样式也能划为主布局样式和次级布局样式。主布局样式如header,footer我们习惯上使用ID选择器来声名，不过我们也要认真思考下它是否是作为页面的常用组件，如果经常使用到，也需要在合适的位置使用class选择器。
</p>
<div class="demoBox">
<div class="p12">
#header, #article, #footer {<br/>
width: 960px;<br/>
margin: auto;<br/>
}<br/>
#article {<br/>
border: solid #CCC;<br/>
border-width: 1px 0 0;<br/>
}
</div>
</div>
<h4>
2) 布局样式中使用class技巧
</h4>
<p>
另外一些网站可能需要一个更普遍的布局框架（比如960网格系统，960.gs），这些次级布局样式将会使用class命名来替代ID，因为这些布局样式会在页面上多次使用。<br/>
通常情况下,一个布局样式只有一个单一的选择器:一个ID或class。然而,有些时候一个布局需要应对不同的因素。例如,您可能有不同的布局基于用户偏好。这个布局偏好仍被声明为一个布局样式且需要联合使用其他布局样式。<br/>
下面的例子中，l-flipped类就需要被应用到一个更高级别的元素上比如BODY元素，通过使用该样式，可以控制文章内容和侧边栏内容互换位置。
</p>
<div class="demoBox">
<div class="p12">
#article {<br/>
float: left;<br/>
}<br/>
#sidebar {<br/>
float: right;<br/>
}<br/>
.l-flipped #article {<br/>
float: right;<br/>
}<br/>
.l-flipped #sidebar {<br/>
float: left;<br/>
}
</div>
</div>
<p>
在上面的例子中，我们重新定义一个l-fixed样式来将原有的流式布局（使用百分比）改变为固态布局（使用像素）。见如下代码示例。
</p>
<div class="demoBox">
<div class="p12">
#article {<br/>
width: 80%;<br/>
float: left;<br/>
}<br/>
#sidebar {<br/>
width: 20%;<br/>
float: right;<br/>
}<br/>
.l-fixed #article {<br/>
width: 600px;<br/>
}<br/>
.l-fixed #sidebar {<br/>
width: 200px;<br/>
}
</div>
</div>
<h4>
3) 布局样式的命名约定
</h4>
<p>
另外一个需要注意的是命名约定。使用ID声名命名要准确，不需要特定命名空间。而使用class选择器，我们使用l-前缀，这样有助于我们识别样式风格，并能和模块样式和状态样式区分开来。
</p>
<h4>
4) 关于ID选择器
</h4>
<p>
在页面中使用ID属性是一件好事。在某些情况下，也是很必要的。比如它们能给javascript提供钩子。然而在CSS中,相比class选择符，使用ID造成的性能差异几乎不存在，但是它会使样式代码更复杂由于它不断增长的特异性代码。
</p>
<p>
更多布局样式的参考页面案例参见:<a href="http://smacss.com/book/type-layout" target=_blank> http://smacss.com/book/type-layout</a>
</p>
</div>
<h3 id="module">1.3 模块 (Module.css)</h3>
<div class="container">
<div class="causeBox">
<p>
<span>样式介绍：</span>正如上节简要提及到得，一个模块是一个存在页面中更分立的组件，它是你的导航栏、对话框、你的小部件等。模块位于布局样式（layout styles）组件中，有时候也位于其它模块组件中，每个模块都应该设计成一个独立的组件，这样做的好处是页面会更加灵活。如果设计合理，模块能够很容易的移植到布局的其他地方而不破坏整体布局。
</p>
</div>
<p>当定义一个模块的规则集，应避免使用ID和元素选择器，要坚持使用类名（class names）。一个模块可能会包含一定数量的元素，他们可能会使用后代或者子选择器来定义样式。如下：</p>
<div class="demoBox">
<div class="p12">
.module > h2 {<br/>
padding: 5px;<br/>
}<br/>
.module span {<br/>
padding: 5px;<br/>
}
</div>
</div>
<h4>
1) 避免使用元素选择器
</h4>
<p>
如果某个元素选择器的内容能够被预测，比如模块内的一个span选择器将可预见的每次以同样的方式在模块内使用，那么使用.module span将是合适的。
</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true ">
<div class="fld">
<span>Folder Name</span>
</div></pre>
/* The Folder Module */<br/>
.fld > span {<br/>
padding-left: 20px;<br/>
background: url(icon.png);<br/>
}
</div>
</div>
<p>
问题是随着项目发展的越来越复杂，你越是需要扩展一个组件的功能，你使用通用元素定义样式将越受限。见如下例子。
</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true "><div class="fld">
<span>Folder Name</span>
<span>(32 items)</span>
</div></pre></div>
</div>
<p>
现在如果我们要分别给两个span元素设置icon背景图片，则会产生样式冲突，解决的办法就是给两个span标签分别定义class。
</p>
<div class="demoBox">
<div class="p12">
<pre><div class="fld">
<span class="fld-name">Folder Name</span>
<span class="fld-items">(32 items)</span>
</div></pre></div>
</div>
<p>
对于一个通用的HTML元素，比如span,div是没有语义的，而标题元素h具有一些语义，而通过给元素添加class名，我们可以丰富元素的语义。可见，越是通用的HTML元素（比如div和span）,将越容易产生冲突。相比语义更强的比如标题元素，一般会出现在一个容器内，会更容易成功的使用元素选择器来定义样式。
</p>
<h4>
2) 子类模块
</h4>
<p>
当我们在不同的地方使用同样的模块，第一反应是使用父元素来区分模块样式的不同。
</p>
<div class="demoBox">
<div class="p12">
.pod { <br/>
width: 100%; <br/>
}<br/>
.pod input[type=text] { <br/>
width: 50%; <br/>
}<br/>
#sidebar .pod input[type=text] { <br/>
width: 100%; <br/>
}
</div>
</div>
<p>
这个方法的弊端是会让你遭遇特异性问题，以至于要求你添加更多的选择器来与其对抗或者加快后退到使用!important。<br/>
现在思考一下：扩展一下我们的案例pod，我们有两个不同宽度的input。贯穿整个网站，input会有一个label标签在其旁边，所以它的区域是宽度的一半。而在侧边栏里，那个区域会太小所以我们把宽度扩大到100%，同时设置label标签在上方。现在，我们需要添加一个新的组件，它使用和.pod同样的样式，所以我们重用那个class。除此之外，它还有一点特别性：不论在网站的哪个地方，它的宽度是固定的180px。
</p>
<div class="demoBox">
<div class="p12">
.pod { <br/>
width: 100%; <br/>
} <br/>
.pod input[type=text] { <br/>
width: 50%; <br/>
}<br/>
#sidebar .pod input[type=text] { <br/>
width: 100%; <br/>
}<br/>
.pod-callout { <br/>
width: 200px; <br/>
}<br/>
#sidebar .pod-callout input[type=text],<br/>
.pod-callout input[type=text] { <br/>
width: 180px; <br/>
}
</div>
</div>
<p>
为了覆盖#slidebar的特异性，我们在选择器上加了双重绑定。<br/>而我们正确的替代性做法应该是意识到在侧边栏里的约束布局是pod的一个子类，应该直接在它上面定义样式。
</p>
<div class="demoBox">
<div class="p12">
.pod { <br/>
width: 100%; <br/>
} <br/>
.pod input[type=text] {<br/>
width: 50%; <br/>
}<br/>
.pod-constrained input[type=text] {<br/>
width: 100%; <br/>
}<br/>
.pod-callout { <br/>
width: 200px; <br/>
}<br/>
.pod-callout input[type=text] { <br/>
width: 180px; <br/>
}
</div>
</div>
<p>相应的html元素设置如下：</p>
<div class="demoBox">
<div class="p12">
<pre><div class="pod pod-constrained">...</div>
<div class="pod pod-callout">...</div></pre>
</div>
</div>
</div>
<h3 id="state">1.4 状态 (State.css)</h3>
<div class="container">
<div class="causeBox">
<p>
<span>样式介绍：</span>一个状态是用来增强和重写其它的样式。比如，一个手风琴部分可能是收缩或者折叠状态，一条短信可能是成功显示状态或者错误提示状态。
</p>
</div>
<p>状态规则通常应用于作为布局规则或者module类的元素。</p>
<div class="demoBox">
<div class="p12">
<pre>
<div id="header" class="is-collapsed">
<form>
<div class="msg is-error">
There is an error!
</div>
<label for="searchbox" class="is-hidden">Search</label>
<input type="search" id="searchbox">
</form>
</div></pre></div>
</div>
<p>
在上面的例子中，头部元素拥有一个ID，正如我们假设的一样，该元素上的样式是以布局为目的的，is-collapsed代表了一个收缩状态，同
样可以假设的是，如果没有状态规则，该元素默认应该是展开状态。同理，msg模块和the field
label也分别有各自预设的状态is-error和is-hidden，分别代表错误状态和隐藏状态。在这种情况下，我们应用状态规则在基本元素上不会
重写布局和对象样式。<br/>
1) 状态和子模块。<br/>一个子模块样式和状态样式之间有很多相似性，比如它们都定义了一个元素的外观，尽管如此，在如下两种方式上他们还是不同的：1.
状态样式能够应用于布局和模块样式 2. 状态样式指明了一个javascript的依赖项。<br/>
第二点是两者间最重要的区别，子模块样式是应用在元素渲染的时候之后就不会再改变，而状态样式应用于指定一个状态的改变当页面在
客户端机器运行时。比如，点击一个tab将会激活tab标签。所以，一个is-active或者is-tab-active类将是适合的；当点击一个对话框关闭按钮将隐藏对话框，一个is-hidden类将是适合的。<br/>
2) 关于使用!important。<br/>
States通常是独立的并且是建立在单独的类选择器上。如果状态需要覆盖一个更复杂的样式规则设置，使用!important是允许且值得推荐的。（我常常说!important是不需要的除非在复杂的情况下，这种情况下往往也是很必要的。）通常情况下，你不需要在一个模块上设置两个状态样式，所以因为使用!important导致的特异性冲突少之又少。正如上面所提及的，一定要十分谨慎，除非你确定真的需要它否则请不要使用!important。请记住，!important的应该避免使用在其它规则类型，只有状态类型应该使用到它。<br/>
3) 结合使用状态规则和模块规则。<br/>不可避免地，一个state rule将无法依靠继承来应用它的风格在适当的地方。有时一个状态是非常特定于一个样式不确定的特定模块。在状态规则应用于特定模块的情况下，状态命名应该包含模块的名字，而且应该和模块规则放置在一块，而不要和其它全局状态规则放置在一起。
</p>
<div class="demoBox">
<div class="p12">
.tab {<br/>
background-color: purple;<br/>
color: white;<br/>
}<br/>
.is-tab-active {<br/>
background-color: white;<br/>
color: black;<br/>
}
</div>
</div>
<p>
如果你的CSS是即使加载的，通用状态应该被考虑作为基础和全局样式的一部分而被和初始页面一起加载，而特定状态样式可以等到特别模块加载完成后再加载。
</p>
</div>
<h3 id="theme">1.5 主题 (Theme.css)</h3>
<div class="container">
<div class="causeBox">
<p>
<span>样式介绍：</span>Theme Rules并不常用在一个项目中，因为它不是CSS核心类型。尽管如此，有些项目可能需要使用它们，比如Yahoo!Mail。<br/>
</p>
</div>
<p>不言而喻，Theme Rules的作用是定义颜色和图片以体现出应用程序或站点的外观和感觉。将它们划分为几种风格以便重新定义时可以轮流使用。<br/>Themes可能会影响一些首要样式，它会重写基础样式比如默认链接颜色，它能改变modules的颜色和边框，也能影响layout，也能影响states的呈现。<br/>如果有一个对话框module需要有一个蓝颜色边框，边框自己将首先定义在module中，然后样式中才定义它的颜色。如下：</p>
<div class="demoBox">
<div class="p12">
// in module-name.css<br/>
.mod {<br/>
border: 1px solid;<br/>
}<br/>
// in theme.css<br/>
.mod {<br/>
border-color: blue;<br/>
}<br/>
</div>
</div>
<p>Themes应该用class names清楚的指出哪些样式是主题的一部分，哪些不是。仅仅有一个单独的主题文件往往是不够的。<br/>在Yahoo!Mail中，为了通过theme files协助维护一致性，我们使用“小胡子模板”来允许用户指定颜色值，和一个背景图片，然后最后在生产中生成一个CSS文件。</p>
</div>
<h3 id="naming">1.6 命名约定</h3>
<div class="container">
<div class="causeBox">
<p>
<span>命名介绍：</span>命名约定在快速理解样式所属的类别和在页面作用域中所扮演的角色是十分有益的，在一个大的项目中，样式会分散在不同的文件中，在这种情况下，命名约定会更容易的帮我们确定某个样式属于哪个类别。<br/>我比较偏向使用首字母来区分Layout、State和Modules规则。对于Layout我使用前缀l-，或者使用grid-也能清晰的区分布局的样式。对于State规则，我使用is-比如is-hidden或is-collapse来表明元素的状态，这样描述可读性会很好。Modules作为项目的重要组成部分，将每个module都以首字母module-开头将是毫无意义的，所以我们以module本身的名称来命名它自己。
</p>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
/* Example Module */<br/>
.example { }<br/><br/>
/* Callout Module */<br/>
.callout { }<br/><br/>
/* Callout Module with State */<br/>
.callout.is-collapsed { }<br/><br/>
/* Form field module */<br/>
.field { }<br/><br/>
/* Inline layout */<br/>
.l-inline { }
</div>
</div>
</div>
<h2>2. 常见布局</h2>
<div class="container">
<div class="causeBox">
<p>
<span>布局介绍：</span>本篇中几种常见的布局介绍来源于雅虎的YUI3里面的常见布局，包括固态布局，流式布局等。更多布局方式以及原理请参考：<br/><a href="http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units.html" title="yui3-CSS布局">http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units.html</a>
<a href="http://www.36ria.com/3399" title="yui3-CSS布局">YUI3的css栅格系统解析</a>
</p>
</div>
</div>
<h3 id="fixedLayout">2.1 固态布局</h3>
<div class="container">
<div class="causeBox">
<p>
<span>使用方式：</span>固态布局的基本标记结构是一个yui3-g的盒子和若干个yui3-u的单元盒组成。这个例子中，我们将创建一个宽度自适应父元素的页面(也可以是固定宽度)，并使用yui3-u-1-5，使左侧的列占总宽度1/5，右侧的两个等宽的列分别占总宽度2/5。<br/>
</p>
</div>
<p>页面示例：</p>
<div class="demoBox yui3-g">
<div class="yui3-u-1-5">
<div class="block">width:20%</div>
</div>
<div class="yui3-u-2-5">
<div class="block gray_light">width:40%</div>
</div>
<div class="yui3-u-2-5">
<div class="block">width:40%</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true ">
<div class="demoBox yui3-g">
<div class="yui3-u-1-5">
<div class="block">width:20%</div>
</div>
<div class="yui3-u-2-5">
<div class="block gray_light">width:40%</div>
</div>
<div class="yui3-u-2-5">
<div class="block">width:40%</div>
</div>
</div></pre>
</div>
</div>
</div>
<h3 id="fluidLayout">2.2 流式布局</h3>
<div class="container">
<div class="causeBox">
<p>
<span>使用方式：</span>创建流式布局需要手动固定大小，并且组合使用padding和margin属性。所以，我们可以使用yui3-u的基本单元，而不需要使用yui3-u扩展的单元(yui3-u-n-m)，我们将给布局的各个容器增加自己的ID，以描述它的内容，并制定它们的大小。<br/>
</p>
</div>
<p>页面示例：</p>
<div class="demoBox yui3-g demoFluid">
<div class="yui3-u demoFluid-nav">
<div class="block">width:120px</div>
</div>
<div class="yui3-u demoFluid-main">
<div class="block gray_light">width:100%</div>
</div>
<div class="yui3-u demoFluid-extra">
<div class="block">width:240px</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true "><div class="demoBox yui3-g demoFluid" >
<div class="yui3-u demoFluid-nav" >
<div class="block">width:120px</div>
</div>
<div class="yui3-u demoFluid-main" >
<div class="block gray_light">width:100%</div>
</div>
<div class="yui3-u demoFluid-extra" >
<div class="block">width:240px</div>
</div>
</div></pre>
</div>
</div>
</div>
<h2>3. 居中问题</h2>
<h3 id="centerHorizontal">3.1 水平居中</h3>
<div class="container">
<p>内联元素水平居中：</p>
<div class="causeBox">
<p>
<span>使用方式：</span>文字，图片等内联元素的居中设置text-align:center即可。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<div style="text-align:center">水平居中</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12"><pre class="lang:xhtml decode:true "><div class="demoBox">
<div style="text-align:center">水平居中</div>
</div></pre></div>
</div>
<p>确定宽度的块级元素的水平居中：</p>
<div class="causeBox">
<p>
<span>使用方式：</span>确定宽度的块级元素的水平居中可以设置margin-left:auto，margin-right:auto即可。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<div style="width:180px; margin-left:auto; margin-right:auto; background:red; color:white">确定宽度的块级元素的水平居中</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12"><pre class="lang:xhtml decode:true"><div class="demoBox">
<div style="width:40px; height:20px; margin:12px auto; background:red"></div>
</div></pre></div>
</div>
<p>不确定宽度的块级元素的水平居中（一）：</p>
<div class="causeBox">
<p>
<span>使用方式：</span>改变块级元素的display为inline类型，然后使用text-align:center实现居中。这种方法的弊端是：把块级元素变成了内联元素，而内联元素比块级元素缺少一些功能，比如设定长宽值等。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<div style="text-align:center">
<div style="display:inline; background:red; color:white">不确定宽度块级元素的水平居中</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12"><pre class="lang:xhtml decode:true"><div class="demoBox">
<div style="text-align:center">
<div style="display:inline; background:red; color:white">不确定宽度块级元素的水平居中</div>
</div>
</div></pre></div>
</div>
<p>不确定宽度的块级元素的水平居中（二）：</p>
<div class="causeBox">
<p>
<span>使用方式：</span>通过给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现，它可以保留块级元素的display:block，它的缺点是设置了position:relative，带来了一定的副作用。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox clearfix">
<div style="position:relative; left:50%; float:left">
<div style="position:relative; left:-50%; background:red; color:white">不确定宽度块级元素的水平居中</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true "><div class="demoBox clearfix">
<div style="position:relative; left:50%; float:left">
<div style="position:relative; left:-50%; background:red; color:white">不确定宽度块级元素的水平居中</div>
</div>
</div></pre>
</div>
</div>
</div>
<h3 id="centerVertical">3.2 垂直居中</h3>
<div class="container">
<p>父元素高度不确定的文本、图片、块级元素的垂直居中</p>
<div class="causeBox">
<p>
<span>使用方式：</span>父元素高度不确定的文本、图片、块级元素的垂直居中可以通过设置相同的上下边边距实现。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<div class="p12">
<div style="padding-top:20px; padding-bottom:20px">我是垂直居中的</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true"><div class="demoBox">
<div style="padding-top:20px; padding-bottom:20px">我是垂直居中的</div>
</div></pre>
</div>
</div>
<p>父元素高度确定的单行文本的垂直居中</p>
<div class="causeBox">
<p>
<span>使用方式：</span>父元素高度确定的文本的垂直居中通过给父元素设置line-height来实现的，line-height的高度和父元素的高度相同。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<div class="p12">
<div style="height:30px; line-height:30px">我是垂直居中的</div>
</div>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre class="lang:xhtml decode:true"><div class="demoBox">
<div style="height:30px; line-height:30px">我是垂直居中的</div>
</div></pre>
</div>
</div>
<p>父元素高度确定的多行文本、图片、块级元素的垂直居中（一）</p>
<div class="causeBox">
<p>
<span>使用方式：</span>CSS属性中的vertical-align可用于垂直居中，但只有当父元素为td或者th时，这个属性才会生效，对于其他块级元素，默认情况并不支持。在Firefox和IE8下可以设置块级元素的display:tabel-cell来激活vertical-align属性，但IE6和IE7并不支持display:tabel-cell，所以这种方法没办法实现兼容，不过我们可以直接使用表格来实现垂直居中效果。缺点：添加了无语义标签，并增加了嵌套深度。
</p>
</div>
<p>页面示例：</p>
<div class="demoBox">
<table class="defaultTable" style="border-collapse:collapse; border-color:red; border-spacing:0px; border:solid 1px red">
<tbody>
<tr>
<td style="height:30px">我是垂直居中的</td>
<td>11</td>
</tr>
<tr>
<td style="height:60px"><div style="width:100px; background:red; color:white">我是垂直居中的<br/>我是垂直居中的</div></td>
<td>我是垂直居中的</td>
</tr>
</tbody>
</table>
</div>
<p>代码示例：</p>
<div class="demoBox">
<div class="p12">
<pre>
<table class="defaultTable" style="border-collapse:collapse; border-color:red; border-spacing:0px; border:solid 1px red">
<tbody>
<tr>
<td style="height:30px">我是垂直居中的</td>
<td>11</td>
</tr>
<tr>
<td style="height:60px"><div style="width:100px; background:red; color:white">我是垂直居中的<br/>我是垂直居中的</div></td>
<td>我是垂直居中的</td>
</tr>
</tbody>
</table></pre>
</div>
</div>
<p>父元素高度确定的多行文本、图片、块级元素的垂直居中（二）</p>
<div class="causeBox">
<p>
<span>使用方式：</span>对支持display:table-cell的IE8和Firefox使用display:table-cell和vertical-align:middle来实现居中，对不支持该属性的IE6和IE7使用HACK来实现：通过给父子两层元素分别设置top:50%和top:-50%来实现居中。这种方法的优点是没有增加额外的标签，缺点是使用了HACK，不利于维护，同时因为设置了position:relative和position:absolute，带来了副作用。
</p>
</div>
<p>页面示例(多行文本)：</p>
<div class="demoBox">
<div class="verticalDemo">
<div class="verticalWrap">
<div class="vertical">
多行文本垂直居中<br/>多行文本垂直居中<br/>多行文本垂直居中
</div>
</div>
</div>
</div>
<p>页面示例(块级元素)：</p>
<div class="demoBox">
<div class="verticalDemo">
<div class="verticalWrap">
<div class="vertical" style="width:100px; height:50px; background:red">
</div>
</div>
</div>
</div>
</div>
<h2>4. 专题收录</h2>
<div class="container">
<div class="causeBox">
<p>
<span>专题介绍：</span>本章节收录一些CSS过程中常见的知识点。如：响应性设计、盒子模型、hasLayout等等。
</p>
</div>
</div>
<h3 id="responsive">4.1 响应性设计</h3>
<div class="container">
<div class="causeBox">
<p>
<span>响应性设计：</span>2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词（现在也常被称为“响应性设计”），指可以自动识别屏幕宽度、并做出相应调整的网页设计。本节收录了一些经典的文章介绍，推荐阅读。
</p>
</div>
<h4>1）响应性设计推荐文章：</h4>
<div class="pageFrom">
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html">自适应网页设计（Responsive Web Design）- 阮一峰</a></li>
<li><a href="http://www.36ria.com/5986">响应式新首页设备适配（Device Adaptation）- 妙净</a></li>
<li><a href="http://www.wpdang.com/archives/71868.html">响应式网页设计：令开发者着迷的智能化开发工具</a></li>
</ul>
</div>
<h4>2）响应性设计小工具：</h4>
<div class="pageFrom">
<ul>
<li><a href="http://www.wpdang.com/archives/71868.html">响应式网页设计：令开发者着迷的智能化开发工具</a></li>
<li><a href="http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/">responsive-design-bookmarklet</a></li>
</ul>
</div>
</div>
<h3 id="hasLayout">4.2 hasLayout</h3>
<div class="container">
<div class="causeBox">
<p>
<span>概念说明：</span>1）‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。 <br>
2）‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。<br>
3）‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。
</p>
</div>
<h4>触发方式：</h4>
<p>1）默认拥有布局的元素：</p>
<div class="demoBox">
<div class="p12">
<pre><html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee></pre>
</div>
</div>
<p>2）可触发 hasLayout 的 CSS 特性：</p>
<div class="demoBox">
<div class="p12">
<pre>display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)</pre>
</div>
</div>
<p>IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：</p>
<div class="demoBox">
<div class="p12">
<pre>min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed</pre>
</div>
</div>
<p class="red">注：IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。</p>
</div>
<h3 id="BFC">4.3 BFC（Block Formatting Contexts）</h3>
<div class="container">
<div class="causeBox">
<p>
<span>概念说明：</span>
IE有它自己的hasLayout属性，那么非IE浏览器呢？非IE浏览器采用的就是BFC（块格式化上下文）。<br>
1）BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 <br>
2）在创建了 BFC的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。 <br>
3）在BFC 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的BFC。<br>
4）在CSS3中，对这个概念做了改动：<a target="_blank" href="http://www.w3.org/TR/css3-box/#block-level0" title="http://www.w3.org/TR/css3-box/#block-level0">http://www.w3.org/TR/css3-box/#block-level0</a>CSS3中，将BFC 叫做 flow root。
</p>
</div>
<h4>触发方式：</h4>
<div class="demoBox">
<div class="p12">
<pre>float:(任何值除了none)
overflow:（任何值除了visible）
display:(table-cell/table-caption/inline-block)
position:(任何值除了static/relative)</pre>
</div>
</div>
<p class="red">我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)，这个方法的确简单，但很暴力。</p>
<h4>hasLayout和BFC的作用：</h4>
<p>1）解决元素内部浮动问题<br> 如果父元素的子元素有浮动，那么在父元素上激活hasLayout和BFC就可以清除浮动了，最长见的是设置样式zoom:1(IE6下激活hasLayout),overflow:hidden(激活标准浏览器下的MFC).</p>
<div class="demoBox">
<div class="p12">
<div class="clearfix">
<div style="width: 300px; border: solid 2px red;">父元素<p></p>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center; border: solid 4px #ddd; background: yellow; float: left;">浮动子元素</div>
</div>
</div>
</div>
</div>
<p>设置.bfc{zoom:1; overflow:hidden}后激活hasLayout和MFC后的示例图：</p>
<div class="demoBox">
<div class="p12">
<div style="width: 300px; border: solid 2px red;" class="bfc">父元素.bfc{zoom:1; overflow:hidden}<p></p>
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center; border: solid 4px #ddd; background: yellow; float: left;">浮动子元素</div>
</div>
</div>
</div>
<h4>2）浮动元素和常规流元素重叠问题</h4>
<p>当浮动元素右边跟随的是常规流元素时，浮动元素会和常规流元素会重叠。如下:</p>
<div class="demoBox">
<div class="p12">
<div class="clearfix">
<div style="width: 300px; border: solid 2px red;">
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center; border: solid 4px #ddd; background: yellow; float: left;">浮动子元素</div>
<p style="border: solid 4px blue;">常规流元素</p>
</div>
</div>
</div>
</div>
<p>设置常规流元素.bfc{overflow:hidden; zoom:1}激活hasLayout和BFC便可解决问题，如下:</p>
<div class="demoBox">
<div class="p12">
<div class="clearfix">
<div style="width: 300px; border: solid 2px red;">
<div style="width: 100px; height: 100px; line-height: 100px; text-align: center; border: solid 4px #ddd; background: yellow; float: left;">浮动子元素</div>
<p style="border: solid 4px blue;" class="bfc">常规流元素.bfc{zoom:1; overflow:hidden}</p>
</div>
</div>
</div>
</div>
<h4>3）解决相邻元素margin边距重叠问题</h4>
<p>先说一下margin边距重叠触发的条件：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。这里的毗邻是指：没有被非空内容、padding、border 或 clear 分隔开。在没有被分隔开的情况下，父元素margin-top和普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 在这个元素的 height 是 “auto” 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。以及普通流中非浮动元素等兄弟元素间的上下边距之间也会重叠。</p>
<p>父子元素上边距重叠</p>
<div class="demoBox">
<div class="p12">
<div style="border: solid 2px black; width: 200px;" class="clearfix">
<div style="width: 160px; margin-top: 10px; background: yellow;">
<div style="margin-top: 10px; width: 100px; height: 100px; background: #ccc;">子元素，上边距10px</div>
</div>
</div>
</div>
</div>
<p>兄弟元素上下边距重叠</p>
<div class="demoBox">
<div class="p12">
<div style="border: solid 2px black; width: 200px;" class="clearfix">
<div style="margin-bottom: 10px; width: 100px; height: 100px; background: #eee;">子元素1，下边距10px</div>
<div style="margin-top: 10px; width: 100px; height: 100px; background: #ccc;">子元素2，上边距10px</div>
</div>
</div>
</div>
<p>那怎么清除边距重叠呢，方法如下：<br>
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）<br>
2.创建了BFC块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠）<br>
这里我们需要指出的是：相邻元素不发生折叠的因素是触发BFC因素的子集，也就是说如果我为上下相邻的元素设置了overflow:hidden，虽然触发了BFC，但是上下元素的上下margin还是会发生折叠
</p>
<p>参考文章</p>
<div class="pageFrom">
<ul>
<li><a target="blank" href="http://w3help.org/zh-cn/causes/RM8002">http://w3help.org/zh-cn/causes/RM8002（W3Help(武利剑)）</a></li>
<li><a target="blank" href="http://www.smallni.com/haslayout-block-formatting-contexts/">http://www.smallni.com/haslayout-block-formatting-contexts/(smallni博客)</a></li>
<li><a target="blank" href="http://www.css88.com/archives/1292 ">http://www.css88.com/archives/1292 (On having layout)</a></li>
</ul>
</div>
</div>
<h3 id="boxModule">4.4 盒子模型（待续）</h3>
<h3 id="inline-block">4.5 inline-block属性（待续）</h3>
<h3 id="excellentArticles">4.2 优秀文章收录</h3>
<!--div class="container">
<div class="pageFrom">
<ul>
<li><a href="http://www.codecademy.com/zh#!/exercises/0">codecademy</a></li>
<li><a href="http://stackoverflow.com/">stackoverflow</a></li>
<li><a href="http://ued.taobao.com/blog/">淘宝UED</a></li>
<li><a href="http://ued.taobao.com/blog/2013/02/backyard-optimization-note/">淘宝店铺后院</a></li>
<li><a href="http://www.36ria.com/3399">YUI3的css栅格系统解析</a></li>
<li><a href="http://www.36ria.com/5886">Chrome开发者工具之结构与样式</a></li>
<li><a href="http://www.36ria.com/6058">《ant与前端》在线电子书</a></li>
<li><a href="http://blog.jobbole.com/32195/">如何做一个优秀的前端工程师</a></li>
<li><a href="http://blog.jobbole.com/32572/">JavaScript 项目优化总结</a></li>
<li><a href="http://blog.jobbole.com/26246/">如何成为一名成功的自由职业者</a></li>
<li><a href="http://www.book.36ria.com/webstorm/index.html">webstorm入门指南电子书</a></li>
<li><a href="http://blog.jobbole.com/32840/">周鸿祎：我挑战大公司的四个心得</a></li>
<li><a href="http://blog.jobbole.com/33103/">为什么我们应该像盖房子那样写程序？</a></li>
</ul>
</div>
</div-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.causeBox').each(function(){
var _span = $(this).find('span'),
_p = $(this).find('p');
var w = _span.outerWidth();
_span.css('margin-left',-w);
_p.css('padding-left',w);
})
//锚点定位滑动
$('#slide .bd ol a,#slide .hd').anchorPos({target:1});
//左侧侧边栏折叠效果
$("#slide .bd ol li:last-child").css("border-bottom","none");
$("#slide .bd ol:first").slideDown();
$("#slide .bd h2").on('click',function(){
$(this).next('ol').slideToggle();
});
//滑块切换页面宽度
$('.switch').toggle(function(){
$(this).find('.switch-slider').animate({
'marginLeft':'12px'
},400,function(){
$('#css').addClass('is-fixed');
})
},function(){
$(this).find('.switch-slider').animate({
'marginLeft':'0px'
},400,function(){
$('#css').removeClass('is-fixed');
})
})
})
</script>
</body>
</html>