HTML、CSS小技巧三——圖片、精靈圖、溢出文字省略號顯示、滑動門技術、margin負值、CSS三角形

去除圖片底側空白縫隙

產生原因：圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。

解決方法

1. 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。
2. 給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。

精靈圖（雪碧圖）

即將網頁中的一些背景圖像整合到一張大圖中（精靈圖)

有效地減少服務器接受和發送請求的次數，提高頁面的加載速度。

使用：
background_image、background-repeat、background-position(最重要)

.icon1 {
            margin: 100px auto;
            border: 1px solid #ccc;
            width: 23px;
            height: 23px;
            background: url(../images/index.png) no-repeat 0 -107px;
        }

溢出文字省略號顯示

三步：

1. 先強制一行內顯示文本 white-space: nowrap;
2. 超出的部分隱藏 overflow: hidden;
3. 文字用省略號替代超出的部分 text-overflow: ellipsis;

//html部分
<div class="w">
        溢出文字以省略號顯示
</div>
// CSS部分
.w {
            width: 100px;
            height: 20px;
            border: 1px solid red;
            //關鍵部分
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

滑動門技術

使各種特殊形狀的背景能夠自適應元素中文本內容的多少.

CSS精靈（主要是背景位置）+盒子padding撐開寬度
具體：
一般經典佈局如下

1. a 設置 背景左側（即控制左側門），padding撐開合適寬度。
2. span 設置背景右側（即控制右側門）， padding撐開合適寬度 剩下由文字繼續撐開寬度。
3. 之所以a包含span就是因爲 整個導航都是可以點擊的。

//html部分
<li>
  <a href="#">
    <span>內容</span>
  </a>
</li>

//css部分
* {
     margin: 0;
     padding: 0;
}
li {
     list-style: none;
}
a {
     text-decoration: none;
}
li {
      float: left;
      margin: 0 5px;
}
 a,
 a span {
      border-radius: 16px;
}
a {
       display: inline-block;
       height: 33px;
       //控制左邊門
       background: url(../images/to.png) no-repeat;
       padding-left: 15px;
       color: #fff;
       font-size: 14px;
}
a span {
       display: inline-block;
       height: 33px;
       line-height: 33px;
       // 控制右邊門
       background: url(../images/to.png) no-repeat right top;
       padding-right: 15px;
        }

效果：

margin負值

1、負邊距+定位：水平垂直居中；
2、盒子相鄰邊框合併防止出現邊框變粗的情況；

關鍵設置：
margin-left: -1px（這個值看盒子的邊框寬度而定）;
margin-top: -1px;

3、突出某個盒子邊框

可通過定位（position）解決。
position、z-index;

CSS三角形

1.寬度高度爲0;
2.我們4個邊框都要寫， 只保留需要的邊框顏色，其餘的不能省略，都改爲 transparent 透明就好了;
3.爲了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;

實現：

div {
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      border-style: solid;
      border-width: 50px 0px 50px 70px;
      border-color: transparent transparent transparent red;
        }