zoukankan html css js c++ java

CSS精灵&什么是BFC

PS常用工具

移动工具
- 移动工具主要负责图层、选区、等的移动、复制操作。
- 快捷键：v
抓手工具
- 快捷键：h
- 空格 + 鼠标左键拖动，空格键可临时转换为抓手工具。
放大镜工具
- 放大镜工具可以放大或缩小图像。
- 放大：点击放大工具，点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。
- 缩小：点击缩小工具，点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。
文字工具
- 快捷键：t
- 文字工具是用来输入文本的。
吸管工具
- 快捷键：i
标尺工具
- 标尺工具可以用来测量图像的高度或者宽度。
- 属性栏： x 和 y：绘制的起点坐标。 W：标尺投射到 x 轴上的宽度。 H：标尺投射到 y 轴上的高度。（正负仅代表方向，x 轴方向向右，y 轴方向向下）。
切片工具
- 根据用户需求截出图片中的任何一部分，同时一张图上可以切多个地方。另存为 web 所用格式的时候能将所切的各个部分分别保存成一张图片，完全区分开来。保存时可选择图片格式以及切片类型。
制作表情包
- 将表情素材调入PS中；
- 再找一张脸部细节丰富的人物照片，同样调入PS里；
- 利用套索工具，将人物中表情部分扣取下来，拖入表情素材内。Ctrl+T调整一下表情的尺寸，让它和素材大小协调；
- Ctrl+Shift+U首先对表情部分去色，然后按下Ctrl+M调出曲线工具，将对比度压低，整个表情打亮。这里特别说一下，挑选素材图时一定要注意去找那些面部打光均匀的照片，避免存在明暗过渡明显的“阴阳脸”，否则会给后期图片处理带来很多麻烦；
- 双击表情图层，然后按住Alt键依次拖动混合颜色带右侧两个高光滑杆，你会发现表情就完美地嵌入到素材中了；

常见的图片格式和特点

格式	优点	缺点	使用场景
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
gif	文件小，支持动画、透明，兼容性比较好	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

CSS精灵

什么是 CSS 精灵

英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
             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" alt="">
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

CSS 精灵优缺点
- 优点：
  - 减少网页的 http 请求，从而大大的提高页面的性能；
  - 图片命名上的困扰；
  - 更换风格方便。
- 缺点：
  - 必须要限定容器大小符合背景图元素位置，需要计算

CSS小箭头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: blue;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .box1 {
             0;
            height: 0;
            border- 100px;
            border-style: solid;
            border-color: transparent transparent transparent red;
            position: absolute;
            top: 0;
        }
        .box2 {
             0;
            height: 0;
            border- 100px;
            border-style: solid;
            border-color: transparent transparent transparent blue;
            position: absolute;
            top: 0;
            left: -10px;
        }
        .wrap {
             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 (Block Formatting Context) 块级格式化上下文

什么是bfc？
- Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了其子标签如何定位，以及与其他标签的相互关系和作用。
  
  BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
怎样生成BFC
- 根标签
- float的值不为none
- overflow 的值不为 visible
- display 的值为 inline-block
- position 的值为 absolute 或 fixed
BFC的特性
- 内部的标签默认会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。
- 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
- BFC 的区域不会与 float 的标签区域重叠。
- 计算BFC的髙度时，浮动子标签也参与计算。
- BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。
BFC解决的问题
- 外边距塌陷
- 清浮动
- 两栏或者三栏自适应布局

阿里矢量图标

https://www.cnblogs.com/xiaonian0327/p/7735799.html

查看全文

相关阅读:
干货 | 玩转云文件存储——利用CFS实现web应用的共享访问
 干货 | 4步带你完成私有云盘搭建
 是我们控制着技术，还是技术控制着我们？
如何辨别开发者等级？
云托管，边缘物理计算&托管物理计算，你所需要了解的……
干货 | 调用AI api 实现网页文字朗读
 容器技术的未来——京东云技术专访
 隐藏的历史-是什么成就了今天的硅谷？
ffmpeg windows下编译安装
 比较和打补丁工具

原文地址：https://www.cnblogs.com/zxy37/p/14186507.html