Box 屬性意義

  • display: block : 前後會插入換行,寬會填滿父元素,高則是配合內容。可以用 width, height 設定。
    預設: h1, p, div

  • display: inline : 不會換行,會連成一行。寬高都是依照內容,且不能使用 width, height。
    預設: span, a, em

  • display: inline-block : 跟 inline 一樣,但能夠使用 width, height 設定寬高。

  • display: list-item : 變成 marker + block。

  • display: run-in : 如下圖 h2 被指定 run-in 它就會變成 inline 後續的元素如果是 block 就會如圖一樣合體。但是後續的元素如果是 inline 或者套用了 float, position ,那麼 h2 就會是 block。 註: Firefox 和 IE7 目前都不支援 run-in

繼續閱讀

viewport 與 media query

簡易觀念

整個 Responsive Web Design 最主要的就是靠 css 中的 media query 搭配 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 這兩個部分來達成。

簡言之就是透過

繼續閱讀

CSS 覆寫規則

你是否曾經遇過這種情形,當您試著要套用某個 CSS 規則到元素的時候,它就是不產生變化。
網頁看起來就是忽略了您的 CSS ,然後根本搞不清楚到底是為什麼。
也許您使用了 !important 作為您最後的手段,這裡就有一個很好的機會來理解 CSS 選擇器的優先順序。

繼續閱讀

Backbone 簡介

Alt text

前言

這篇文章不是要深入探討關於BackboneJS的使用,純粹是因為最近Javascript MVC Framework
一直推陳出新。但像小弟資質愚鈍其實剛知道這東西的時候完全不知道她在干嘛。
這篇文章只是大略用範例來做些基本的說明。

繼續閱讀