精灵图-字体图标-三角-布局精灵图-字体图标-三角-常用布局技巧 “我正在参加「掘金·启航计划」” “我正在参加「掘金·

“我正在参加「掘金·启航计划」”

精灵图 Sprites 1.1 为什么需要精灵图为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了 1.2 使用精灵图Sprites 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中这个大图片称为 Sprites、精灵图、雪碧图移动背景图片位置，此时可以使用background-position 移动的距离就是这个目标图片的x和y坐标（第四象限）一般情况下都是往上往左移动，所以数值都是负值使用精灵图时需要精确测量，每个小背景图片的大小和位置 1.3 示例 width: 100px; /测量盒子大小/ height: 112px; backgroud: url(images/index.png) no-repeat -327px -142px; /测量盒子位置/

2.字体图标 iconfont 2.1 为什么需要字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图的缺点：图片文件比较大图片本身放大和缩小会失真一旦图片制作完毕想要更换非常复杂字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化如果遇到一些结构和样式比较简单的小图标，用字体图标如果遇到一些结构和样式复杂一点的小图片，就用精灵图 2.2 步骤 2.2.1 下载 icomoon.io www.iconfont.cn

2.2.2 引入把fonts文件夹放入页面根目录下在CSS样式中全局声明字体复制压缩包里style.css里面的代码到css文件中

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3u46ev');
  src:  url('fonts/icomoon.eot?3u46ev#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3u46ev') format('truetype'),
    url('fonts/icomoon.woff?3u46ev') format('woff'),
    url('fonts/icomoon.svg?3u46ev#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

打开demo.html 复制需要的图标（小方框）或者前面的代码加\粘贴到需要的地方声明字体 font-family: 'icomoon'; 1 2.2.3 追加上传压缩包中的selection.json，选中想要的新图标，从新下载压缩包，并替换原来的文件即可

CSS三角 div { width: 0; height: 0; line-height: 0; /为了兼容性/ font-size: 0; border: 10px solid transparent; border-top-color: pink; /箭头向下的三角形/ }

子绝父相做小三角

CSS用户界面样式 4.1 更改用户的鼠标样式 cursor 选择器

    {
    cursor: default; /*默认*/
    cursor: pointer; /*小手*/
    cursor: move;   /*移动*/
    cursor: text;   /*文本光标*/
    cursor: not-allowed; /*禁止*/
    }

4.2取消表单轮廓 outline 给表单添加

outline: 0;
outline: none;
可以去掉默认的蓝色边框

4.3防止拖拽文本域 resize

textarea {
    resize: none;
}

vertical-align 属性应用用于设置图片或表单（行内块元素）和文字垂直对齐 middle

vertical-align: baseline; /*默认，元素放置在父元素的基线上*/
vertical-align: top;     /*把元素的顶端于行中最高元素的顶端对齐*/
vertical-align: middle;  /*把此元素放置在父元素的中部*/
vertical-align: bottom;  /*把元素的顶端于行中最低的元素的顶端对齐*/

解决图片底部默认空白缝隙问题图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方法给图片添加 vertical-align: middle|top|bottom; 把图片转换成块级元素 display: block;

溢出的文字省略号显示 6.1 单行文本溢出显示省略号

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

6.2 多行文本溢出显示省略号适合于webkit浏览器或移动端

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

推荐让后台人员设置，操作更简单

常见布局技巧 7.1 margin负值的运用让每个盒子margin: -1px; 正好压住相邻盒子边框鼠标经过某个盒子时，提高当前盒子的层级即可（如果没有定位，则加相对定位，如果有定位，则加z-index） 7.2 文字环绕浮动元素 7.3 行内块的巧妙运用 7.4 CSS三角强化

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

CSS初始化