移动工具
抓手工具
放大镜工具
文字工具
吸管工具
标尺工具
切片工具
制作表情包
| 格式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
| gif | 文件小，支持动画、透明，兼容性比较好 | 只支持256种颜色 | 色彩简单的logo/icon/动图 |
| png | 无损压缩，支持透明，简单图片尺寸小 | 不支持动画，色彩丰富的图片尺寸大 | logo/icon/透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
什么是 CSS 精灵
英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 50px;
height: 50px;
background-image: url(./images/jingling.jpg);
}
.box1 {
background-position: -150px 0;
}
.box2 {
background-position: -200px -50px;
}
</style>
</head>
<body>
<img src="./images/jingling.jpg" >
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
CSS 精灵优缺点
优点：
缺点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: blue;
}
* {
padding: 0;
margin: 0;
}
.box1 {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent red;
position: absolute;
top: 0;
}
.box2 {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent blue;
position: absolute;
top: 0;
left: -10px;
}
.wrap {
width: 100px;
height: 200px;
margin: 0 auto;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
什么是bfc？
Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了 其子标签如何定位，以及与其他标签的相互关系和作用。
BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
怎样生成BFC
BFC的特性
BFC解决的问题
https://www.cnblogs.com/xiaonian0327/p/7735799.html
原文：https://www.cnblogs.com/majiancheng/p/14145655.html