CSS(高阶技巧)

1.精灵图

使用精灵图核心总结∶

1. 精灵图主要针对于小的背景图片使用。

2. 主要借助于背景位置来实现—background-position。

3. 一般情况下精灵图都是负值。(千万注意网页中的坐标︰x轴右边走是正值，左边走是负值，y轴同理。

2.字体图标

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

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

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

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

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

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

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

优点:

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

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

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

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

3.三角

div {
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:pink;
}

4.界面样式

4.1 鼠标样式（cursor）

li {cursor:pointer;}

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

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

4.2 轮廓线（outline）

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

input {outline:none;}

4.3 防止拖拽文本域 resize

 textarea {resize: none;}

4.4 vertical-align

CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素)和字垂直对齐。

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

语法：

vertical-align: baseline | top | middle | bottom

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZ5GVF6e-1692000793320)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211231222320365.png)]

应用：

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

bug :图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种:

1．给图片添加vertical-align:middle | topl bottom等。（提倡使用的)

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

4.5 溢出文字省略显示

1. 单行文本溢出显示省略号–必须满足三个条件

• 先强制一行内显示文本：white-space：nowrap；（默认normal自动换行）
• 超出的部分隐藏：overflow：hidden；
• 文字用省略号替代超出的部分：text-overflow：ellipsis；

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

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

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