內容概覽：

• 元素的顯示與隱藏
  • 顯示：display
  • 可見性：visibility
  • 溢位：overflow
• CSS高階技巧
  • CSS使用者面介面樣式
  • 滑鼠樣式：cursor
  • 輪廓：outline
  • 防止拖曳文字域：resize
  • vertical-align：垂直對齊
  • 圖片和文字對齊
  • 去除圖片底側空白間隙
  • 溢位的文字隱藏
    • word-break：自動換行
    • white-space
    • text-overflow：文字溢位
• CSS精靈技術（sprite）（背景圖片特別多時使用精靈圖，融合一張頁面中的所有背景圖）
  • 精靈技術的本質
  • 精靈技術的使用
• 字型圖示

元素的顯示與隱藏

目的：

• 讓一個元素在頁面中消失，但是不在文件原始碼中刪除。

顯示 display

• display：none；隱藏元素，不保留位置；
• display：block；顯示元素 並 轉換為塊級元素

可見性 visibility

• visibility：visible；顯示元素；
• visibility：hidden；隱藏元素，但保留位置；

溢位 overflow

• overflow：visible；預設的，超出顯示；
• overflow：auto；超出自動顯示滾動條；不超出不顯示滾動條；
• overflow：hidden；超出部分隱藏掉；
• overflow：scroll；不管內容是否超出，總是顯示滾動條；

CSS高階技巧

CSS使用者面介面樣式

滑鼠樣式：cursor

• 檢測滑鼠指標如何在系統中定義游標

• cursor：default；預設的，指標 樣式；
• cursor：pointer；滑鼠經過後，變成 手掌 的樣式；
• cursor：move；滑鼠經過時，變成類似 十字架 的樣式；
• cursor：text；滑鼠經過時，變成類似於 輸入框中顯示 ‘I’的樣式；

輪廓：outline

• outline：0 || none；取消輪廓線；一般都會去掉輪廓線
• 是繪製元素周圍的一條線，位於邊框邊緣的外圍，起到突出元素的作用；
• 語法格式如下：

outline：outline-color || outline-style || outline-width；

防止拖曳文字域：resize

• resize:none；防止文字域被拖曳變形

vertical-align：垂直對齊

圖片和文字對齊

• 對於塊級元素無效；

vertical-align：baseline（基線對齊）| top | middle（居中對齊） | bottom；

• vertical-align：baseline；圖片和文字預設是基線對齊，紅色顯示位置

去除圖片底側空白間隙（少部分會出現此問題）

• 圖片 或者 表單 等行內塊元素，底線會和父級盒子的基線對齊，這樣就會造成上述圖片中的間隙問題。
• 解決方案：
  1. display：block；轉換為塊級元素；
  2. vertical-align：top | middle | bottom；去除預設基線屬性即可；

溢位的文字隱藏

word-break：自動換行

/* 主要用於處理英文單詞 */
/* 瀏覽器預設換行規則 */
word-break: normal;
/* 允許單詞拆開顯示；即單詞內部換行； */
word-break: break-all;
/* 不允許拆開單詞；連字元（my-class）特殊，可拆開換行 */
word-break: keep-all;

white-space

• 設定或檢索物件內 文字 的顯示方式；通常用於強制顯示一行內容

/* 預設處理方式 */
white-space: normal;
/* 強制在同一行顯示所有文字，直到文字結束或者遭遇 <br/> 標籤物件才換行 */
white-space: nowrap;

text-overflow：文字溢位

• 與 white-space：nowrap; 和 overflow：hidden; 搭配使用；
• 必須先利用 white-space：nowrap; 將文字強制顯示在一行，然後使用 overflow：hidden; 隱藏屬性後；才能使用 text-overflow 屬性；

/* 不顯示省略標記（...），而是簡單的裁切 */
text-overflow: clip;
/* 當物件文字溢位時顯示省略標記（...） */
text-overflow: ellipsis;

/* 示例 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

CSS精靈技術（sprite）

• 為了減少伺服器的接收和請求次數

精靈技術的本質

• 簡單來說，CSS精靈是一種處理網頁背景圖片的方式。即將一個頁面中涉及到的所有背景圖片集中到一張大圖中，然後將大圖應用網頁；

精靈技術的使用

• 由其本質我們可以知道，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，想要精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat 和 background-position屬性進行背景定位；

字型圖示

字型圖示使用流程

svg格式上傳轉換為字型格式

• 字型檔案包國內下載：阿里巴巴圖示庫
• 國外：圖示庫