前端笔记，css（7）元素的显示于隐藏，精灵图，css用户界面样式

visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出部分的内容显示出来，因为溢出部分会影响布局

但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分。

2.精灵图

2.1 为什么需要精灵图

一个网页中玩玩会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度

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

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

2.2 精灵图（sprites）的使用

使用精灵图核心：

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

2.这个大图片也称为sprites精灵图或者雪碧图

3.移动背景图片位置，此时可以使用background-position。

4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。

5.因为一般情况下都是往上往左移动，所以数值都是负值。

2.3 字体图标

2.3.1 字体图标的产生

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

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

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

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

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

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

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

2.3.2 字体图标的优点

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

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

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

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

2.4 css三角

网页中一些三角形，使用css直接画出来就可以，不必做成图片或者字体图标。

一张图，你就知道css三角是怎么来的了，做法如下：

div {

width：0；

height：0；

line-heght：0；

font-size：0；

border：50px solid transparent；

border-left-color：pink；

}

3. css用户界面样式

3.1什么事界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

3.2 鼠标样式（cursor）

语法：

选择器 { cursor：pointer；}

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

default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

3.3 轮廓线（outline）

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

input { outline ：none；}

3.4 防治拖拽文本域resize

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

textarea { resize ：none；}

3.5 vertical-align 属性应用

css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align：baseline | top | middle | bottom

baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

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

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

主要解决方法有两种：

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

2.把图片转换为块级元素：display ： block；

3.7 文字溢出显示省略号

3.7.1 单行溢出显示省略号--必须满足三个条件

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

white-space：nowrap；

2.超出部分隐藏

overflow：hidden；

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

text-overflow：elipsis；

3.7.2 多行文本溢出显示省略号

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

overflow：hidden；

text-overflow：ellipsis；

// 弹性伸缩盒子模型显示

display：-webkit-box；

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

-webkit-line-clamp：2；

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

-webkit-box-orient：vertical；

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。