CSS高級技巧
目標
- 理解
- 能說出元素顯示隱藏最常見的寫法
- 能說出精靈圖產(chǎn)生的目的
- 能說出去除圖片底側空白縫隙的方法
- 應用
- 能寫出最常見的鼠標樣式
- 能使用精靈圖技術
- 能用滑動門做導航欄案例
1. 元素的顯示與隱藏
-
目的
讓一個元素在頁面中消失或者顯示出來
-
場景
類似網(wǎng)站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現(xiàn)！
1.1 display 顯示（重點）
-
display 設置或檢索對象是否及如何顯示。
display: none 隱藏對象 display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。 特點： 隱藏之后，不再保留位置。
實際開發(fā)場景：
配合后面js做特效，比如下拉菜單，原先沒有，鼠標經(jīng)過，顯示下拉菜單， 應用極為廣泛
1.2 visibility 可見性 (了解)
-
設置或檢索是否顯示對象。
visibility：visible ; 對象可視 visibility：hidden; 對象隱藏 特點： 隱藏之后，繼續(xù)保留原有位置。（停職留薪）
1.3 overflow 溢出(重點)
- 檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
實際開發(fā)場景：
- 清除浮動
- 隱藏超出內容，隱藏掉, 不允許內容超過父盒子。
1.4 顯示與隱藏總結
| 屬性 | 區(qū)別 | 用途 |
|---|---|---|
| display | 隱藏對象，不保留位置 | 配合后面js做特效，比如下拉菜單，原先沒有，鼠標經(jīng)過，顯示下拉菜單， 應用極為廣泛 |
| visibility | 隱藏對象，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子里面的內容不會超出該盒子范圍 |
2. CSS用戶界面樣式
- 所謂的界面樣式， 就是更改一些用戶操作樣式，以便提高更好的用戶體驗。
- 更改用戶的鼠標樣式 (滾動條因為兼容性非常差，我們不研究)
- 表單輪廓等。
- 防止表單域拖拽
2.1 鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀。
| 屬性值 | 描述 |
|---|---|
| default | 小白 默認 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
鼠標放我身上查看效果哦：
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
2.2 輪廓線 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設置多少，我們平時都是去掉的。 li
最直接的寫法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
2.3 防止拖拽文本域resize
<img src='./media/34textarea.png'>
實際開發(fā)中，我們文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
2.4 用戶界面樣式總結
| 屬性 | 用途 | 用途 |
|---|---|---|
| 鼠標樣式 | 更改鼠標樣式cursor | 樣式很多，重點記住 pointer |
| 輪廓線 | 表單默認outline | outline 輪廓線，我們一般直接去掉，border是邊框，我們會經(jīng)常用 |
| 防止拖拽 | 主要針對文本域resize | 防止用戶隨意拖拽文本域，造成頁面布局混亂，我們resize:none |
3. vertical-align 垂直對齊
- 有寬度的塊級元素居中對齊，是margin: 0 auto;
- 讓文字居中對齊，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性。
vertical-align 垂直對齊，它只針對于行內元素或者行內塊元素，
<img src="media/xian.jpg" />
vertical-align : baseline |top |middle |bottom
設置或檢索對象內容的垂直對其方式。
-
注意：
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 為什么需要精靈技術
圖所示為網(wǎng)頁的請求原理圖，當用戶訪問一個網(wǎng)站時，需要向服務器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶。
然而，一個網(wǎng)頁中往往會應用很多小的背景圖像作為修飾，當網(wǎng)頁中的圖像過多時，服務器就會頻繁地接受和發(fā)送請求，這將大大降低頁面的加載速度。
為什么需要精靈技術：
為了有效地減少服務器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度。
出現(xiàn)了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
5.2 精靈技術講解
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。
我們需要使用CSS的
- background-image、
- background-repeat
- background-position屬性進行背景定位，
- 其中最關鍵的是使用background-position 屬性精確地定位。
5.3 精靈技術使用的核心總結
首先我們知道，css精靈技術主要針對于背景圖片，插入的圖片img 是不需要這個技術的。
- 精確測量，每個小背景圖片的大小和 位置。
- 給盒子指定小背景圖片時， 背景定位基本都是 負值。
5.4 制作精靈圖(了解)
CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下，精靈圖都是網(wǎng)頁美工做。
我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間留有適當?shù)目障?在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。
結束語： 小公司，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。
6. 滑動門
先來體會下現(xiàn)實中的滑動門,或者你可以叫做推拉門：
滑動門出現(xiàn)的背景
制作網(wǎng)頁時，為了美觀，常常需要為網(wǎng)頁元素設置特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，最大的問題是里面的字數(shù)不一樣多，咋辦？
為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現(xiàn)了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。 最常見于各種導航欄的滑動門。
核心技術
核心技術就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應不同字數(shù)的導航欄。
一般的經(jīng)典布局都是這樣的：
<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撐開合適寬度 剩下由文字繼續(xù)撐開寬度。
- 之所以a包含span就是因為 整個導航都是可以點擊的。
7. 拓展@
7.1 margin負值之美
1). 負邊距+定位：水平垂直居中
咱們前面講過， 一個絕對定位的盒子， 利用 父級盒子的 50%， 然后 往左(上) 走 自己寬度的一半 ，可以實現(xiàn)盒子水平垂直居中。
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 三角是怎么來的了, 做法如下：
- 我們用css 邊框可以模擬三角效果
- 寬度高度為0
- 我們4個邊框都要寫， 只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了
- 為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;
