前端學習之CSS——用戶界面樣式

什麼是界面樣式

所謂的界面樣式，就是更改一些用戶操做樣式，以便提升更好的用戶體驗。

• 更改用戶的鼠標樣式
• 表單輪廓
• 防止表單域拖拽

一、鼠標樣式 cursor

li {
 	cursor: pointer; 
 }

設置或檢索在對象上移動的鼠標指針採用何種系統預約義的光標形狀。

二、輪廓線 outline

給表單添加 outline: 0; 或者 outline: none;樣式以後，就能夠去掉默認的藍色邊框。

input {
 	outline: none; 
 }

三、防止拖拽文本域 resize

實際開發中，咱們文本域右下角是不能夠拖拽的。

textarea{ 
 	resize: none;
 }

四、 vertical-align 屬性應用

CSS 的 vertical-align 屬性使用場景： 常常用於設置圖片或者表單(行內塊元素）和文字垂直對齊。

官方解釋： 用於設置一個元素的垂直對齊方式，可是它只針對於行內元素或者行內塊元素有效。

語法：

vertical-align : baseline | top | middle | bottom

4.1 圖片、表單和文字對齊

圖片、表單都屬於行內塊元素，默認的 vertical-align 是基線對齊。此時能夠給圖片、表單這些行內塊元素的 vertical-align 屬性設置爲 middle 就可讓文字和圖片垂直居中對齊了。

4.2 解決圖片底部默認空白縫隙問題

bug：圖片底側會有一個空白縫隙，緣由是行內塊元素會和文字的基線對齊。

主要解決方法有兩種：

1. 給圖片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2. 把圖片轉換爲塊級元素 display: block;

五、溢出的文字省略號顯示

5.1 單行文本溢出顯示省略號

單行文本溢出顯示省略號–必須知足三個條件：

/*1. 先強制一行內顯示文本*/
   white-space: nowrap;  （ 默認 normal 自動換行）
   
  /*2. 超出的部分隱藏*/
   overflow: hidden;
   
  /*3. 文字用省略號替代超出的部分*/
   text-overflow: ellipsis;

5.2 多行文本溢出顯示省略號

多行文本溢出顯示省略號，有較大兼容性問題，適合於webKit瀏覽器或移動端（移動端大部分是webkit內核）

/*1. 超出的部分隱藏 */
overflow: hidden;

/*2. 文字用省略號替代超出的部分 */
text-overflow: ellipsis;

/* 3. 彈性伸縮盒子模型顯示 */
display: -webkit-box;

/* 4. 限制在一個塊元素顯示的文本的行數 */
-webkit-line-clamp: 2;

/* 5. 設置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推薦讓後臺人員來作這個效果，由於後臺人員能夠設置顯示多少個字，操做更簡單。

6. 元素的顯示與隱藏

• 目的（本質）：讓一個元素在頁面中消失或者顯示出來

• 場景：相似網站廣告，當咱們點擊關閉就不見了，可是咱們從新刷新頁面，會從新出現！

6.1 display 顯示

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

  display: none 隱藏對象
  
  display：block 除了轉換爲塊級元素以外，同時還有顯示元素的意思。

• 特色： display 隱藏元素後，再也不佔有原來的位置。

• 後面應用及其普遍，搭配 JS 能夠作不少的網頁特效。實際開發場景：
  配合後面js作特效，好比下拉菜單，原先沒有，鼠標通過，顯示下拉菜單， 應用極爲普遍

6.2 visibility 可見性

• visibility 屬性用於指定一個元素應可見仍是隱藏。

  visibility：visible ; 　元素可視
  
  visibility：hidden; 　  元素隱藏

• 特色：visibility 隱藏元素後，繼續佔有原來的位置。（停職留薪）

• 若是隱藏元素想要原來位置， 就用 visibility：hidden

• 若是隱藏元素不想要原來位置， 就用 display：none (用處更多 重點）

6.3 overflow 溢出

• overflow 屬性指定了若是內容溢出一個元素的框（超過其指定高度及寬度） 時，會發生什麼。

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

• 通常狀況下，咱們都不想讓溢出的內容顯示出來，由於溢出的部分會影響佈局。
• 可是若是有定位的盒子， 請慎用overflow:hidden 由於它會隱藏多餘的部分。

• 實際開發場景：

1. 清除浮動
2. 隱藏超出內容，隱藏掉, 不容許內容超過父盒子。

6.4 顯示與隱藏總結

屬性	區別	用途
display 顯示 （重點）	隱藏對象，不保留位置	配合後面js作特效，好比下拉菜單，原先沒有，鼠標通過，顯示下拉菜單， 應用極爲普遍
visibility 可見性 （瞭解）	隱藏對象，保留位置	使用較少
overflow 溢出（重點）	只是隱藏超出大小的部分	1. 能夠清除浮動 2. 保證盒子裏面的內容不會超出該盒子範圍