1. inline vs float

目的

知道甚麼是div

div 屬於block(頭尾換行,其他還有<p>和<h>類標籤),而不是inline(頭尾不換行,例如<span>)。
排版
- block vs inline
- position
- overflow (重疊與否,超出版面的控制)

排版基本觀念

基本上的排版,可以大致上分為 display 和 position 排版

position
display: 可以大致上分為 Block 和 Inline 排版
- 區塊(Block)元素:　例如，<div> 、<h1>和 <p>
- 行列(Inline)元素: 例如，<span>

div 和span標籤,可以讓瀏覽器於編譯版面標籤<h>,<p>流程之外,更加彈性。例如好幾個段落可以形成1個<div>然後進一步控制是否div必須於同一橫行。


<style>
  p{margin:1px;background-color:grey;}
  div{border: solid green 1px}
</style>  
<div><p>p1</p><p>p2</p></div>
<hr>
<div><p>p1</p><p>p2</p></div>

block to inline

將<div>由block 變成 inline 目前有兩種方法:

利用display: display: inline-block
看內容
```
    <style>
      p{margin:1px;background-color:grey;}
      div{
        border: solid green 1px;
        display:inline-block;
      }
    </style>  
    <div><p>p1</p><p>p2</p></div>
    <div><p>p1</p><p>p2</p></div>
    
```
利用float: float:left
看內容
```
    <style>
      p{margin:1px;background-color:grey;}
      div{
        border: solid green 1px;
        float:left; 
      }
    </style>  
    <div><p>p1</p><p>p2</p></div>
    <div><p>p1</p><p>p2</p></div>
    
```

display:inline-block 比使用float:left簡單。但是出現時間比較晚。
- 💡display的值inline-block 和inline功能類似,都會描繪在都在同一行,不同的是前者可以指定長寬。

上面兩個方法的比較如下

利用display: display: inline-block
原始碼(b12 div inline.html)
```
<!DOCTYPE html>
<html>

<head>
  <title>Divs in HTML with style</title>
  <meta charset="utf-8" />
  <style>
    .container {
      width: 100%;
    }

    .block {
      display: inline-block; /*👏*/
      width:40%;
      border: solid #6AC5AC 2px;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="block">
      <p>paragraph 1</p>
    </div>
    <div class="block">
      <p>paragraph 2</p>
    </div>
    <div class="block">
      <p>paragraph 3</p>
    </div>
    <div class="block">
      <p>paragraph 4</p>
    </div>
    <div>
      <p>paragraph 5</p>
    </div>
  </div>
</body>

</html>
```
<!DOCTYPE html> <html> <head> <title>Divs in HTML with style</title> <meta charset="utf-8" /> <style> .container { width: 100%; } .block { display: inline-block; /*👏*/ width:40%; border: solid #6AC5AC 2px; position: relative; } </style> </head> <body> <div class="container"> <div class="block"> <p>paragraph 1</p> </div> <div class="block"> <p>paragraph 2</p> </div> <div class="block"> <p>paragraph 3</p> </div> <div class="block"> <p>paragraph 4</p> </div> <div> <p>paragraph 5</p> </div> </div> </body> </html>
- 只有第5個段落沒有套用inline-block
利用float: float:left
原始碼(b12 div display.html)
```
<!DOCTYPE html>
<html>

<head>
  <title>Divs in HTML with style</title>
  <meta charset="utf-8" />
  <style>
    .container {
      width: 100%;
    }

    .block {
      float: left;   /*👏*/
      width: 40%;
      border: solid #6AC5AC 2px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="block">
      <p>paragraph 1</p>
    </div>
    <div class="block">
      <p>paragraph 2</p>
    </div>
    <div class="block">
      <p>paragraph 3</p>
    </div>
    <div class="block">
      <p>paragraph 4</p>
    </div>
    <div>
      <p>paragraph 5</p>
    </div>
  </div>
</body>

</html>
```
<!DOCTYPE html> <html> <head> <title>Divs in HTML with style</title> <meta charset="utf-8" /> <style> .container { width: 100%; } .block { float: left; /*👏*/ width: 40%; border: solid #6AC5AC 2px; } </style> </head> <body> <div class="container"> <div class="block"> <p>paragraph 1</p> </div> <div class="block"> <p>paragraph 2</p> </div> <div class="block"> <p>paragraph 3</p> </div> <div class="block"> <p>paragraph 4</p> </div> <div> <p>paragraph 5</p> </div> </div> </body> </html>
觀察
- 格子之間的空白,還有第5段落。

在float中控制換行,例如上面的第5段落,要出現在行中的開始位置。

❓如果每個DIV都有float這個屬性,但是又希望某個DIV放在行的最後,或是第一個,CSS要怎樣下命令?

/* 說明 */
div.mainLayout{ 
  /*當屬性有float:left的時候,不再是block 而是inline*/
  float:left; 
  width:40%;
  border:solid red;
}
div.clearFlt{
  clear:both;/*👏直覺上就是DIV兩邊都插上<div>,也就是block */
  border:solid green;
}

clear(👏)可以設定的屬性有：left、right、both。
- 其旨在告訴該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西，若有的話，該元素會自動往下移。
範例
原始碼(b12 div ex3.html)
```
<!DOCTYPE html>
<HTML lang="en-US">
<head>
<style>
body,html{
  height:100%
}
div.mainLayout{
  float:left;
  width:40%;
  border:solid red;
}
div.clearFlt{
  clear:both;
  border:solid green;
}
</style>
</head>
<body>


    <div class="mainLayout">Content 1      
    </div>
	
    <div class="mainLayout">Content 2
    </div>

    <div class="mainLayout">Content 3
    </div>	

    <div class="clearFlt">Content 4
    </div>

	
</body>
</html>
```
<!DOCTYPE html> <HTML lang="en-US"> <head> <style> body,html{ height:100% } div.mainLayout{ float:left; width:40%; border:solid red; } div.clearFlt{ clear:both; border:solid green; } </style> </head> <body>  <div class="mainLayout">Content 1 </div> <div class="mainLayout">Content 2 </div> <div class="mainLayout">Content 3 </div> <div class="clearFlt">Content 4 </div> </body> </html>

練習材料

原始碼(b12 div ex3_1.html)


<html>
<head>
<style>
body,html{height:100%}
div.Layout1{
float:left;
width:40%;
border:solid red;
}
div.Layout2{
width:40%;
border:solid red;
}
div.Layout3{
width:40%;
border:solid red;
}
div.Layout4{
width:40%;
border:solid red;
}

div.clearFlt{
clear:both;
border:solid green;
}
</style>
</head>
<body>
<div class="Layout1">Content 1   

</div>
<div class="Layout2">Content 2
</div>
<div class="Layout3">Content 3
</div>	
<div class="clearFlt">Content 4
</div>
</body>
</html>

- ❓修改上面的HTML,達成下述要求

1. 第一DIV和第二個DIV在同一行,其他不管
1. 第三個DIV,必須要在開頭第一行

見課堂