學(xué)習(xí)目標(biāo)

• 理解

  • 能說出元素顯示隱藏最常見的寫法
  • 能說出精靈圖產(chǎn)生的目的
  • 能說出去除圖片底側(cè)空白縫隙的方法

• 應(yīng)用

  • 能寫出最常見的鼠標(biāo)樣式
  • 能使用精靈圖技術(shù)
  • 能用滑動門做導(dǎo)航欄案例

1. 元素的顯示與隱藏

• 目的

  讓一個元素在頁面中消失或者顯示出來

• 場景

  類似網(wǎng)站廣告罕偎，當(dāng)我們點擊關(guān)閉就不見了，但是我們重新刷新頁面，會重新出現(xiàn)！

1.1 display 顯示（重點）

• display 設(shè)置或檢索對象是否及如何顯示拦赠。

  display: none /* 隱藏對象 */
  
  display：block /* 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思碑宴。*/
  

• 特點： 隱藏之后梗肝，不再保留位置。

實際開發(fā)場景：

配合后面js做特效航背，比如下拉菜單喉悴，原先沒有，鼠標(biāo)經(jīng)過玖媚，顯示下拉菜單箕肃， 應(yīng)用極為廣泛

1.2 visibility 可見性（了解）

• 設(shè)置或檢索是否顯示對象。

  visibility：visible ; 　對象可視
  
  visibility：hidden; 　  對象隱藏
  

• 特點： 隱藏之后最盅，繼續(xù)保留原有位置突雪。（停職留薪）

1.3 overflow 溢出（重點）

• 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。

實際開發(fā)場景：

1. 清除浮動
2. 隱藏超出內(nèi)容问词，隱藏掉, 不允許內(nèi)容超過父盒子督函。

1.4 顯示與隱藏總結(jié)

2. CSS 用戶界面樣式

• 所謂的界面樣式薄湿， 就是更改一些用戶操作樣式叫倍，以便提高更好的用戶體驗偷卧。
  • 更改用戶的鼠標(biāo)樣式 （滾動條因為兼容性非常差，我們不研究)）
  • 表單輪廓等吆倦。
  • 防止表單域拖拽

2.1 鼠標(biāo)樣式 cursor

設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀听诸。

鼠標(biāo)放我身上查看效果哦：

<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 

但是我們都不關(guān)心可以設(shè)置多少，我們平時都是去掉的须妻。

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

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

2.3 防止拖拽文本域 resize

實際開發(fā)中仔蝌，我們文本域右下角是不可以拖拽：

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

2.4 用戶界面樣式總結(jié)

3. vertical-align 垂直對齊

• 有寬度的塊級元素居中對齊，是 margin: 0 auto;
• 讓文字居中對齊动知，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性皿伺。

vertical-align 垂直對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素

vertical-align : baseline |top |middle |bottom 

設(shè)置或檢索對象內(nèi)容的垂直對其方式盒粮。

• 注意：

vertical-align 不影響塊級元素中的內(nèi)容對齊鸵鸥，它只針對于行內(nèi)元素或者行內(nèi)塊元素，

特別是行內(nèi)塊元素丹皱，通常用來控制圖片/表單與文字的對齊妒穴。

3.1 圖片、表單和文字對齊

所以我們知道摊崭，我們可以通過 vertical-align 控制圖片和文字的垂直關(guān)系了讼油。 默認(rèn)的圖片會和文字基線對齊。

基線對齊

對齊模式

3.2 去除圖片底側(cè)空白縫隙

• 原因：

  圖片或者表單等行內(nèi)塊元素呢簸，他的底線會和父級盒子的基線對齊矮台。

  就是圖片底側(cè)會有一個空白縫隙。

• 解決的方法就是：

  • 給 img vertical-align:middle | top| bottom 等等根时。 讓圖片不要和基線對齊瘦赫。
    

  • 給 img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了。
    

4. 溢出的文字省略號顯示

4.1 white-space

• white-space 設(shè)置或檢索對象內(nèi)文本顯示方式蛤迎。通常我們使用于強(qiáng)制一行顯示內(nèi)容

white-space: normal; /* 默認(rèn)處理方式 */

white-space: nowrap; /* 強(qiáng)制在同一行內(nèi)顯示所有文本确虱，直到文本結(jié)束或者遭遇 br 標(biāo)簽對象才換行。*/

4.2 text-overflow 文字溢出

• 設(shè)置或檢索是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出

text-overflow: clip; /* 不顯示省略標(biāo)記（...）替裆，而是簡單的裁切 */

text-overflow: ellipsis; /* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）*/

注意：

一定要首先強(qiáng)制一行內(nèi)顯示蝉娜，再次和 overflow 屬性搭配使用

4.3 總結(jié)三步曲

  /* 1. 先強(qiáng)制一行內(nèi)顯示文本 */
  white-space: nowrap;
  /* 2. 超出的部分隱藏 */
  overflow: hidden;
  /* 3. 文字用省略號替代超出的部分 */
  text-overflow: ellipsis;

5. CSS 精靈技術(shù)（sprite）重點

5.1 為什么需要精靈技術(shù)

圖所示為網(wǎng)頁的請求原理圖唱较，當(dāng)用戶訪問一個網(wǎng)站時扎唾，需要向服務(wù)器發(fā)送請求召川，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶。

然而胸遇，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾荧呐，當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接受和發(fā)送請求纸镊，這將大大降低頁面的加載速度倍阐。

為什么需要精靈技術(shù)：

為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度逗威。

出現(xiàn)了 CSS 精靈技術(shù)（也稱 CSS Sprites峰搪、CSS 雪碧）。

5.2 精靈技術(shù)講解

CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）凯旭，然而概耻，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖罐呼。

這樣鞠柄，當(dāng)用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求嫉柴，網(wǎng)頁中的背景圖像即可全部展示出來厌杜。

我們需要使用 CSS 的

• background-image、background-repeat计螺、background-position 屬性進(jìn)行背景定位夯尽，其中最關(guān)鍵的是使用 background-position 屬性精確地定位。

5.3 精靈技術(shù)使用的核心總結(jié)

首先我們知道登馒，css 精靈技術(shù)主要針對于背景圖片匙握，插入的圖片 img 是不需要這個技術(shù)的。

1. 精確測量谊娇，每個小背景圖片的大小和位置肺孤。
2. 給盒子指定小背景圖片時，背景定位基本都是負(fù)值济欢。

5.4 制作精靈圖（了解）

CSS 精靈其實是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）赠堵，那我們要做的，就是把小圖拼合成一張大圖法褥。

大部分情況下茫叭，精靈圖都是網(wǎng)頁美工做。

我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片半等。 插入圖片不能往上放揍愁。
我們可以橫向擺放也可以縱向擺放呐萨，但是每個圖片之間留有適當(dāng)?shù)目障丁?br> 在我們精靈圖的最低端，留一片空隙莽囤，方便我們以后添加其他精靈圖谬擦。

結(jié)束語：小公司，背景圖片很少的情況朽缎，沒有必要使用精靈技術(shù)惨远，維護(hù)成本太高。如果是背景圖片比較多话肖，可以建議使用精靈技術(shù)北秽。

6. 滑動門

先來體會下現(xiàn)實中的滑動門,或者你可以叫做推拉門：

滑動門

滑動門出現(xiàn)的背景

制作網(wǎng)頁時，為了美觀最筒，常常需要為網(wǎng)頁元素設(shè)置特殊形狀的背景贺氓，比如微信導(dǎo)航欄，有凸起和凹下去的感覺床蜘，最大的問題是里面的字?jǐn)?shù)不一樣多辙培，咋辦？

為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少悄泥，出現(xiàn)了 CSS 滑動門技術(shù)虏冻。它從新的角度構(gòu)建頁面，使各種特殊形狀的背景能夠自由拉伸滑動弹囚，以適應(yīng)元素內(nèi)部的文本內(nèi)容厨相，可用性更強(qiáng)。 最常見于各種導(dǎo)航欄的滑動門鸥鹉。

http://weixin.qq.com/

核心技術(shù)

核心技術(shù)就是利用 CSS 精靈（主要是背景位置）和 盒子 padding 撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄蛮穿。

一般的經(jīng)典布局都是這樣的：

<li>
  <a href="#">
    <span>導(dǎo)航欄內(nèi)容</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);
    }

總結(jié)：

1. a 設(shè)置背景左側(cè)，padding撐開合適寬度毁渗。
2. span 設(shè)置背景右側(cè)践磅，padding 撐開合適寬度，剩下由文字繼續(xù)撐開寬度灸异。
3. 之所以 a 包含 span 就是因為整個導(dǎo)航都是可以點擊的府适。

7. 拓展

7.1 margin 負(fù)值之美

1). 負(fù)邊距+定位：水平垂直居中

咱們前面講過， 一個絕對定位的盒子肺樟， 利用 父級盒子的 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 三角是怎么來的了，做法如下：

1. 我們用 css 邊框可以模擬三角效果
2. 寬度高度為 0
3. 我們 4 個邊框都要寫，只保留需要的邊框顏色俐巴，其余的不能省略骨望，都改為 transparent 透明就好了
4. 為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;