点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...

项目切图规范

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 贴图定位“

Document

.box {

width: 50px;

height: 50px;

background-image: url(./images/jingling.jpg);

}

.box1 {

background-position: -150px 0;

}

.box2 {

background-position: -200px -50px;

}

   

CSS 精灵优缺点

优点：

减少网页的 http 请求，从而大大的提高页面的性能；

图片命名上的困扰；

更换风格方便。

缺点：

必须要限定容器大小符合背景图元素位置，需要计算

CSS小箭头

Document

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;

}

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解决的问题

外边距塌陷

清浮动

两栏或者三栏自适应布局

阿里矢量图标

标签：BFC,块级,标签,css,工具,border,transparent,CSS

来源： https://www.cnblogs.com/whispers-zhao/p/14255516.html