CSS 杂碎

什么是精灵图？
CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
优点：
①利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
②CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
缺点：
①在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂
②CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

:global 是什么意思？
:global 其实是 css module 的一种写法，被其包围的类名不会被编译转换 全局可用
:global {
.name-group {
margin-bottom: 10px;
}
}

什么是文本溢出？
单行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
复制代码
多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
复制代码
注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

requestAnimationFrame？
实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的 canvas 也可以实现。除此之外，HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。
语法：
window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)
使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
示例：
//我们可以创建的时候就给一个ID

const animationID=window.requestAnimationFrame(loop);//loop就是我们的渲染循环，可以看上面的render那块的函数
//比如我想10秒之后停止动画
setTimeout(()=>{
    window.cancelAnimationFrame(animationID)
},10000)

link 和 @import 的区别？
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持

<meta charset="UTF-8">
<link ref="stylesheet" herf="http://www.baidu.com">
<style>
    @import url(http://www.baidu.com);
    .father {
</style>

什么是css工程化？
CSS 工程化是为了解决以下问题：
宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
编码优化：怎样写出更好的 CSS？
构建：如何处理我的 CSS，才能让它的打包结果最优？
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：
预处理器：Less、 Sass 等；
重要的工程化插件： PostCss；
Webpack loader 等 。
为什么要使用预处理器？
宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；
编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；
可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。
这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：
嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
支持定义 css 变量；
提供计算函数；
允许对代码片段进行 extend 和 mixin；
支持循环语句的使用；
支持将 CSS 文件模块化，实现复用。

PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？
它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；

Webpack 能处理 CSS 吗？如何实现？
Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
style-loader：创建style标签，把 CSS 内容写入标签。
在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。

animation 和 transition 的区别？
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
transition的使用
transition-property – 什么属性将用动画表现，例如, opacity。
transition-duration – 转变过程持续时间。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay 动画延迟

<div @click="transitionActive = true">点击按钮改变</div>
<div class="transitionBox">
    <div
        :class="transitionActive ? 'active changeWidth' : 'changeWidth'"
    >
        宽变化
    </div>
</div>

.changeWidth.active {
    /* 添加 active 类名之后，宽度改线 */
    width: 200px;
    /* 想要让 width 属性实现过渡效果 */
    transition-property: width;
    /* 过渡时间为 1s */
    transition-duration: 1s;
    /* 设置速度曲线  */
    transition-timing-function: ease-in-out;
}
animation的使用
animation-name 动画的名称，需要绑定到 keyframe 选择器上
animation-duration 完成一个动画动作的时间单位是毫秒
animation-timing-function 完成动画的速度曲线函数 ，常用的值有 linear ease-in ease-out ease-in-out 等
animation-delay 动画延迟单位是毫秒
animation-iteration-count 动画播放的次数值为 infinite 可以播放无数次值为数字，可以播放指定次数
animation-direction 是否轮流反向播放动画；值为 normal，正常播放；值为 alternate，动画轮流反向播放
.changeWidth {
    width: 100px;
    height: 100px;
    background: #ccc;
    /* 动画时长为 2s */
    /* 设置速度曲线为 linear */
    /* 设置动画一直不停播放 */
    animation: widthCss 2s linear infinite;
    /* 设置反向动画效果，相比于 widthCss，有回弹的效果 */
    animation: widthCssType2 2s linear infinite alternate;
}
@keyframes widthCss {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
    /* 另外一种写法 */
    /* from {
        width: 100px;
    }
    to {
        width: 200px;
    } */
}
@keyframes widthCssType2 {
    from {
        width: 100px;
    }
    to {
        width: 200px;
    }
}

如何把网页一键变灰？
ilter 属性定义元素（通常是 ）的视觉效果（如模糊和饱和度）。
filter ： grayscale(%)
https://www.w3school.com.cn/cssref/pr_filter.asp

z-index定位？
z-index属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值

z-index元素的position属性需要是relative，absolute或是fixed。
z-index属性在下列情况下会失效：
①父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
② 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
③元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block、

常见布局单位？
常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型CSS像素（为web开发者提供，在CSS中使用的一个抽象单位）物理像素（只与设备的硬件密度有关，任何设备的物理像素都是固定的）

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。

rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。
作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。
（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：

百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸

transition，transform，translate的区别
transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样
translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少
还有其他属性：scale 缩放 rotate旋转。
transition
transition 过渡效果。 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性

怎么修改ui库的默认样式？
都是深度选择器，或者说样式穿透，用于组件内修改UI组件库默认样式而不影响全局
区别是 >>> 只作用于 CSS，在 Less/Sass 中无法识别，所以用 deep 代替，在 Vue3.0之前用 /deep/，Vue3.0之后可能会报错，所以推荐用 ::v-deep
1、>>>
如果vue的style使用的是css，那么则
但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>

2、/deep/

<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
  }
}
</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。
此时我们可以使用第三种方式
3、::v-deep
切记必须是双冒号

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */ 
   }
} 
</style>

为什么有时候⽤translate来改变位置⽽不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。
复合就是把页面拆解成不同的图层（类似Photoshop），当页面发生视觉变化时，可能只是影响了某一个图层其它图层不需要受到影响，此时我们可以把需要变化的元素单独创建一个图层。
复合线程主要做了以下几点：将页面拆分多个图层进行绘制再进行复合，默认情况下如何拆分图层是由浏览器决定的，浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层，
解决1px问题
物理像素：移动设备出厂时，不同设备自带的不同像素，也称硬件像素；
逻辑像素：即css中记录的像素。
UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的 window.devicePixelRatio 来获取像素比例关系
解决方案：
1、直接将border设置为0.5px
优点：简单直接
缺点：兼容性太差，安卓和低版本的IOS都不支持

.h1 {
  border-bottom: 0.5px solid #000
}
2、伪元素 + tranform: scaleY

这种方法是比较常用，兼容性也比较好的，利用高度为1px的伪元素来模拟边框，在媒体查询中利用tranform: scaleY来进行缩放，需要设置

transform: origin(0, 0)保证缩放时伪元素距离父元素的距离
h1 {
  position: relative;
}

h1:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  transform: scaleY(1);
  transform-origin: 0 0;
}

@media screen and (min-device-pixel-ratio: 2),  (-webkit-min-device-pixel-ratio: 2) {
  h1:after {
    transform: scaleY(0.5);
  }
}

3、同样是利用伪元素实现，但是使用了liner-gradient来模拟边框

h1:after {
  display: block;
  content: '';
  height: 1px;
  background: linear-gradient(0, #fff, #000);
}

@media screen and (min-device-pixel-ratio: 2),  (-webkit-min-device-pixel-ratio: 2) {
  h1:after {
    transform: scaleY(0.5);
  }
}

视频,音频标签的使用
在html5中新增了video视频标签,常用的属性有source视频的地址.width/height视频的宽高,autoplay自动播放.controls控制条poster没有播放之前的展示位,loop循环播放.preload预加载视频.muted静音模式
audio标签的常用属性和video差不对,但是audio不能设置poster和宽高

网页布局的三种方式：
第一种是文档流(也就是默认的排版) 行内就是水平,块级就是垂直排版,行内块级也是水平排版
我们要学会通过把块级元素转化为行内块级让他实现水平排版
第二种是浮动流排版方式,脱离标准流,浮动流只能设置某个元素左对齐或者右对齐,只能设置水平排版,不能设置居中或者其他的margin-top之类的.在浮动流中不论是行内还是块级都是可以设置宽高的. overflow可以用来清除浮动
第三种是定位流,包括相对定位,绝对定位和固定定位

overflow属性有哪些取值？
visibie 超出区域可见，默认
hidden 超出区域不可见
scroll 横纵都滚动条
auto 纵向滚动条
clear属性取值
clear ： both 图像的左侧和右侧均不允许出现浮动元素：
clear ：none 默认值。允许浮动元素出现在两侧
clear ： left 、right

letter-spacing
属性增加或减少字符间的空白（字符间距）
基本语法：object.style.letterSpacing=”3px”
cursor: pointer;光标变成小手指
×关闭按钮的字符实体
user-select属性有2个值(none表示不能选中文本,text表示可以选择文本)是用来防止用户点的太快而选中的.

怎么改变网站的小图标呢?
首先在站点文件夹的根目录下面放入favicon.ico图标
然后在head里面写上这么一句代码: