006：CSS高級技巧

目錄

 

前言

 

理論

CSS高級技巧

一：元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，咱們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，可是不在文檔源碼中刪除。 最多見的是網站廣告，當咱們點擊相似關閉不見了，可是咱們從新刷新頁面，它們又會出現和你玩躲貓貓！！

1：display 顯示

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

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

特色： 隱藏以後，再也不保留位置。

 

2： visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特色： 隱藏以後，繼續保留原有位置。（停職留薪）

 

3：overflow 溢出

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

visible : 　不剪切內容也不添加滾動條。

auto : 　 超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　無論超出內容否，老是顯示滾動條

 

二：CSS用戶界面樣式

 所謂的界面樣式， 就是更改一些用戶操做樣式， 好比 更改用戶的鼠標樣式， 表單輪廓等。可是好比滾動條的樣式改動受到了不少瀏覽器的抵制，所以咱們就放棄了。 防止表單域拖拽

 

1：鼠標樣式cursor

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

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本

 

 鼠標放我身上查看效果哦：

<ul>

  <li style="cursor:default">我是小白</li>

  <li style="cursor:pointer">我是小手</li>

  <li style="cursor:move">我是移動</li>

  <li style="cursor:text">我是文本</li>

</ul>

 儘可能不要用hand  由於 火狐不支持     pointer ie6以上都支持的儘可能用

 

2： 輪廓 outline

 是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

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

 可是咱們都不關心能夠設置多少，咱們平時都是去掉的。

 

最直接的寫法是 ：  outline: 0;   或者  outline: none;

 <input  type="text"  style="outline: 0;"/>

 

3： 防止拖拽文本域resize 

resize：none    這個單詞能夠防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。

右下角能夠拖拽：  

<textarea></textarea> 

右下角不能夠拖拽： 

<textarea  style="resize: none;"></textarea>

 

4：vertical-align 垂直對齊

之前咱們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

 之前咱們還講過讓文字居中對齊，是 text-align: center;

可是咱們歷來沒有講過有垂直居中的屬性， 咱們的媽媽一直很擔憂咱們的垂直居中怎麼作。

vertical-align 垂直對齊， 這個看上去很美好的一個屬性， 實際有着不可捉摸的脾氣，不然咱們也不會這麼晚來說解。 

vertical-align : baseline |top |middle |bottom 

設置或檢索對象內容的垂直對其方式。 

 vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， **一般用來控製圖片/表單與文字的對齊**。

 

 

4.1：圖片、表單和文字對齊

因此咱們知道，咱們能夠經過vertical-align 控制圖片和文字的垂直關係了。 默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

有個很重要特性你要記住： 圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會形成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：  

4.1.1:　　 給img vertical-align:middle | top等等。  讓圖片不要和基線對齊。<img src="media/1633.png"  width="500"  style="border: 1px dashed #ccc;" />

4.1.2:　　 給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>

 

五： 溢出的文字隱藏

5.1： white-space

white-space設置或檢索對象內文本顯示方式。一般咱們使用於強制一行顯示內容 

normal : 　默認處理方式

nowrap : 　強制在同一行內顯示全部文本，直到文本結束或者遭遇br標籤對象才換行。

能夠處理中文

 

5.2： text-overflow 文字溢出

text-overflow : clip | ellipsis

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

clip : 　不顯示省略標記（...），而是簡單的裁切 

ellipsis : 　當對象內文本溢出時顯示省略標記（...）

 

5.3：注意必定要首先強制一行內顯示，再次和overflow屬性  搭配使用

 

 

六：精靈技術產生的背景

當用戶訪問一個網站時，須要向服務器發送請求，網頁上的每張圖像都要通過一次請求才能展示給用戶。

然而，一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大下降頁面的加載速度。爲了有效地減小服務器接受和發送請求的次數，提升頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

 

6.1： 精靈技術本質

簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的全部零星背景圖像都集中到一張大圖中去，而後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像便可所有展現出來。一般狀況下，這個由不少小的背景圖像合成的大圖被稱爲精靈圖（雪碧圖），以下圖所示爲京東網站中的一個精靈圖。

 

6.2： 精靈技術的使用 

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素一般只須要精靈圖中不一樣位置的某個小圖，要想精肯定位到精靈圖中的某個小圖，就須要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

 

6.3： 製做精靈圖

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那咱們要作的，就是把小圖拼合成一張大圖上

大部分狀況下，精靈圖都是網頁美工作。

咱們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。

咱們精靈圖的寬度取決於最寬的那個背景。 

咱們能夠橫向擺放也能夠縱向擺放，可是每一個圖片之間，間隔至少隔開偶數像素合適。

在咱們精靈圖的最低端，留一片空隙，方便咱們之後添加其餘精靈圖。

結束語：   小公司，背景圖片不多的狀況，沒有必要使用精靈技術，維護成本過高。

若是是背景圖片比較多，能夠建議使用精靈技術。

 

七：滑動門

先來體會下現實中的滑動門,或者你能夠叫作推拉門：

 

 

7.1:  滑動門出現的背景

製做網頁時，爲了美觀，經常須要爲網頁元素設置特殊形狀的背景，好比微信導航欄，有凸起和凹下去的感受，最大的問題是裏面的字數不同多，咋辦？

 

爲了使各類特殊形狀的背景可以自適應元素中文本內容的多少，出現了CSS滑動門技術。它重新的角度構建頁面，使各類特殊形狀的背景可以自由拉伸滑動，以適應元素內部的文本內容，可用性更強。 最多見於各類導航欄的滑動門。

 

7.2:　 核心技術

核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不一樣字數的導航欄。

通常的經典佈局都是這樣的：

<li>

  <a href="#">

    <span>導航欄內容</span>

  </a>

</li>

總結： 

1. a 設置 背景左側，padding撐開合適寬度。    

2. span 設置背景右側， padding撐開合適寬度 剩下由文字繼續撐開寬度。

3. 之因此a包含span就是由於 整個導航都是能夠點擊的。

 

 

 

實踐