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;
        }