iT邦幫忙

DAY 8
3

新手前端日記系列 第 8

[新手前端]從平面設計前進 CSS-6 塊級元素及float, reset

分享CSS 的屬性特色
上篇解釋了CSS的盒模型,介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間,今天就來接著介紹同樣也是針對元素空間定位的相關屬性。
浮動 float
浮動只有分左右浮動 float:left; float:right;
元素在HTML裡會由上至下,由左至右依序的排例在一起,浮動的意思就是讓元素從原有的依序排列中浮出來,漂到母元素的左邊界或右邊界。

有點像是原本的元素都在一個圖層裡排好,被指定為浮動的元素就被拉到上面的圖層,然後往左或右排,同樣都是浮動的就會在上面的圖層裡依序排例,不過這次有方向性。這在做整個版面設計時很有用,可以讓欄位往左、右對齊。

顯示 display
有8種不同的顯示狀態,分別是:隱藏、不顯示、塊級,行內、行內塊級、表格、項目物件、插入
display:hidden, none, block; inline; inline-block; table, list-item, run-in

hidden 隱藏就是元素雖然被載入,但是不顯示,直到樣式被更改才出現,而 none不顯示,在某些瀏覽器是會直接不載入這個元素。

塊級 block 當元素的顯示被設定為 塊級的時候,這個元素就會有固定的長寬並佔有畫面一整行的寬度,意思就是緊跟著他的下一個元素不會粘在設定的寬度後,而是會換行跑到這個元素的下面。

行內 inline 這就是和block相反的元素,當 E 被設定成 display:inline 時,元素就會保持在同一行,不會換行的一個接著一個直到碰到母元素的內邊界才會換到下一行,但要注意行內元素因為保持在行內這個特性而無法具有自己的寬度。

行內塊級 inline-block 顧名思義就是 inline元素但是可以具有塊級的寬度。

表格 table
讓元素可以像表格一樣展示

以上這幾個比較常用,run-in , list-item 比較少用到

run-in 插入:碰到和塊級元素相接時會變成排在塊級元素內的行內元素,碰到行內元素時會像塊級元素一樣呈現。
list-item 項目物件:該元素會像我們常看到的序列一樣,在前方多出項目符號。

table 表格組:其中又有分 table, table-row, table-cell
可以讓元素具有類似表格的排列方式,又不需要真的是個表格。

display屬性的瀏覽器支援度可以參考 w3c
頁面最下方有個 playground 大家可以在那裡切換各種不同的顯示法,感受一下差異
http://www.quirksmode.org/css/display.html

reset 及預設樣式:
W3C在制定共通的瀏覽器解讀方式時,針對不同的HTML元素有一些預設的樣式,一個單純的HTML檔案在完全沒有設計師指定樣式時,會呈現一種像大網模式般由上往下排例的內容,還是可以看出標題、連結、段落的差別,這就是預設樣式。

比如: <h1>預設是粗體,字級較大,<p>預設是普通粗細、14px...
因為這些元素有預設樣式,所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到,例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版,因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css,把所有預設的樣式都重置,這樣在設計時就比較不會被影响到。

不過多載入一些程式碼就多一點 loading 所以也有人認為不需要做 reset的動作,只要在需要指定時覆寫掉預設值就好,只是這樣要對HTML每一個元素的預設值都有概念,實做上恐怕是不容易,所以見仁見智,多半還是會先載入 reset把預設樣式都清掉。

reset 可以直接加在<link> 進來的.CSS 前半段或是另外存成一個 reset.css的檔案載入。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* =====
其實我覺得reset 放在這裡講有點太早,不過我對文章的掌握度還不夠,要天天發也真的是種挑戰啊...Orz
而且我好像太偏重在CSS的解說,HTML被我跳過,實際上我js jQ又不太熟,似乎到了鍊成的關卡了,大綱還是應該要早點擬啊...Orz
(這篇其實偷懶了的自白... 我明天會再增補...Orz)
*/


上一篇
[新手前端]從平面設計前進 CSS-5 盒模型
下一篇
[新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position
系列文
新手前端日記30

尚未有邦友留言

立即登入留言