Daily Archives: 10/17/2012


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

上篇解釋了CSS的盒模型,介紹HTML元素在設計時就像一個個的盒子各自佔用了一個矩形的空間,今天就來接著介紹同樣也是針對元素空間定位的相關屬性。 顯示:塊級,行內、行內塊級 display:block; inline; inline-block; position: absolute, relative, fixed z-index:-1 0 1 ; reset 及預設樣式: W3C在制定共通的瀏覽器解讀方式時,針對不同的HTML元素有一些預設的樣式,一個單純的HTML檔案在完全沒有設計師指定樣式時,會呈現一種像大網模式般由上往下排例的內容,還是可以看出標題、連結、段落的差別,這就是預設樣式。 比如: <h1>預設是粗體,字級較大, 預設是普通粗細、14px… 因為這些元素有預設樣式,所以設計師在編寫樣式時有可能會被預設的寬高或間距影响到,例如 table 會有預設的padding 如果沒注意到就會一直無法順利把元素排版,因此多收設計師都喜歡先載入一段有人先寫好的CSS 叫reset.css,把所有預設的樣式都重置,這樣在設計時就比較不會被影响到。