作者: 就以

以下標籤是指屬於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

參考文章：使用 CSS Sprites 設計網頁但不用 background-image 的技巧

CSS Sprites主要是使用在流量大的網站的一種技巧，因為太多圖片會造成太多的 HTTP Request，因此會使用一張大圖、然後使用background-image加上background-position的方式，來減少 HTTP Request ，一般小型網站其實用不太到。

但設定背景圖其實有一個比較明顯的問題是，列印的時候印不出來。如果背景圖只是用在純裝飾、文字都還有顯示那還好。但如果該背景圖很重要也希望被列印出來，那列印的人得去改印表機的預設設定、而一般人當然不可能會知道這個設定。

因此如果希望圖片是能夠被印的，就要改使用把大張圖片直接置入到html，然後 clip 的方式來設定。我舊的作品集網站上方主要連結有使用這樣的技巧。所以如果預覽列印時，上面煮選單的圖片是可以被印出來的。

但是，這個方法使用在主選單上也許還可以，但如果以中文字來說，要使用再圖片文字上的時候，個人是覺得就不太適用。另外思考一下「為甚麼要列印網頁」？列印網頁的重點應該還是在於要把內容印出來。因此只要對應的文字有被印出來，即使印出來不像螢幕上顯示的那麼漂亮，實際上也是無妨的，因為重要的是資訊。

而且個人是比較偏好純文字的結構，除非這張圖屬於內容的一部分，不然我不太喜歡用置入的方式放到html裡，因為這樣你還得再加上alt去標注，那好像不會比用background的設定好到哪裡去。

因此我自己認為比較好的解法應該是直接設定一組print的css，然後把印不出來圖片的部份的文字都讓他顯示出來，只要可以達到列印的可用性即可。

參考文章：重直多欄式版面自動延伸高度、使多欄式版面高度等高

第一篇講的是子元素浮動時，父元素高度無法撐高的問題。這個用overflow:hidden;來解。

第二篇講的則是父元素撐高後，子元素要如何讓他的高度自動隨內容比較多者一起延伸。解法是設定padding-bottom:5000px;撐高，然後設定margin-bottom:-5000px;把邊界拉回。那因為搭配父元素overflow:hidden;的情況下，超過的會被隱藏，看起來就好像延伸了。所以這個必須搭配第一項的設定才能有效果。不然會看到設定padding-bottom:5000px;的區塊會一直往下延伸很長很長。