七月 19, 2016 | 前端與Vue

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

這篇文章將帶領各位讀者了解css最基本的核心問題 Box Model、inline、block。

前言

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篇文章都不夠呢(笑),有機會我們再來談談外觀設定方面的參數吧!