月份: 2012 年 4 月

參考文章：CSS中link與import比較

link使用範圍：
因為是HTML語法，所以只能用在HTML網頁中

import使用範圍：
屬於CSS語法，所以可用於網頁中的樣式定義，也可用於樣式檔案中

link瀏覽器載入樣式表時機：
讀到標籤時不會載入樣式檔，待讀到使用樣式的標籤時，才載入樣式檔內容

import瀏覽器載入樣式表時機：
讀到@import指令即立該載入樣式檔內容

參考資料：
最新PHP+MySQL+AJAX網頁程式設計(旗標出版)

參考文章：CSS white-space 属性

normal：（預設）多個半形空白只會顯示一個空白，一定要有br才會換行，遇到邊界會自動換行

pre：同<pre>標籤，保留多個半形空白、無br的換行（在段落裡只是換行但沒用br，顯示出來還是會有換行）、一段內容如果超過一行，遇到邊界不會自動折行，

nowrap：不保留多個空白（多個半形空白會只顯示1個半形空白）與無br的換行，一段內容如果超過一行遇到邊界不會自動折行。除非有br才會折行

pre-wrap：保留多個半形空白、無br的換行，但是一段內容如果超過一行，遇到邊界會換行

per-line：不保留多個空白，但是保留無br的換行，且一段內容超過一行，到邊界會換行

inherit：從父層元素繼承wite-space 屬性

以下列原始碼為範例：
<div id=”all”>
<div id=”sample”>
<span class=”s01″>test</span>
</div>
</div>

幾種設定方式的優先順序如下：
#all #sample span>#sample span>#all span>span.s01>.s01>span

 

1. display:inline

• 可解除float時，在IE6底下與float同邊的margin會變兩倍大的bug
• 用li排橫排圖片連結的時候，設成inline就不需要使用float，可直接變成一排，此方法是只適用於圖片連結，且這時候li之間不能換行，否則會出現下列與圖片相同的有空格的問題。

2. display:blok

• 當圖片放置出現莫名的空格的時候，原因來自於標籤換行後，在inline的狀態下瀏覽器會認為有空格，因此處理方法為把圖片設定成block即可解決
• 上述問題通常也會出現在edm切版跟電子報切版。通常狀況是這樣：切版的時候<img>與後面的標籤是連在一起沒有換行、中間也沒任何空白的，這個時候顯示會正常。但是一旦<img>後面的標籤沒有直接接著、有換行，或是中間被加入空白（例如電子報寄出去的時候，有可能會自動換行或加入空白），這時候圖跟圖之間就會出現空格。實際排版時其實也很常遇到，只是通常圖片跟文字之間本來就會想要有距離，這時候這個問題就比較會被忽略。

以下標籤是指屬於block的標籤，如果屬於inline，則先使用display:block做轉換

• 方法一：
  如果文字只被一個標籤包住，則使用text-intent設定負值，讓字往左縮排，負值要夠大，例如-3000px
• 方法二：方法一有個壞處，如果螢幕解析度很好的時候，總有一天還是會被看到字，所以後來我是用text-indent:-300px;搭配overflow:hidden;隱藏
• 方法三：
  文字只被一個標籤包住的另外一種方式是設定很大的letter-spacing，例如100em，然後搭配指定height跟overflow:hidden;。
• 方法四：
  如果文字被兩個標籤包住，裡面的標籤padding-top設定成跟外面標籤高度相同，外面的標籤設定overflow:hidden;這個方法我通常拿來用在網站標題要放logo的時候會這樣處理。

參考文章：css圖片圓角邊框實現方式 、7种CSS圆角框解决方案

不過考慮到跨瀏覽器，通常我還是用最笨的方法：分div去拼出來。如果只考慮垂直延伸。就是切成以下結構：
<div id=”all”>
<div id=”block-top”></div>
<div id=”block-center”></div>
<div id=”block-bottom”></div>
</div>

如果垂直延伸結構想要再省一點可以這樣切：
<div id=”all”>
<div id=”block-top”>
<div id=”block-bottom”></div>
</div>
</div>
但是這樣就要搭配無透明度的圓角背景圖。用透明png還是要切三塊，不然重疊的部份會有兩層png