黑马跟学CSS--day7笔记

精灵图

why

减少服务器接受和发送请求的次数，提高页面的加载速度，出现CSS精灵技术

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

减少服务器接受和发送请求的目的

使用

针对背景图片的使用，把多个小背景图片整合到一张大图里面

sprites 精灵图 或者 雪碧图

移动背景图片位置，background-position

基本为负值

缺点

图片文件较大

图片本身放大缩小会失真

制作完毕想要更换非常复杂

字体图标

显示网页中通用的小图标

what

iconfont

展示的是图标，本质属于字体

优点

轻量级

灵活性

兼容性

总结

不能代替精灵技术，对工作中图标部分技术的提升和优化

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

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

下载

网站：

iconmoon inconmoon.io

inconfont iconfont.cn

引用

放入根目录

CSS三角

盒子没有大小，设置border

CSS用户界面样式

鼠标样式

li {cursor:pointer;}

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

表单轮廓

轮廓线

给表单添加 outline:0/none

防止拖拽

textarea{resize:none;}

vertical-align

垂直对齐，针对行内元素或者行内块元素有效

vertical-align:top/middle/base/bottom

默认基线对齐

应用

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

1.给图片添加vertical-align:middle/top/bottom

2.把图片转化为块级元素display:block;

溢出的文字省略号表示

单行文本

1.先强制一行内显示

white-space：nowrap;(默认normal自动换行)

2.超出的部分隐藏

overflow:hidden;

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

text-overflow：ellipsis；

多行文本（了解）

有兼容性问题

display: -webkit-box;

​ -webkit-line-clamp: 3;

​ -webkit-box-orient: vertical;

常见布局技巧

margin负值的运用

?依然存在疑问

文字围绕浮动元素

行内块的巧妙运用

CSS三角强化

左边和下边的边框宽度设为0，把上边的宽度调大，颜色设为transparent

CSS初始化

unicode编码字体

将中文转化为相应的unicode编码，避免浏览器解释CSS时候出现乱码

黑体\9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1