css高级技巧--前端如此简单

---

## 1.CSS 高级技巧

1.1精灵图

CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

原理:将网页中的一些小背景图像整合到一张大图中 ，这样减少服务器接收和发送请求的次数，提高页面的加载速度,服务器只需要一次请求就可以了。

精灵图的使用：

1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现—background-position 。
3. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

1.2 字体图标

字体图标:展示的是图标，本质属于字体。

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
• 兼容性：几乎支持所有的浏览器，请放心使用。

字体图标使用：

1. 字体图标的下载

   推荐下载网站：

   • icomoon 字库 http://icomoon.io （国外服务器，打开网速较慢）。
   • 阿里 iconfont 字库 http://www.iconfont.cn/ （免费）

2. 字体图标的引入 （引入到我们html页面中）

   ①. 把下载包里面的 fonts 文件夹放入页面根目录下（下载完毕之后，注意原先的文件不要删，后面会用。）

      不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
      TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器
      有IE9+、Firefox3.5+、 Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
      
      Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有
      IE9+、Firefox3.5+、Chrome6+、 Safari3.6+、Opera11.1+；
      
      Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
      
      SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有
      Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

②. 在 CSS 样式中全局声明字体： 就是把这些字体文件通过css引入到我们页面中。

     /* url 中路径要写对*/
      @font-face {    
      font-family: 'icomoon';
      src:	url('fonts/icomoon.eot?7kkyc2');  
      src:	url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
         url('fonts/icomoon.ttf?7kkyc2') format('truetype'), 
       url('fonts/icomoon.woff?7kkyc2') format('woff'), 
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;  font-style: normal;
      }

③.html 标签内添加小图标。

    <!-- 标签中间加复制的图标 -->
    <span></span> 
    <!-- 或者添加 class 属性，并添加图标对应的属性值 -->
    <span class="icon-connection"></span>

④.给标签定义字体

      span {
      	font-family: "icomoon";
      }

保证 这个字体和上面@font-face里面的字体保持一致。

3. 字体图标的追加 （以后添加新的小图标）

   添加新的字体图标到原来的字体文件中，把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

   

1.3CSS 三角

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;  
    border-left-color: pink;  /* 这里设置是关键，上面的属性都一样*/ 
}

1.4 CSS 用户界面样式

界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式 cursor

li {cursor: pointer; }

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

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

防止拖拽文本域 resize

我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

1.5 vertical-align 属性

vertical-align 属性使用场景：
经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释：设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

vertical-align :

baseline | top | middle | bottom；

值	描述
baseline	默认，元素放在父元素的基线上。
top	元素的顶端与行中最高元素的顶端对齐。
middle	元素放在父元素的中部。
bottom	元素的顶端与行中最低元素的顶端对齐。

小妙招： 图片、表单和单行文字对齐

可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 。

小妙招： 解决图片底部默认空白缝隙问题。

原因：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

• 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
• 把图片转换为块级元素 display: block;

1.6溢出的文字省略号显示

1. 单行文本溢出显示省略号–三步走

   /*1. 先强制一行内显示文本*/
   white-space: nowrap;	（ 默认 normal 自动换行）
   
   /*2. 超出的部分隐藏*/
   overflow: hidden;
   
   /*3. 文字用省略号替代超出的部分*/  text-overflow: ellipsis;
   
   

   2.多行文本溢出显示省略号

   多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核）

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box; /* 弹性伸缩盒子模型显示 */
   -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
   -webkit-box-orient: vertical;/* 设置或检索伸缩盒对象的子元素的排列方式 */
   

1.7 常见布局技巧

1. margin负值运用

• 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

• 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如

  果有定位，则加z-index）

2. 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的 特性

3. 行内块巧妙运用

页码在页面中间显示:

• 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
• 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

4. CSS 三角强化

效果和原理

三角形代码：

width: 0;
height: 0;
border-color: transparent red transparent transparent; 
border-style: solid;
border-width: 22px 8px 0 0;

5.网页初始化代码

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -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
}

资料收集于互联网，侵删~