CSS進階技巧
目标
- 了解
- 能說出元素顯示隐藏最常見的寫法
- 能說出精靈圖産生的目的
- 能說出去除圖檔底側空白縫隙的方法
- 應用
- 能寫出最常見的滑鼠樣式
- 能使用精靈圖技術
- 能用滑動門做導航欄案例
1. 元素的顯示與隐藏
-
目的
讓一個元素在頁面中消失或者顯示出來
-
場景
類似網站廣告，當我們點選關閉就不見了，但是我們重新重新整理頁面，會重新出現！
1.1 display 顯示（重點）
- display 設定或檢索對象是否及如何顯示。
display: none 隐藏對象
display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。 - 特點： 隐藏之後，不再保留位置。
實際開發場景：
配合後面js做特效，比如下拉菜單，原先沒有，滑鼠經過，顯示下拉菜單， 應用極為廣泛
1.2 visibility 可見性 (了解)
- 設定或檢索是否顯示對象。
visibility：visible ; 對象可視
visibility：hidden; 對象隐藏 - 特點： 隐藏之後，繼續保留原有位置。（停職留薪）
1.3 overflow 溢出(重點)
- 檢索或設定當對象的内容超過其指定高度及寬度時如何管理内容。
| 屬性值 | 描述 |
| visible | 不剪切内容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
實際開發場景：
- 清除浮動
- 隐藏超出内容，隐藏掉, 不允許内容超過父盒子。
1.4 顯示與隐藏總結
| 屬性 | 差別 | 用途 |
| display | 隐藏對象，不保留位置 | 配合後面js做特效，比如下拉菜單，原先沒有，滑鼠經過，顯示下拉菜單， 應用極為廣泛 |
| visibility | 隐藏對象，保留位置 | 使用較少 |
| overflow | 隻是隐藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子裡面的内容不會超出該盒子範圍 |
2. CSS使用者界面樣式
- 所謂的界面樣式， 就是更改一些使用者操作樣式，以便提高更好的使用者體驗。
- 更改使用者的滑鼠樣式 (滾動條因為相容性非常差，我們不研究)
- 表單輪廓等。
- 防止表單域拖拽
2.1 滑鼠樣式cursor
設定或檢索在對象上移動的滑鼠指針采用何種系統預定義的光标形狀。
| 屬性值 | 描述 |
| default | 小白 預設 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
滑鼠放我身上檢視效果哦：
<ul>
<listyle="cursor:default">我是小白</li>
<listyle="cursor:pointer">我是小手</li>
<listyle="cursor:move">我是移動</li>
<listyle="cursor:text">我是文本</li>
<listyle="cursor:not-allowed">我是文本</li>
</ul> 2.2 輪廓線 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
outline : 但是我們都不關心可以設定多少，我們平時都是去掉的。 li
最直接的寫法是 ： outline: 0; 或者 outline: none;
<input type="text"style="outline: 0;"/> 2.3 防止拖拽文本域resize
實際開發中，我們文本域右下角是不可以拖拽：
<textareastyle="resize: none;"></textarea> 2.4 使用者界面樣式總結
| 屬性 | 用途 | 用途 |
| 滑鼠樣式 | 更改滑鼠樣式cursor | 樣式很多，重點記住 pointer |
| 輪廓線 | 表單預設outline | outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用 |
| 防止拖拽 | 主要針對文本域resize | 防止使用者随意拖拽文本域，造成頁面布局混亂，我們resize:none |
3. vertical-align 垂直對齊
- 有寬度的塊級元素居中對齊，是margin: 0 auto;
- 讓文字居中對齊，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性。
vertical-align 垂直對齊，它隻針對于行内元素或者行内塊元素，
vertical-align : 設定或檢索對象内容的垂直對其方式。
-
注意：
vertical-align 不影響塊級元素中的内容對齊，它隻針對于行内元素或者行内塊元素，
特别是行内塊元素，通常用來控制圖檔/表單與文字的對齊。
3.1 圖檔、表單和文字對齊
是以我們知道，我們可以通過vertical-align 控制圖檔和文字的垂直關系了。 預設的圖檔會和文字基線對齊。
3.2 去除圖檔底側空白縫隙
-
原因：
圖檔或者表單等行内塊元素，他的底線會和父級盒子的基線對齊。
就是圖檔底側會有一個空白縫隙。
- 解決的方法就是：
- 給img vertical-align:middle | top| bottom等等。 讓圖檔不要和基線對齊。
-
- 給img 添加 display：block; 轉換為塊級元素就不會存在問題了。
4. 溢出的文字省略号顯示
4.1 white-space
- white-space設定或檢索對象内文本顯示方式。通常我們使用于強制一行顯示内容
white-space:normal ；預設處理方式
white-space:nowrap ； 強制在同一行内顯示所有文本，直到文本結束或者遭遇br标簽對象才換行。 4.2 text-overflow 文字溢出
- 設定或檢索是否使用一個省略标記（…）标示對象内文本的溢出
text-overflow : clip ；不顯示省略标記（...），而是簡單的裁切
text-overflow：ellipsis ； 當對象内文本溢出時顯示省略标記（...） 注意：
一定要首先強制一行内顯示，再次和overflow屬性 搭配使用
4.3 總結三步曲
/*1. 先強制一行内顯示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis; 5. CSS精靈技術（sprite) 重點
5.1 為什麼需要精靈技術
圖所示為網頁的請求原理圖，當使用者通路一個網站時，需要向伺服器發送請求，網頁上的每張圖像都要經過一次請求才能展現給使用者。
然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，伺服器就會頻繁地接受和發送請求，這将大大降低頁面的加載速度。
pink老師告訴你我們為什麼需要精靈技術：
為了有效地減少伺服器接受和發送請求的次數，提高頁面的加載速度。
出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
5.2 精靈技術講解
CSS 精靈其實是将網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常隻需要精靈圖中不同位置的某個小圖，要想精确定位到精靈圖中的某個小圖。
這樣，當使用者通路該頁面時，隻需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。
我們需要使用CSS的
- background-image、
- background-repeat
- background-position屬性進行背景定位，
- 其中最關鍵的是使用background-position 屬性精确地定位。
5.3 精靈技術使用的核心總結
首先我們知道，css精靈技術主要針對于背景圖檔，插入的圖檔img 是不需要這個技術的。
- 精确測量，每個小背景圖檔的大小和 位置。
- 給盒子指定小背景圖檔時， 背景定位基本都是 負值。
5.4 制作精靈圖(了解)
CSS 精靈其實是将網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下，精靈圖都是網頁美工做。
我們精靈圖上放的都是小的裝飾性質的背景圖檔。 插入圖檔不能往上放。
我們可以橫向擺放也可以縱向擺放，但是每個圖檔之間留有适當的空隙
在我們精靈圖的最低端，留一片空隙，友善我們以後添加其他精靈圖。 結束語： 小公司，背景圖檔很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖檔比較多，可以建議使用精靈技術。
6. 滑動門
先來體會下現實中的滑動門,或者你可以叫做推拉門：
滑動門出現的背景
制作網頁時，為了美觀，常常需要為網頁元素設定特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，最大的問題是裡面的字數不一樣多，咋辦？
為了使各種特殊形狀的背景能夠自适應元素中文本内容的多少，出現了CSS滑動門技術。它從新的角度建構頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以适應元素内部的文本内容，可用性更強。 最常見于各種導航欄的滑動門。
http://weixin.qq.com/
核心技術
核心技術就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能适應不同字數的導航欄。
一般的經典布局都是這樣的：
<li>
<a href="#">
<span>導航欄内容</span>
</a>
</li> css樣式
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
} 總結：
- a 設定 背景左側，padding撐開合适寬度。
- span 設定背景右側， padding撐開合适寬度 剩下由文字繼續撐開寬度。
- 之是以a包含span就是因為 整個導航都是可以點選的。
7. 拓展@
7.1 margin負值之美
1). 負邊距+定位：水準垂直居中
咱們前面講過， 一個絕對定位的盒子， 利用 父級盒子的 50%， 然後 往左(上) 走 自己寬度的一半 ，可以實作盒子水準垂直居中。
2). 壓住盒子相鄰邊框
7.2 CSS三角形之美
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
} - 我們用css 邊框可以模拟三角效果
- 寬度高度為0
- 我們4個邊框都要寫， 隻保留需要的邊框顔色，其餘的不能省略，都改為 transparent 透明就好了
- 為了照顧相容性 低版本的浏覽器，加上 font-size: 0; line-height: 0;