前端学习日记06

常见图片格式及特点

1、PSD
Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。

2、 JPG
优缺点
（1）色彩丰富 不支持透明
（2）压缩比高，生成文件体积小
（3）支持多种压缩级别可以控制文件大小 使用场景 色彩丰富的图片（摄影图像（产品图，照片，渐变））

3、GIF
优缺点
（1）颜色不够丰富，只支持256种颜色
（2）支持动画
（3）支持透明（全透明） 4.文件小 使用场景 色彩简单的logo/icon/动图

4、 PNG
优缺点
（1）颜色丰富
（2）支持alpha透明（全透明和全不透明，半透明）
（3）早期的浏览器不支持PNG图像
（4）色彩简单图片尺寸小，色彩丰富的图片文件大 适用于 透明背景图片，投影，发外光, 线条复杂（文字）

**5、 WebP **
WebP格式，谷歌（google）10年推出一种新型图片格式,一种旨在加快图片加载速度的图片，压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间，但并不是所有浏览器都支持
优缺点
（1）文件小
（2）支持有损和无损压缩
（3）支持动画、透明
（4）兼容性不好

css精灵

1.css精灵
css sprites，一般译为“css图像拼合”或“css贴图定位”。
就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image，background-repeat，background-position属性组合进行背景定位。background-position可以用数字精准的定位出背景图片的位置，一般适用于小图标。
​
2. CSS精灵优缺点
优点：
- 减少HTTP请求，提高页面的性能
- 图片命名上的困扰
- 已更换图标风格
缺点：
必须要精准计算容器的大小来放置背景图片。

BFC（块级格式化上下文）

什么是BFC（Block Formatting Context）

BFC:块级格式化上下文，指一个独立的渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与外部区域无关。

怎样生成BFC

1. 根标签
2. float值不为none
3. overflow的值不位visible
4. display的值为inline-block
5. position的值为absoluted和fixed

BFC的特性
6. 内部标签会在垂直方向一个接一个放置
7. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
8. 每个标签的左外边距与包含块的左外边界相接触，即使浮动标签也是如此
4 BFC的区域不会与float的标签区域重叠
9. 计算BFC高度时，浮动子标签页参与计算
10. BFC就是页面上的一个独立容器，容器里面的标签不会影响到外面的标签

BFC解决的问题

1. 外边距折叠；
2. 自适应两栏或三栏布局
3. 防止文字环绕
4. 清除浮动

属性扩展

设置文本溢出处理方式

text-overflow:
            clip     溢出部分裁剪
            ellipses   溢出部分用省略号代替

单行文本溢出隐藏

    text-overflow: ellipsis; 溢出的文字显示省略号
    white-space: nowrap;  文字强制不换行
    overflow: hidden;  溢出隐藏

多行文本溢出
1、第一种方式（兼容性不好）

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;

​
2、第二种方式：（行高和伪元素）

    p{
        width: 500px;
        border: 1px solid red;
        height: 80px;
        line-height: 20px;
        position: relative;
        overflow: hidden;
    }
    p::after{
        content: ".....";
        position: absolute;
        bottom: 0;
        right: 0;
        background: #fff;
        padding-left: 2px;
    }