（八）CSS学习笔记:精灵图、字体图标、CSS三角与用户界面样式、vertical-align属性应用、溢出文字省略号显示、常见布局技巧

本文仅用作学习记录，学习视频为B站的pink老师

精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(CSS Sprites、CSS雪碧图)
使用精灵图核心：

• 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中，这个大图也被称为Sprites精灵图或者雪碧图
• 移动背景图片位置，此时可以使用background-position
• 移动的距离就是这个目标图片的x和y坐标
• 因为一般情况下都是往上往左移动，所以数值是负值

缺点：

• 图片文件还是比较大的
• 图片本身放大和缩小会失真
• 一旦图片制作完毕，想要更换非常复杂

字体图标

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

字体图标的优点：

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

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标
2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标下载网站：icomoon字库      阿里iconfont字库

CSS三角

.box1 {
    width: 0;
    height: 0;
    
    /* 兼容性问题，为了照顾低版本的浏览器，需要加上这两条语句 */
    line-height: 0;
    font-size: 0;
    
    /* border-top: 10px solid pink;
    border-bottom: 10px solid skyblue;
    border-left: 10px solid salmon;
    border-right: 10px solid palegoldenrod; */
    border: 10px solid transparent;
    border-left-color: aqua;
}

<div class="box1"></div>

CSS用户界面样式

鼠标样式cursor

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

<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>

表单轮廓线outline

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

防止拖拽文本域resize

样式添加textarea { resize: none; }后，设置文本域不可以变大变小

vertical-align属性应用

使用场景：经常用于设置图片、表单(行内块元素)和文字垂直对齐

/* 把元素的底端与行中最低元素的底端对齐 */
vertical-align: bottom;
/* 把此元素放置在父元素的中部 */
vertical-align: middle;
/* 把元素的顶端与行中最高元素的顶端对齐 */
vertical-align: top;
/* 默认。元素放置在父元素的基线上 */
vertical-align: baseline;

图片底部空白缝隙解决

空白缝隙存在原因：行内块元素和文字默认是基线对齐的

• 给图片添加样式vertical-align:middle|top|bottom;
• 把图片转换为块级元素：display:block;
  

溢出的文字省略号显示

单行文本溢出显示省略号

div {
    width: 150px;
    height: 80px;
    background-color: skyblue;
    margin: 100px auto;
    /* 默认。如果文字显示不开自动换行 */
    /* white-space: normal; */
    /* 如果文字显示不开，强制一行内显示 */
    white-space: nowrap;
    /* 溢出本分隐藏 */
    overflow: hidden;
    /* 文字用省略号代替超出的部分 */
    text-overflow: ellipsis;
}

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端(移动端大多是webkit内核)

.box2 {
    width: 150px;
    height: 65px;
    background-color: skyblue;
    margin: 100px auto;

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

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

常见布局技巧

margin负值的运用

• 让每个盒子margin往左侧移动-1px，正好压住相邻盒子边框
• 鼠标经过某个盒子时，提高当前盒子的层级即可
  如果没有定位，则加相对定位来保留位置
  如果有定位，则加z-index来提高层级

文字围绕浮动元素

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 300px;
    height: 70px;
    background-color: skyblue;
    margin: 0 auto;
    padding: 5px;
}

.pic {
    float: left;
    width: 120px;
    height: 60px;
    margin-right: 5px;
}

.pic img {
    width: 100%;
}

<div class="box">
    <div class="pic"><img src="img/img.png" alt=""></div>
    <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
</div>

行内块的巧妙运用

* {
    margin: 0;
    padding: 0;
}

.box {
    text-align: center;
}

.box a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 36px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.box .prev,
.box .next {
    width: 85px;
}

.box .current,
.box .elp {
    background-color: #fff;
    border: none;
}

.box input {
    height: 36px;
    width: 45px;
    border: 1px solid #ccc;
    outline: none;
}

.box button {
    width: 60px;
    height: 36px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
}

<div class="box">
    <a href="#" class="prev">&lt;&lt;上一页</a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">&gt;&gt;下一页</a>
    到第
    <input type="text" name="" id="">
    页
    <button>确定</button>
</div>

CSS三角强化

.price {
    width: 160px;
    height: 24px;
    border: 1px solid red;
    margin: 0 auto;
    line-height: 24px;

}

.miaosha {
    position: relative;
    float: left;
    width: 90px;
    height: 100%;
    background-color: red;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.miaosha i {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 24px 10px 0px 0px;
}

.origin {
    font-size: 12px;
    color: gray;
    text-decoration: line-through;
}

<div class="price">
    <span class="miaosha">￥1650<i></i></span>
    <span class="origin">￥5000</span>
</div>

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式。(也称为CSS reset)
每个网页都必须首先进行CSS初始化