每個 HTML元件都有一個 display 設定值，用來指定顯示方式，通常是：
display: block; 區塊元素
display: inline; 行內元素

文件參考：https://www.w3ccoo.com/css/css_display_visibility.html

第一部份、區塊元素：
1、寬度都佔滿畫面 100%，所以是新的一行
2、常用的標籤有：<div>、<p>、<h1~h6>、<form>、<header>、<section>、<footer>

範例：

<style type="text/css">
div,p,h2,form,section,footer,header{
    border: 1px solid #333;
}
</style>

<div>內容</div>
<p>內容</p>
<h2>內容</h2>
<form>內容</form>
<section>內容</section>
<footer>內容</footer>
<header>內容</header>

效果展示：

內容

內容

第二部份、行內元素：可視為一般內容
1、寬度只有內容寬
2、常用的標籤有：<a>、<img>、<span>

範例：

<a href="http://www.google.com.tw">Google 連結</a>
<img src="images/logo.png">
<span>你好啊！</span>

效果展示：

內容是依序併排在一起的

通常就是為了讓block能夠併排在一起，才會設定成 inline-block

範例1：

<style type="text/css">
.square{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
</style>
<div class="square" style="background-color: red;">1</div>
<div class="square" style="background-color: yellow;">2</div>
<div class="square" style="background-color: lime;">3</div>

效果展示：

範例2：

<style type="text/css">
.square2{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    display: inline-block;
}
</style>
<div class="square2" style="background-color: red;">1</div>
<div class="square2" style="background-color: yellow;">2</div>
<div class="square2" style="background-color: lime;">3</div>

效果展示：

none 就是無，很多元件CSS屬性都有這設定值

initial 就是初始值，很多元件CSS屬性都有這設定值

inherit 繼承上層設定值，很多元件CSS屬性都有這設定值

範例1：

<style type="text/css">
.square3{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
</style>
<div class="square3" style="background-color: red;">1</div>
<div class="square3" style="background-color: yellow; display:none;">2</div>
<div class="square3" style="background-color: lime;">3</div>

效果展示：

範例2：

<style type="text/css">
.square4{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    display: initial;
}
</style>
<div class="square4" style="background-color: red;">1</div>
<div class="square4" style="background-color: yellow;">2</div>
<div class="square4" style="background-color: lime;">3</div>

效果展示：

visibility: visible; 顯示

visibility: hidden; 隱藏

範例1：

<style type="text/css">
.square5{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
</style>
<div class="square5" style="background-color: red;">1</div>
<div class="square5" style="background-color: yellow; visibility:hidden;">2</div>
<div class="square5" style="background-color: lime;">3</div>

效果展示：