CSS Layouthttp://zh-tw.learnlayout.com/

5/20 meeting

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

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;

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>

div1div2TEST

那垂直置中呢 ..?

margin:auto auto;margin-top:-50%;vertical-align:middle;

垂直置中<div id=“content”>   一行文字</div>

#content {     font-size:32px;     text-align:center;     height:150px;     line-height:150px;     background-color:#F00; }

一行文字

http://jsfiddle.net/camel2243/vn3m0tx1/

垂直置中<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; }

SSSSSSSSSSSSSSSSS......

http://jsfiddle.net/camel2243/r55L7L34/1/

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;

我小 我大

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

content1absolutecontent2content3

static

垂直置中<div id="center">     TEST </div>

#center {     position:absolute;     height:300px;     top:50%;     margin-top:-200px;     background-color:#F00; }

http://jsfiddle.net/camel2243/b1msc4hk/

TEST

垂直置中<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/

SSSSSSSSSSSSSSSSS......

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>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

img

li li li ……

inline-block ?block+float ?

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;

clearfix

XXXXXXXXimg

<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/

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

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 ?

總結萬丈高樓平地起

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/displayblock 不該放在 inline 中 http://

stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5

垂直置中http://blog.yam.com/hanasan/article/35806444

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