文章目录
1. 精灵图 Sprites
1.1 为什么需要精灵图
- 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites、CSS 雪碧)
- 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
1.2 使用精灵图Sprites
- 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中
- 这个大图片称为 Sprites、精灵图、雪碧图
- 移动背景图片位置,此时可以使用background-position
- 移动的距离就是这个目标图片的x和y坐标 (第四象限)
- 一般情况下都是往上往左移动,所以数值都是负值
- 使用精灵图时需要精确测量,每个小背景图片的大小和位置
1.3 示例
width: 100px; /*测量盒子大小*/
height: 112px;
backgroud: url(images/index.png) no-repeat -327px -142px; /*测量盒子位置*/
2.字体图标 iconfont
2.1 为什么需要字体图标
使用场景:主要用于显示网页中通用、常用的一些小图标
- 精灵图的缺点:
- 图片文件比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
- 字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以随意改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器
- 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化
- 如果遇到一些结构和样式比较简单的小图标,用字体图标
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图
2.2 步骤
2.2.1 下载
icomoon.io
www.iconfont.cn
2.2.2 引入
- 把fonts文件夹放入页面根目录下
- 在CSS样式中全局声明字体
复制压缩包里style.css里面的代码到css文件中
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?3u46ev');
src: url('fonts/icomoon.eot?3u46ev#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?3u46ev') format('truetype'),
url('fonts/icomoon.woff?3u46ev') format('woff'),
url('fonts/icomoon.svg?3u46ev#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
- 打开demo.html 复制需要的图标(小方框)或者前面的代码加\粘贴到需要的地方
- 声明字体
font-family: 'icomoon';
2.2.3 追加
上传压缩包中的selection.json,选中想要的新图标,从新下载压缩包,并替换原来的文件即可
3. CSS三角
div {
width: 0;
height: 0;
line-height: 0; /*为了兼容性*/
font-size: 0;
border: 10px solid transparent;
border-top-color: pink; /*箭头向下的三角形*/
}
子绝父相 做 小三角
4. CSS用户界面样式
4.1 更改用户的鼠标样式 cursor
选择器 {
cursor: default; /*默认*/
cursor: pointer; /*小手*/
cursor: move; /*移动*/
cursor: text; /*文本光标*/
cursor: not-allowed; /*禁止*/
}
4.2取消表单轮廓 outline
给表单添加
outline: 0;
outline: none;
可以去掉默认的蓝色边框
4.3防止拖拽文本域 resize
textarea {
resize: none;
}
5. vertical-align 属性应用
用于设置图片或表单(行内块元素)和文字垂直对齐 middle
vertical-align: baseline; /*默认,元素放置在父元素的基线上*/
vertical-align: top; /*把元素的顶端于行中最高元素的顶端对齐*/
vertical-align: middle; /*把此元素放置在父元素的中部*/
vertical-align: bottom; /*把元素的顶端于行中最低的元素的顶端对齐*/
解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐
- 解决方法
- 给图片添加 vertical-align: middle|top|bottom;
- 把图片转换成块级元素 display: block;
6. 溢出的文字省略号显示
6.1 单行文本溢出显示省略号
white-space: nowrap; /*1.先强制一行内显示文本(默认:normal 自动换行)*/
overflow: hidden; /*2.超出的部分隐藏*/
text-overflow: ellipsis; /*文字用省略号代替超出的部分*/
6.2 多行文本溢出显示省略号
适合于webkit浏览器或移动端
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/
-webkit-box-orinent: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
- 推荐让后台人员设置,操作更简单
7. 常见布局技巧
7.1 margin负值的运用
- 让每个盒子margin: -1px; 正好压住相邻盒子边框
- 鼠标经过某个盒子时,提高当前盒子的层级即可(如果没有定位,则加相对定位,如果有定位,则加z-index)
7.2 文字环绕浮动元素
7.3 行内块的巧妙运用
7.4 CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;