CSS（六）

（一）精灵图

1.为什么要使用精灵图

为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧）
核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以啦

2.精灵图的使用

使用核心：
1.精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中。这个大的图片称为Sprites 精灵图或者雪碧图
2.移动背景图片位置 background-position
3.一般情况下精灵图都是负值（X轴右边走的是正值，左边走的是负值，Y轴上边走的是正值，下边走的是负值，）

div {
    width: 236px;
    height: 128px;
    margin: 100px auto;
    background-image: url(/img/王者荣耀精灵图.png);
    background-position: 0 -220px;
}

3.精灵图的缺点

1）文件较大
2）图片失真
3）更换复杂

（二）字体图标

1.字体图标简介

iconfont字体图标，展示的是图标，本质是字体

2.字体图标的优点

1）轻量级：一个图标字体比一系列的图像要小。一旦字体加载，图标就会马上渲染出来，减少了服务器请求
2）灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等
3）兼容性：几乎支持所有的浏览器

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

3.字体图标的下载

icomoon字体库：http://icomoon.io
阿里iconfont字体库：http://www.iconfont.cn

4.字体图标的引入

1）把下载包里面的fonts文件夹放入页面文件夹的更目录中
2）在CSS样式中全局声明字体
3）HTML标签添加小图标
4）声明字体样式

span{
    font-family: 'icomoon';
    font-size:100px;
    color:pink
}

5.字体图标的追加

在工作中，如果原来的字体图标不够用，需要添加新的字体图标到原来的字体文件夹中

方法：把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并且替换原来的文件即可

（三）CSS三角

1.设置盒子的宽高为都为0
2.若想要设置向下的三角，则把上边框设置颜色
3.其余边框为透明色（transparent）

.box2 {
    width: 0;
    height: 0;
    border: 10px solid transparent;/*边框为透明色*/
    border-top: 10px solid pink;/*上边框设置颜色*/
    margin: 10px;
}

（四）CSS用户界面样式

1.鼠标样式 cursor

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

<ul>
    <li style="cursor: default;">鼠标默认样式</li>
    <li style="cursor: pointer;">鼠标小手样式</li>
    <li style="cursor: move;">鼠标移动样式</li>
    <li style="cursor:text ;">鼠标文本样式</li>
    <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>

2.表单的轮廓线 outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

值	描述
outline-color	规定边框的颜色。
outline-style	规定边框的样式。
outline-width	规定边框的宽度。

input {
    /* 消除轮廓线 */
    outline: none;
}

3.防止文本域拖拽 resize

textarea {
    resize: none;
}

（五）vertical-align属性应用

vertical-align 属性设置元素的垂直对齐方式。只针对行内元素和行内块元素有效

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

1）图片与文字的位置

img,
textarea {
    /* 上端对齐 */
    /* vertical-align: top; */
    /* 居中对齐 */
    /* vertical-align: middle; */
    /* 下端对齐 */
    vertical-align: bottom;
}

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

图片与边框默认基线对齐，所以存在一定空隙
解决方法：
1.给图片添加vertical-align：middle | top | bottom等
2.把图片转换为块级元素 display：block;

div {
    border: 2px solid red;
}
/* 图片与边框默认基线对齐，所以存在一定空隙， */
/* 解决方法1 */
/* img {
vertical-align: bottom;
} */

/* 解决方法2 */
img {
    display: block;
}

（六）溢出文字省略号显示

1.单行文本溢出显示省略号

步骤：
1）强制一行内显示文本 white-space：nowrap; (nowrap不换行)
2）超出部分隐藏 overflow：hidden；
3）文字省略号代替超出部分 text-overflow:ellipsis;

div {
    width: 150px;
    height: 80px;
    background-color: pink;
    margin: 100px auto;
    /* 强制一行显示 */
    white-space: nowrap;
    /* 溢出文字隐藏 */
    overflow: hidden;
    /* 单行溢出文字显示省略号 */
    text-overflow: ellipsis;
}

2.多行文本溢出显示省略号

div {
    width: 120px;
    height: 80px;
    background-color: pink;
    margin: 100px auto;
    white-space: normal;
    /* 溢出文字隐藏 */
    overflow: hidden;
    /* 单行溢出文字显示省略号 */
    text-overflow: ellipsis;
    /* 弹性伸缩盒模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示文字的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素排列方式 */
    -webkit-box-orient: vertical;
}

解决最后一行未溢出不显示省略号的问题
1）不要给高度，直接写元素显示文字的行数
2）缩小高度直到文字溢出

（七）常见布局技巧

1.margin负值的应用

1）解决细线边框变粗的问题

将元素向左移动1像素，消除细线边框变粗。

li {
    list-style: none;
    width: 300px;
    height: 500px;
    padding: 10px auto;
    float: left;
    border: 1px solid rgb(0, 0, 0);
    margin-left: -1px;
}

2）解决边框显示不完全的问题

鼠标经过某个盒子时，提高盒子的层级即可：
如果没有定位，则添加相对定位（保留位置）因为相对定位会压住其他的标准流和对定位，即将盒子至于最上层；
如果有定位，则添加z-index

li {
    /* 2.如果有定位，则添加z-index）*/
    position: relative;
    list-style: none;
    width: 300px;
    height: 500px;
    float: left;
    border: 2px solid rgb(0, 0, 0);
    margin-left: -2px;
}

li:hover {
    /* 1.如果没有定位，则添加相对定位（保留位置） */
    /* position: relative; */
    /* 2.如果有定位，则添加z-index）*/
    z-index: 3;
    border: 2px solid rgb(102, 0, 255);
}

3）解决鼠标悬停加边框页面跳动问题

将原来margin值-1即可

li {
    list-style: none;
    width: 320px;
    height: 500px;
    float: left;
    margin: 5px;
}

li:hover {
    margin: 4px;
    border: 1px solid rgb(0, 0, 0);
}

2.文字围绕浮动的应用

因为浮动元素不会压住文字，所以可以用浮动来做

.box {
width: 400px;
height: 300px;
background-color: pink;
}

img {
float: left;
}

3.行内块的妙用

将块元素转化为行内块元素，然后放到一个大盒子中，对大盒子进行水平居中对齐。

4.CSS三角强化

画出直角三角形：将左边和下边的边框设置为0 ,把上边框宽度调大

.box1 {
    width: 0;
    height: 0;
    /* 把上边框宽度调大 */
    border-top: 100px solid transparent;
    border-right: 50px solid rgb(255, 0, 43);
    /* 将左边和下边的边框设置为0 */
    border-bottom: 0 solid rgb(25, 0, 255);
    border-left: 0 solid rgb(82, 255, 1);
}

（八）CSS初始化

不同浏览器对标签的默认值时不一样的，为消除不同浏览器对HTML文本呈现的差异，所以要对CSS初始化，即重新设置浏览器的样式

Unicode编码字体：避免浏览器解释CSS代码时候出现乱码的问题

字体	Unicode
黑体	\9ED1\4F53
宋体	\5B8B\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

/* 把所有标签内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

/* 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

/* border 0照顾低端的浏览器 如果图片外包含了链接会有边框的问题 */
img {
    border: 0;
    /* 图片与文字垂直居中 取消图片底边有空白缝隙的问题 */
    vertical-align: middle;
}

/* 鼠标悬停在按钮时，光标显示为小手 */
button {
    cursor: pointer;
}

/* 取消链接的下划线 */
a {
    text-decoration: none;
}

body {
    /* 抗锯齿性，让文字更加清晰 */
    -webkit-font-smoothing: antialiased;
}

/* 清除浮动的影响 */
.clearfix:after {
    visibility: hidden;
    8clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1;
}