CSS高级技巧

一、精灵图

1. 主要针对背景图片，插入的图片img是不需要这个技术的
2. 减少服务器的接受和发送请求的次数，提高页面加载的速度
3. 把小图像合成到一张大图上，每次使用时，用css背景定位让每个相应的图标显示出来

我们需要使用CSS的:

• background-image、

• background-repeat

• background-position属性进行背景定位，

其中最关键的是使用background-position 属性精确地定位。

二、字体图标

1.下载

• http://icomoon.io
• http://www.iconfont.cn

2.引用

• 把解压后的font文件夹放在网页根目录下
• 复制字体声明代码到CSS中
• 打开demo网页，在里面负责所需要图标的小方框到html中
• 给标签指定同一个字体

3.追加

• 在网站导入json文件
• 添加新图标然后下载
• 去覆盖原来的文件

三、CSS三角

原理：

写一个宽高为零的盒子，把盒子的边框写大点并添加不同的颜色，就会看到

把任意三边border改为透明就会得到一个三角形

代码：

    .box {
        width: 0px;
        height: 0px;
        font-size: 0;   /*照顾兼容性*/
        line-height: 0; /*照顾兼容性*/
        border-top: 50px solid transparent;
        border-bottom-color: orange;
    }

四、CSS用户界面样式

1.鼠标样式cursor

属性值	描述
default	小白  默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.轮廓线outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0;   或者   outline: none

3.防止文本域拖拽resize

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

五、垂直对齐vertical-align: middle

• 有宽度的块级元素居中对齐，是margin: 0 auto;

• 让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」

六、清除图片底部空白缝隙

空白缝隙是因为行内块元素默认与文字的基线baseline对齐

那么有两个解决方案

1. 让img和底线对齐vertical-align: middle;
2. 把img转换为块级元素display: block;

七、溢出的文字省略号显示

1.单行文本溢出

1. white-space:nowrap;        强制一行
2. overflow: hidden;        溢出隐藏
3. text-overflow: ellipsis;        省略号代替

2.多行文本溢出

div {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 显示文本的行数 */
  -webkit-line-clamp: 2;
  /* 排列方式为垂直居中 */
  -webkit-box-orient: verical;
}

一般是用JavaScript或者后台人员来实现

八、布局技巧

1.margin负值巧妙运用

浮动的有边框的盒子中间的边框是有1+1=2的情况

用margin: -1px使盒子边框重叠从而实现1+1=1

如果要实现鼠标放上去显示边框，有一边会被压住

解决方法：

1. 给盒子加相对定位
2. 如果盒子本身就有定位，就提高盒子的层级

2.文字围绕浮动元素

图片和文字在同一个容器里，只给图片加上浮动，文字不会被压住

3.行内块巧妙运用

行内块每个元素中间有间隔，加一个text-align: center;就可以实现居中

主要运用在底部页码

4.三角强化

.box {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-color: transparent red transparent transparent;
    border-width: 50px 100px 0 0;
    border-style: solid;
}

5.CSS初始化

为了消除不同浏览器对html的影响

京东初始化代码

* {
      margin: 0;
      padding: 0;
  }

  em,
  i {
    /* 清除斜体 */
      font-style: normal;
  }

  li {
      list-style: none;
  }

  img {
      /* 为了兼容低版本浏览器，否则在图片上有链接的话会出现边框(和图片周围文字一个原理) */
      border: 0;
      vertical-align: middle;
  }

  button {
      /* 否则button上不会出现小手 */
      cursor: pointer;
  }

  a {
      color: #666;
      text-decoration: none;
  }

  a:hover {
      color: #c81623;
  }

  button,
  input {
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
      /* \5B8B\4F53 的意思是宋体，写汉字的话容易出现乱码 */
  }

  body {
      -webkit-font-smoothing: antialiased;
      background-color: #fff;
      font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
      color: #666;
  }

  .hide,
  .none {
      display: none;
      /* 隐藏 */
  }

  /* 清除浮动 */
  .clearfix:after {
      visibility: hidden;
      clear: both;
      display: block;
      content: ".";
      height: 0;
  }

  .clearfix {
      *zoom: 1;
  }