成為網頁設計師的第一步：CSS

前言

HTML與CSS是一個網頁設計最基本的技術，相信看過成為網頁設計師的第一步：html與css的讀者們對css應該都有初步的認識了，接下來這篇文章將帶領各位讀者了解css最基本的核心問題 Box Model、inline、block。

css是什麼

Cascading Style Sheets：層疊樣式表。 是用來幫結構化文件（如：html or xml）添加樣式（如：排版、字體大小、顏色......等等）， 隨著網路越來越發達，css為了滿足現在用戶的需求，也新增不少功能，到現在css已經出到第三版。

Box Model

box model在css中是一個非常重要的觀念，它是描述元素是由什麼組成， box model是由content、padding、border、margin組成，box model可以解決排版和內容設計的問題，

content

請參考第一張圖，content的大小是元素的width和height或內容來決定。

ps.放文字或圖片的地方

padding

請參考第一張圖，content和border間紅色區域那就是padding，可以讓content與border之間有距離。

border

請參考第一張圖，圍繞在padding及content的黑色線條那就是俗稱的邊線。

margin

請參考第一張圖，元素跟元素之間的距離那就是margin。

知道box model後，再來我們要介紹display的屬性。

display

display有四種呈現方式為inline、block、inline-block、none。

而在html中，每個標籤都有預設inline 和 block值。

inline

在html中<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em> 就是inline，在css中設置display:inline就是將該元素改成inline inline的特點：
1. 每一個inline元素會與前後的元素在同一行並排顯示
2. 無法設置width height margin-top margin-bottom
3. width由內容來決定

block

在html中<div>、 <p>、<h1>、<form>、<ul>和 <li>就是block元素。在css中設置display:block就是 將該元素改成block block的特點：
1. 每一個block元素都會從新的一行開始，不會與前後的元素有在同一行並排顯示
2. 能設置width height margin padding
3. width再不設置的情況下會跟隨著父元素變動，除非有特別設定width。

讀者可能會問那什麼時候用inline?什麼時候用block? 在文字描述及圖片可以使用inline，有排版的需求在大多都使用block

inline-block

在css中設置display:inline-block就是將該元素改成inline-block。 inline-block的特點：
1. 每一個inline-block元素會與前後的元素在同一行並排顯示
2. 能設置width height margin padding
3. width在不設置的情況下會隨著內容變動，除非有特別設定width。

none

在css中設置display:none就是將該元素改成none。 none的特點: 會將某個元素隱藏起來，並不佔版面。

visibility : hidden與display:none都是隱藏元素，但唯一的差別是 visibility : hidden這個參數會佔版面。

認識css兩項最核心的東西後，再來就是要講解兩項排版的主要方式。

float

在瞭解float之前，首先我們要先了解，div是block元素，在頁面中會獨佔一行，由上而下排列。

float可以理解為讓某個div元素脫離原本所在的那行，漂浮在那行上面，和原本那行是不同層次，假設某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後面(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是沒有浮動的元素，那麼A的相對垂直位置不會改變，也就是说A的頂部總是和上一個元素的底部對齊。

div的順序是HTML中div的順序决定的。

clear

這個參數主要的功能在於清除浮動，他有三個值，分別為：
* clear:left：清除所有左邊浮動。 * clear:right：清除所有右邊浮動。 * clear:both：清除所有左右邊浮動。

這樣講也許很抽象，接下來請各位讀者們，配合這個範例再看一次。

inline-block 、float 使用時機：

inline-block與float在本質上其實是不同的東西，但所產生出的結果其實幾乎是一樣的，而兩者的使用時機取決於你的設計與解決方案。
今天要做商品圖片排列時，使用inline-block會是一個不錯的解決方案，今天要做版面排版或是文字圍繞著圖片使用float來做會是一個不錯的解決方案。 例如下面遇到的問題： 上圖，把所有元素設置了浮動，因为盒子二號高度的關係，可以發現盒子五號被擠進去了，这是圖片排列中很常見的問題。 上面的元素被設置了inline-block。所以盒子五號不會被過長盒子二號擠上來。

上述的情況，我們就會優先使用inline-block來解決。

position

position是一種定位元素的參數，它有四種定位方式的值，分別為static、relative、absolute、fixed，他們各有各不同的使用時機，相對於float，position相較之下稍微複雜了一些，我們這邊暫且不多做介紹，如果想知道詳細的使用方式，請參考這邊。

結論

讀者們看完這篇文章之後是不是覺得，哇！整篇文章好長阿！而且還有種有看沒有懂的感覺。css最主要就是設定整個網頁的排版，而這篇我們所提到的就是最核心的排版觀念，用說的可能較抽象一點，讀者們可以自己來 這邊 試試看css的用法喔。 css的參數若要把每個都抓出來講解，可能10篇文章都不夠呢(笑)，有機會我們再來談談外觀設定方面的參數吧！