如何使用CSS做版面配置? 水平及垂直置中? 什麼是float? 什麼是clearfix? ;讓你更熟悉網頁排版

1. CSS Layout
http://zh-tw.learnlayout.com/
5/20 meeting

3. 版面配置常用的CSS....
 Display
 margin
 Box Model
 Position
 float
 clear
 clearfix
 z-index
 column

4. Display
<span id="red">inline</span>
<span id="blue">inline</span>
<button id="black">inline-block</button>
<div id="green">block</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/display
inline inline inline-block
block
inline-block inline-block visibility:hidden;display:none;
https://jsfiddle.net/bc5b9nbo/
display:none; VS visibility:hidden;

5. margin
水平置中
.div1 {
background-color:#F00;
width: 300px;
height: 300px;
text-align:center;
}
.div2 {
width: 150px;
height: 150px;
background-color:#0F0;
margin:0 auto;
}
http://jsfiddle.net/camel2243/gja77g9o/1/
<div class="div1">
<span>TEST</span>
<div class="div2"></div>
</div>
div1div2
TEST

6. 那垂直置中呢..?
margin:auto auto;
margin-top:-50%;
vertical-align:middle;

7. 垂直置中
<div id=“content”>
一行文字
</div>
#content {
font-size:32px;
text-align:center;
height:150px;
line-height:150px;
background-color:#F00;
}
一行文字
http://jsfiddle.net/camel2243/vn3m0tx1/

8. 垂直置中
<div id="div1">
<div id="div2">
SSSS………..
</div>
</div>
#div1 {
display:table;
word-break:break-all;
}
#div2 {
max-width: 150px;
height: 150px;;
background-color:#0F0;
display: table-cell;
vertical-align: middle;
}
SSSSSSSSSSS
SSSSSS......
http://jsfiddle.net/camel2243/r55L7L34/1/

9. Box Model
http://jsfiddle.net/camel2243/zkcnoofn/
<div class="simple">
我小</div>
<div class="fancy">
我大</div>
.simple {
width: 500px;
margin: 20px auto;
background-color:#F00;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
background-color:#0F0;
}
我小
我大
box-sizing: border-box;
我小
我大

10. Position
 static：預設位置。
 relative：與 static 相同，可加額外屬性定位。
 fixed：以瀏覽器視窗定位。
 absolute： 定位在上層容器的相對位置。
http://jsfiddle.net/camel2243/za4f2jww/
<div class="container">
<nav><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></nav>
<section>content1</section>
<section>content2</section>
<section>content3</section>
</div>
relative
• 1
• 2
• 3
• 4
content1absolute
content2
content3
static

11. 垂直置中
<div id="center">
TEST
</div>
#center {
position:absolute;
height:300px;
top:50%;
margin-top:-200px;
background-color:#F00;
}
http://jsfiddle.net/camel2243/b1msc4hk/
TEST

12. 垂直置中
<div id="middle">
TEST
</div>
#middle {
position:absolute;
width:50%;
height:280px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background-color:#0F0;
overflow:auto;
}
http://jsfiddle.net/camel2243/j0n1gm5e/
SSSSSSSSSSSS
SSSSS......

13. float
http://jsfiddle.net/camel2243/cdk54cv6/
div{
background-color:#CCC;
}
img {
float: right;
margin: 0 0 10px 10px;
}
<div>
<img src=img.jpg" />
textKKKK..
</div>
XXXXXXXXXXXXXX
XXXXXXXXXXXXXX
XXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXX
img
li li li ……
inline-block ?
block+float ?

14. clear
http://jsfiddle.net/camel2243/yz8bbdfr/
.box {
float: left;
width: 200px;
height: 100px;
margin: 10px;
background-color:#F00;
}
section{
background-color:#0F0;
}
<div class="box">...</div>
<section>TEXT</section>TEXT…
TEXT
…
clear:both;

15. clearfix
XXXXXXXX
img
<div>
<img src=img.jpg" />
textKKKK..
</div>
div{
background-color:#CCC;
}
img {
float: right;
margin: 0 0 10px 10px;
}
li li li ……
nav
Solution?
http://jsfiddle.net/camel2243/dhec9kvy/

16. z-index
http://jsfiddle.net/camel2243/v56ypdqc/
<div id=“red">
z-index:3;
</div>
<div id=“yellow">
z-index:2;
</div>
<div id=“green">
z-index:1;
</div>
記得要設position

17. column
<div class="three-column">
TEXT……
</div>
.three-column {
padding: 10px;
column-count: 3;
column-gap: 10px;
background-color:#F00;
}
TEXT…
………
………
………
………
………
TEXT…
………
………
………
………
………
TEXT…
………
………
………
………
………
http://jsfiddle.net/camel2243/gy32w9cf/
flexbox ?

18. 總結
萬丈高樓平地起

19. Reference
版面配置教學
 http://zh-tw.learnlayout.com/
display、visibility、opacity 差異
 http://stackoverflow.com/questions/272360/does-opacity0-have-
exactly-the-same-effect-as-visibilityhidden/273076#273076
display 有哪些
 https://developer.mozilla.org/en-US/docs/Web/CSS/display
block 不該放在inline中
 http://stackoverflow.com/questions/6061869/are-block-level-
elements-allowed-inside-inline-level-elements-in-html5
 垂直置中
http://blog.yam.com/hanasan/article/35806444

20. Reference
clearfix
 http://stackoverflow.com/questions/211383/which-
method-of-clearfix-is-best
z-index 其實很複雜
 http://www.icoding.co/2013/06/knowledge-about-z-
index-2