CSS学习（10）——高级技巧

目录

一、精灵图

1.需要原因

2.使用方法

二、字体图标iconfont

三、三角形的做法

四、用户界面样式

1.鼠标样式

2.轮廓线 outline

3.防止拖拽文本域 resize

4.图片、表单和文字对齐

5.溢出文字用省略号代替

5.1.单行文本溢出

5.2.多行文本溢出

6.布局技巧

6.1.margin负值运用

6.2.文字环绕效果

6.3.三角强化

 7.CSS初始化

---

一、精灵图

1.需要原因

为了有效减少服务器接收和发送请求的次数，提高网页的加载速度。

如上图为精灵图

2.使用方法

（1）精灵图主要针对背景图片使用，将多个小图片整合为一个大图片。

（2）主要借助于背景位置来实现——background-position

（3）一般情况下精灵图都是负值（网页中的坐标：x轴右边是正，左边是负。y轴上面时负，下面是正）

（4）利用软件Fireworks测量图片大小以及偏移位置，再利用background来设置。

二、字体图标iconfont

展示的是图标，但实际上是字体。如下拉箭头、放大镜、左右按钮等。

1.推荐网站：iconfont-阿里巴巴矢量图标库

                  Icon Font & SVG Icon Sets ❍ IcoMoon

2.追加新的图标需要重新加载。

三、三角形的做法

（1）将盒子高度和宽度设置为0。

（2）设置将一边设置边框，另外三边的边框设置为透明，即可出现三角形。

四、用户界面样式

1.鼠标样式

语法：

选择器{ cursor: pointer;  }

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

2.轮廓线 outline

给表单（input）添加outline:0 或者 outline: none，就可以去掉默认的蓝色边框。

3.防止拖拽文本域 resize

给文本域（textarea）设置resize: none;，就可以取消掉拖拽。

4.图片、表单和文字对齐

4.1默认的vertical-align为基线对齐。

将vertical-align属性设置为middle，就可以让文字和蹄片垂直居中对齐。

4.2解决图片底部默认空白缝隙问题

原因：块内元素会和文字的基线对齐

（1）给图片添加vertical-align: middle | top | bottom （提倡使用）。

（2）把图片转换为块级元素 display: block。

5.溢出文字用省略号代替

5.1.单行文本溢出

（1）将文本强制一行显示——white-space: nowrap；（默认为normal，换行显示）。

（2）超出部分隐藏——overflow: hidden；

（3）文字用省略号代替超出的部分——text-overflow: ellipsis

5.2.多行文本溢出

有较大兼容性问题，适合webKit浏览器挥着移动端，建议让后台人员完成。

6.布局技巧

6.1.margin负值运用

清除盒子相邻边框较粗问题。

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

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

6.2.文字环绕效果

给图片盒子设置浮动

6.3.三角强化

制作如图所示三角

/* 1.只保留在右边边框的颜色 */
border-color: transparent red transparent transparent;

/* 2.样式都是solid */
border-style: solid;

/* 3.上边框宽度变大，右边框缩小，其余为0 */
border-width: 100px 50px 0 0;

 7.CSS初始化

由于不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器的差异，要对CSS进行初始化。

百度复制粘贴即可。