css笔记7

1.精灵图

为什么使用精灵图（目的）：

​ 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：

​ 将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

精灵图的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. ==因为一般情况下都是往上往左移动，所以数值是负值。==
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

---

2.字体图标

字体图标的产生

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

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

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

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

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

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

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

优点

1. 轻量级：一旦字体加载了，很快就行显示出来
2. 灵活性：本质是文字，方便修改
3. 兼容性：几乎支持所有的浏览器

使用

字体图标下载（icomoon)

放到根目录中，在css中引入字体文件（字体声明）

html标签内添加小图标

给标签指定字体

3.css三角

div {
	width: 0; 
   height: 0;
   border: 50px solid transparent;
border-color: red green blue black;
line-height:0;
   font-size: 0;
}

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

4.用户界面样式

鼠标样式

cursor: pointer

属性	值
defaut	默认
pointer	小手
move	十字架
text	文字光标
not-allowed	禁止

轮廓线

outline:0 去掉表单蓝色边框

防止拖拽文本域

resize: none;

5.vertical-align属性

用于设置一个元素的垂直对齐方式，只能用于行内元素或行内块元素。

vertical-align : baseline | top | middle | bottom 

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

主要解决方法有两种：

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

2.把图片转换为块级元素 display: block;

6.文字溢出省略号显示

单行文本

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

多行文本

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7.布局技巧

margin 负值的应用

1.两个有边框的盒子挨在一起会导致边框加粗，可以巧妙使用margin

使一个盒子的边框压住另一个盒子的边框。

2.在有一边被压住的情况下，鼠标经过时出现边框的变化，鼠标经过某个盒子的时候，给盒子加相对定位或者提高层级。

文字围绕浮动元素

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

行内块巧妙运用

利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中