2021-05-05 不惧前行

刚开始文字比较繁重，以后简洁突出重点。 加油 ！奥利给！！！

精灵图（重点）

使用精灵图核心总结：

1.精灵图主要针对于小的背景图片使用。

2.主要借助于背景位置来实现---background-position 。

3.一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

字体图标

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3.一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标

2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

CSS 三角

1.我们用css 边框可以模拟三角效果

2.宽度高度为0

3.我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

4.为了照顾兼容性 低版本的浏览器，加上 font-size: 0;  line-height: 0;

5.利用定位定在哪里

/* 1.只保留右边的边框有颜色 */

        border-color: transparent red transparent transparent;

        /* 2. 样式都是solid */

        border-style: solid;

        /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */

        border-width: 100px 50px 0 0 ;

- 更改用户的鼠标样式

li { cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

- 表单轮廓

input { outline: none; }

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

- 防止表单域拖拽

textarea{ resize: none; }

实际开发中，我们文本域右下角是不可以拖拽的。

vertical-align 属性应用

vertical-align : baseline | top | middle | bottom

经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

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

单行文本溢出显示省略号 三部曲

/*1. 先强制一行内显示文本*/

  white-space: nowrap;  （ 默认 normal 自动换行）

  /*2. 超出的部分隐藏*/

  overflow: hidden;

  /*3. 文字用省略号替代超出的部分*/

  text-overflow: ellipsis;

多行文本溢出显示省略号 五部曲  （几乎不用）

/*1. 超出的部分隐藏 */

overflow: hidden;

/*2. 文字用省略号替代超出的部分 */

text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;