CSS学习笔记11——用户界面（精灵图，字体图标，鼠标样式，溢出文本省略号，文本域等）

用户界面样式

精灵图（sprites）

减少服务器接受和发送请求次数，提高加载速度

原理：把多个小图汇成一张大图，调整背景大图位置来在相应位置显示图标

用background-position调整背景大图的位置

字体图标（iconfont）

优点：

轻量级
灵活性
兼容性

简单的小图标

下载网站

icomoon.io

外网

www.iconfont.cn

国内

字体图标的引入

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

字体图标的追加

网站里点击import icons按钮重新上传selection.json文件，选中新的图标，重新下载压缩包

鼠标样式cursor

li {cursor:pointer;}

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

input {outline:none;}
<!--或outline:0;-->

去除文本框默认的蓝色轮廓线

防止拖拽文本域 resize

textarea { resize:none;}

文本域右下角不可以被拖拽

vertical-align属性应用

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

vertical-align: baseline | top | middle | bottom

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

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

图片作为行内块元素，默认会和文字的基线对齐，导致底侧有空白缝隙

解决方式：

给图片添加vertical-align:middle | top | bottom 等 (提倡)
把图片转化为块级元素：display:block; （块级元素独占一行）

溢出的文字省略号显示

单行文本溢出显示省略号

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

多行文本溢出显示省略号

有较大兼容性问题，适合webkit浏览器或者移动端（移动端大部分是webkit内核）

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