聲明：本人的所有部落格皆為個人筆記，作為個人知識索引使用，是以在叙述上存在邏輯不通順、跨度大等問題，希望了解。分享出來僅供大家學習翻閱，若有錯誤希望指出，感謝！

CSS進階技巧

元素的顯示與隐藏

類似網站廣告，當我們點選關閉就不見了，但是我們重新重新整理頁面，會重新出現！

display 顯示（重點）

• display 設定或檢索對象是否及如何顯示

  display: none 隐藏對象
             

display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

- 特點： 隐藏之後，不再保留位置



#### visibility 可見性

- 設定或檢索是否顯示對象。

~~~css
visibility：visible; 　對象可視
visibility：hidden; 　 對象隐藏
           

• 特點： 隐藏之後，繼續保留原有位置

overflow 溢出(重點)

• 檢索或設定當對象的内容超過其指定高度及寬度時如何管理内容

屬性值	描述
visible	不剪切内容也不添加滾動條
hidden	不顯示超過對象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，總是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

• 作用：
  • 清除浮動
  • 隐藏超出内容，隐藏掉, 不允許内容超過父盒子

顯示與隐藏總結

屬性	差別	用途
display	隐藏對象，不保留位置	配合後面js做特效，比如下拉菜單，應用極為廣泛
visibility	隐藏對象，保留位置	使用較少
overflow	隻是隐藏超出大小的部分	1. 可以清除浮動 2. 保證盒子裡面的内容不會超出該盒子範圍

CSS使用者界面樣式

• 更改一些使用者操作樣式，以便提高更好的使用者體驗
  • 更改使用者的滑鼠樣式
  • 表單輪廓等
  • 防止表單域拖拽

滑鼠樣式cursor

設定或檢索在對象上移動的滑鼠指針采用何種系統預定義的光标形狀

屬性值	描述
default	小白 預設
pointer	小手
move	移動
text	文本
not-allowed	禁止

輪廓線 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width 
           

一般都是選擇去掉，故最直接的寫法是 ： outline: 0; 或者 outline: none;

防止拖拽文本域resize

設定文本域右下角不可拖拽：

使用者界面樣式總結

屬性	用途	用途
滑鼠樣式	更改滑鼠樣式cursor	樣式很多，重點記住 pointer
輪廓線	表單預設outline	outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽	主要針對文本域resize	防止使用者随意拖拽文本域，造成頁面布局混亂，我們resize:none

vertical-align 垂直對齊

• 有寬度的塊級元素居中對齊，是margin: 0 auto;
• 讓文字居中對齊，是 text-align: center;
• vertical-align 垂直對齊，它隻針對于或者行内塊元素，不影響塊級元素中的内容對齊

vertical-align : baseline |top |middle |bottom 
           

圖檔、表單和文字對齊

可以通過vertical-align 控制圖檔和文字的垂直關系

• 設定設定vertical-align:baseline（預設）會使圖檔會和文字基線對齊
• 設定vertical-align:middle會使圖檔會和文字居中對齊
• 設定vertical-align:top會使圖檔會和文字頂部對齊

去除圖檔底側空白縫隙

• 原因：

  圖檔或者表單等行内塊元素，他的底線會和父級盒子的基線對齊，導緻圖檔底側會有一個空白縫隙。

• 解決方法：
  • 給img設定 vertical-align:middle | top| bottom等等。 讓圖檔不要和基線對齊。
  • 給img設定 display：block; 轉換為塊級元素

溢出的文字省略号顯示

white-space

• white-space設定或檢索對象内文本顯示方式。通常我們使用于強制一行顯示内容

white-space:normal ；預設處理方式
white-space:nowrap ；　強制在同一行内顯示所有文本，直到文本結束或者遭遇br标簽對象才換行。
           

text-overflow 文字溢出

• 設定或檢索是否使用一個省略标記（…）标示對象内文本的溢出

text-overflow : clip ；不顯示省略标記（...），而是簡單的裁切 
text-overflow：ellipsis ； 當對象内文本溢出時顯示省略标記（...）
           

注意：

一定要首先強制一行内顯示，再次和overflow屬性 搭配使用

/*1. 先強制一行内顯示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
           

滑動門

作用：使各種特殊形狀的背景能夠自适應元素中文本内容的多少

核心技術：

利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能适應不同字數的導航欄。

一般的經典布局：

<li>
  <a href="#">
    <span>導航欄内容</span>
  </a>
</li>
           

1. a 設定 背景左側，padding撐開合适寬度
2. span 設定背景右側， padding撐開合适寬度 剩下由文字繼續撐開寬度
3. 之是以a包含span就是因為 整個導航都是可以點選的