CSS高级技巧 一.精灵图1.1为什么需要精灵图1.2精灵图的使用 二.字体图标2.1为什么不使用精灵图？2.2字体图标的优点2.3字体图标的下载2.4字体图标的引入2.5字体图标的追加2.6字体图标加载的原理 三.CSS三角3.1原理 四.CSS用户界面样式4.1更改用户的鼠标样式cursor4.2表单轮廓线outline4.3防止表单域拖拽 五. vertical-align属性应用5.1CSS的`vertical-align`属性5.2解决图片底部默认空白缝隙问题 六.溢出的文字省略号显示6.1. 单行文本溢出显示省略号--必须满足三个条件6.2多行文本溢出显示省略号 七.常见布局技巧7.1margin负值的运用7.2文字围绕浮动元素7.3行内块巧妙运用7.4CSS三角强化 八.CSS的初始化 一.精灵图 1.1为什么需要精灵图
一个网页图片过多时，服务器频繁地接收发送请求图片，会造成服务器请求压力过大，将大大降低页面的加载速度。 css精灵图技术（也叫CSS Sprites、CSS雪碧），可以有效地减少服务器接收和发送请求地次数，提高页面的加载速度 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
1.2精灵图的使用使用精灵图的核心：
精灵技术主要针对小的背景图片使用，就是把多个小背景图片整合到一张大图片中这个大图片被叫做精灵图，或者雪碧图，sprites精灵图移动背景图片位置，此时可以使用background-position移动的距离就是这个目标图片的x坐标和y坐标，要注意网页中的坐标有所不同一般情况图片都是往左，往上移动，所以坐标是负值使用精灵图时需要精确测量 二.字体图标字体图标iconfont使用场景：主要用于显示网页中的通用、常用的一些小图标 字体图标可以为工程师提供一种方便高效的图标使用方法，展示的是图标，本质属于字体
2.1为什么不使用精灵图？精灵图的缺点：
图片文件还是比较大的图片本身放大和缩小会实真一旦图片制作完毕想要更换非常复杂 2.2字体图标的优点 轻量级：一个图标字体要比一系列的图像小，一旦字体加载了，字体图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器注意：体图图表不能代替精灵技术，只是对工作中图标部分技术的提升和优化
总结
结构样式比较简单的小图标，就用字体图标结构样式复杂的小图片，就用精灵图 2.3字体图标的下载推荐网站 icomoon字库 http://icomoon.io 阿里iconfont字库http://·/
2.4字体图标的引入见博客 阿里字体图标的使用
2.5字体图标的追加添加到项目后，再重新下载即可
2.6字体图标加载的原理只需要请求一次
三.CSS三角网页中常用的一些三角形，可以直接用CSS画出来，不必做成图片或者字体图标，如下所示
3.1原理边框其实是一个梯形，短边的底为其对应的盒子的长度，梯形的高为边框的宽度，然后梯形是一个等腰梯形，两个角为45°
<style> .box1 { width: 10px; height: 10px; border-top: 10px solid blanchedalmond; border-right: 10px solid blue; border-bottom: 10px solid red; border-left: 10px solid green; } </style>效果 当我们把内部的盒子宽度，高度都设置为0时，其余三个边框设置为透明色，就可以得到一个等腰直角三角形
<style> .box1 { width: 0px; height: 0px; /* border: 10px solid red; */ border: 10px solid transparent; border-top: 10px solid skyblue; } </style> 四.CSS用户界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
更改用户的鼠标样式更改表单轮廓防止表单域拖拽 4.1更改用户的鼠标样式cursor选择器 { cursor: pointer; } 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
4.2表单轮廓线outline给表单添加outline:0; 或者outline: none;样式之后，就可以去掉默认的边框 input { outline: none; }
4.3防止表单域拖拽实际开发中，我们文本域右下角是不可以拖拽的 textarea { resize: none;}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单轮廓</title> <style> input { /* 取消轮廓线 */ outline: 0; } textarea { /* 取消轮廓线 */ outline: none; /* 防止拖拽文本域 */ resize: none; padding: 10px; } </style> </head> <body> <input type="text"> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html> 五. vertical-align属性应用 5.1CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐 官方解释：用于设置一个元素的垂直对齐方式，但是他只针对行内元素或者行内块元素有效 语法： verticla-align : baseline | top | middle | bottom
图片、表单都属于行内块元素，默认的vertical-align是基线对齐
此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle，就可以让文字和图片、表单居中对齐
5.2解决图片底部默认空白缝隙问题bug:图片底侧会有一个空白缝隙，原因是行内块元素会默认和文字的基线对齐 主要解决方法：
给图片添加vertical-align: middle | top | bottom等把图片转换为块级元素display: block 六.溢出的文字省略号显示 6.1. 单行文本溢出显示省略号–必须满足三个条件 /*1.先强制一行内显示文本*/ white-space: nowrap; (默认normal自动换行) /*2.超出的部分隐藏*/ overflow：hidden; /*3.文字用省略号代替超出的部分*/ text-overflow：ellipsis; 6.2多行文本溢出显示省略号多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或者移动端
overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -wekbit-box; /*限制在一个块元素显示的文本的行数*/ -webkit-line-clamp: 2; /*设置或检索伸缩盒对象的子元素的排列方式*/ -wekbit-box-orient: vertical; 七.常见布局技巧 7.1margin负值的运用 让每个盒子margin往左侧移动边框的宽度，正好压住相邻盒子边框鼠标经过某个盒子时，提高当前盒子的层级即可（如果没有定位，则加相对定位，因为相对定位会保留原位置，不脱标），如果有定位，则加z-index） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>margin负值的巧妙应用</title> <style> ul li { position: relative; float: left; list-style: none; width: 150px; height: 200px; background-color: pink; border: 1px solid red; margin-left: -1px; } /* ul li:hover { 如果盒子没有定位，则鼠标经过时添加相对定位即可 position: relative; border: 1px solid blue; } */ ul li:hover { /* 如果盒子有定位，则利用z-index提高层级 */ z-index: 1; border: 1px solid blue; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html> 7.2文字围绕浮动元素巧妙利用浮动元素不会压住文字的特性
7.3行内块巧妙运用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行内块元素的巧妙运用</title> <style> * { margin: 0; padding: 0; } .box { text-align: center; } .box a { display: inline-block; width: 36px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; line-height: 36px; text-decoration: none; color: #333; font-size: 14px; } .box .prev, .box .next { width: 85px; } .box .current, .box .elp { background-color: #fff; border: 0; } .box input { height: 36px; width: 45px; border: 1px solid #ccc; outline: none; } .box button { width: 60px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; } </style> </head> <body> <div class="box"> <a href="#" class="prev"><<上一页</a> <a href="#" class="current">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#" class="elp">...</a> <a href="#" class="next">>>下一页</a> 到第 <input type="text"> 页 <button>确定</button> </div> </body> </html> 7.4CSS三角强化代码：
width: 0; height: 0; /*1.只保留右边的边框有颜色*/ border-color: transparent red transparent transparent; /*2.样式都是solid*/ border-style: solid; /*3.上边框宽度稍大，左边框、下边框宽度为0*/ border-width: 22px 8px 0 0;例子如下所示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS三角强化的巧妙运用</title> <style> * { margin: 0; padding: 0; } .box { width: 160px; height: 24px; /*子盒子会继承，让文字垂直居中显示*/ line-height: 24px; /*大盒子边框*/ border: 1px solid red; /*水平居中*/ margin: 0 auto; } .miaosha { /* 子绝父相 */ position: relative; float: left; width: 90px; height: 100%; background-color: red; /*文字水平居中显示*/ text-align: center; color: #fff; font-weight: 700; margin-right: 10px; } .miaosha i { position: absolute; /*右靠边*/ right: 0; top: 0; width: 0; height: 0; /*三角高级应用*/ border-color: transparent white transparent transparent; border-style: solid; border-width: 24px 12px 0 0; } .origin { /*删除线*/ text-decoration: line-through; color: grey; } </style> </head> <body> <div class="box"> <span class="miaosha"> $1650 <i></i> </span> <span class="origin">$5200</span> </div> </body> </html>实现效果
八.CSS的初始化原因：不同浏览器对于某些标签的默认值是不一样的，为了消除不同浏览器对于HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化 简单来说：CSS初始化是指重设浏览器的样式（也叫做CSS reset） 每个网页都必须首先进行CSS初始化
以京东CSS初始化代码为例
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; } /* em和i斜体的文字不再倾斜 */ 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: 'Times New Roman', Times, serif,"\5B8B\4F53"; } body { /*CSS3 文字放大时，抗锯齿性，让文字显示更清晰*/ -webkit-font-smoothing: antialiased; /*整个页面的背景颜色*/ background-color: #fff; /* 文字为12像素，行高为文字的1.5倍 */ font: 12px/1.5 Microsoft YaHei; color: #666; } .hide, .none { display: none; } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0; } .clearfix { *zoom: 1; }Unicode编码字体： 把中文字体的名称用对应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时出现乱码的问题 例如： 黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6E\96C5\9ED1
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #css高级技巧 #css精灵图技术也叫CSS
