1- 版面配置 ~ 起手式

練完基本功之後 ..

再來玩各個部落格的版面配置

起手式

假如你想利用 CSS 來設計網頁版面配置(Layout)。
你必須了解CSS選取器 (Selector)、屬性 (Property) 和屬性值 (Value) 是什麼咚咚，
還有需要知道所謂「版面配置」到底是在講什麼，如果你對 CSS 不甚瞭解的話，
建議你可以先看一下我之前寫的這篇教學文章 >> 認識 CSS 的選(取)擇規則

"display" 屬性

display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大部分元素的 display 屬性，預設值通常是 block 或 inline 其中一個。若該元素的 display 屬性被標示為 block 就被稱為「區塊元素」，若被標示為 inline 就稱為「行內元素」。

block

<div>

div 是一個標準的區塊元素。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。其他常用的區塊元素包括 p 、 form 、header 、 footer 、 section 等等。

</div>

inline

span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字片段，透過 CSS 點綴其樣式，且不會打亂段落原本的版面配置。 a 元素是最常見的行內元素，它可以被用作超連結之用。

none

另一個常用的 display 值是 none 。有一些特殊的元素 display 預設值會套用 none 屬性值，例如 script 元素就是個典型的例子。display:none 通常會搭配 JavaScript 一起使用，我們可以透過 JavaScript 動態修改元素的 display 屬性，用以隱藏或顯示該元素，而不是將元素從頁面中刪除或重建。

display 和 visibility 屬性不一樣，把 display 設定成 none 不會保留元素原本該顯示的空間，但是 visibility: hidden; 會讓元素的內容看不見，但會保留原本內容應該顯示的空間，只是看不到內容而已。

block 與 inline 的差異

• display:block - 區塊，元素會以區塊方式呈現，除非設定 position 或 float。
• display:inline - 所有文字或圖片均不換行，也就是全部都會是同一行的意思。

block 的特性是可以設定高度（height）、寬度（width）、上方與下方距離，像是 div、p、ul、li 均屬 block。而 inline 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度，像是 span、a、input、img、em 均屬 inline。

inline、inline-block 經常被網頁設計者用來，將原來垂直顯示的 OL、UL 選單列表項 ， 轉變成水平排列顯示。

• Home
 
• About Us
 
• Our Clients
 
• Contact Us

<style>

.nav {

  background-color: yellow; 

  list-style-type: none;

  text-align: center;

  margin: 0;

  padding: 0;

}

.nav li {

  display: inline-block;

  font-size: 20px;

  padding: 20px;

}

</style>

<ul class="nav">

  <li><a href="#home">Home</a></li>

  <li><a href="#about">About Us</a></li>

  <li><a href="#clients">Our Clients</a></li>  

  <li><a href="#contact">Contact Us</a></li>

</ul>

給元素所有的四個邊設置屬性（上下左右）方向。

padding 的四個邊 獨立寫法

• padding-top：上方的內距
• padding-right：右方的內距
• padding-bottom：下方的內距
• padding-left：左方的內距

margin 的四個邊 單行簡化寫法

• margin: auto; 只有一個值時，這個值會被指定給全部的四個邊 .
• margin: 0 auto; 兩個值時，第一個值被匹配給上和下 ,第二個值被匹配給左和右 .
• margin: 0 20% 5px; 三個值時，第一個值給上 ,第二個值給左和右 ,第三個值匹配給下 .
• margin: 5px 6px 7px 8px; 四個值時，會依(順時針方向)次按上、右、下、左的順序匹配

margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}

 

<div id="main">

設定區塊元素的 width 屬性，可以避免該元素從左到右撐滿容器，然後你可以設定左右外邊距（margin-left 與 margin-right）為 auto 來使其水平居中。元素在顯示的時候，只會顯示到你所指定的寬度，然後剩餘的寬度平均的散落在左右兩邊的邊距上。

唯一的問題是，當瀏覽器視窗寬度比元素的寬度還要窄時，瀏覽器就會出現水平捲軸。讓我們接著來改進這個狀況......

</div>

網頁裡物件要置中對齊 CSS 的方法主要有2種，margin:0 auto 與 text-align:center，這兩種方式有什麼不同。

text-align:center主要是用在div或是區塊物件裡的文字p或是img，更具體一點可以說成是"行內物件"
margin:0 auto主要是讓"區塊本身"置中，像是在網頁切版時，想讓整個內容部份置中的時候，就常常會用到這個屬性

PS : margin:0 auto 一定要配合設定width的屬性才能運做喔 ~