1.vertical-align 垂直對齊
1. 有寬度的塊級元素居中對齊，時margin：0 auto
2. 讓文字居中對齊，是text-align：center；
但是我們從來沒有講過有垂直居中的屬性
vertical-align垂直對齊，他只針對於行內元素或行內塊元素，
vertical-align ：baseline |top |middle |bottom
設置或檢索對象內容的垂直對齊方式。
注意：
vertical-align 不影響塊級元素中的內容對齊，他只針對於行內元素或者行內塊元素
特別是行內元素，通常用來控制圖片/表單與文字的對齊。
1 圖片、表單和文字對齊
所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關係了。默認的圖片會和文字基線對齊。
2 去除圖片底測空白縫隙
原因：
圖片或者表單等行內塊元素，它的底線和父級盒子的基線對齊。
就是圖片底側會有一個空白縫隙。
解決方法就是：
給img vertical-align：middle | top等等。讓圖片不要和基線對齊。
給img添加 display：block；轉換爲塊級元素就不會存在問題了。
2.溢出的文字 省略號顯示
1 white-space
white-space設置或檢索對象內文本顯示方式。通常我們便用於強制一行顯示內容。
white-space：normal ； 默認處理方式
white-space：nowrap ； 強制在同一行內顯示所有文本，指導文本結束或者遭遇br標籤對象才換行。
2 text-overflow 文字溢出
設置或檢索是否使用一個省略標記（...），標示對象內文本的溢出
text-ooverflow ： clip ； 不顯示省略標記（...），而是簡單的裁切
text-overflow ： ellipsis ; 當對象內文本溢出時顯示省略標記 （...）
注意：
一定要首先強制一行內顯示，再次和overflow屬性 搭配使用。
3 總結三部曲
/*1. 先強制一行內顯示文本*/
white-space：nowrap；
/*2. 超出的部分隱藏*/
overflow：hidden；
/*3. 文字用省略號替代超出的部分*/
text-overflow：ellipsis；
案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溢出的文字省略號顯示</title>
<style>
div{
width: 150px;
height: 30px;
border: 1px solid peachpuff;
/*當文字顯示不開的時候，自動換行*/
/* white-space: normal;*/
/*1. 要文字強制一行內顯示 除非遇到br*/
white-space: nowrap;
/*2. 溢出隱藏*/
overflow: hidden;
/*文字溢出 用省略號替代*/
/*text-overflow: clip;*/
/*ellipsis 省略號*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>哈哈哈哈哈哈哈啊哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈啊哈</div>
</body>
</html>
網頁示例圖：
css精靈技術（sprite）重點
1 爲什麼需要精靈技術
圖所示爲網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像
都要經過一次請求才能展現給用戶。
然而，一個網頁中往往會應用很多小的背景圖像作爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送
請求，這將大大降低頁面的加載速度。
老師告訴你我們爲什麼需要精靈技術：
爲了有效的減少服務器接受和發送請求的次數，提高頁面的加載速度。
出現了css精靈技術（也稱CSS Sprites、css雪碧）。
2 精靈技術講解
css精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中
不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。
這樣，當用戶訪問該頁面時，只需向服務器發送一次請求，網頁中的背景圖像即可全部展示出來。
我們需要使用CSS的：
background-image
background-repeat
background-position 屬性進行背景定位，
其中最關鍵的是使用background-position 屬性精確的定位。
3 精靈技術使用的核心總結
首先我們知道，css精靈技術主要針對於背景圖片，插入的圖片img是不需要這個技術的。
1. 精確測量，每個小背景圖片的大小和位置。
2. 給盒子指定小背景圖片時，背景定位基本都是負值。
4 製作精靈圖
css精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的是，就是把小圖片合成一張大圖。
大部分情況下，精靈圖都是網頁美工做。
我們精靈圖上放的都是小的裝飾性質的背景圖片，插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。
在我們精靈圖的最低端。留一片空隙，方便我們以後添加其他精靈圖。
結束語：
小公司，背景圖片很少的情況，沒有必要使用精靈圖技術，維護成本太高，
如果是背景圖片比較多，可以建議使用精靈技術。