【前端中css基础——系列3】css中模块化；css动画；css单位

系列文章总结

【前端中css基础——系列1】盒模型与flex布局
【前端中css基础——系列2】css中浮动与垂直居中显示
【前端中css基础——系列3】css中模块化；css动画；css单位
【前端中css基础——系列4】css实现固定宽高比；css中伪元素
【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置
【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

---

一、css动画与js动画的区别

	js动画	css动画
动画控制	js动画控制能力强，暂停，开始等操作易于实现	进程控制能力较差，只能特定场合的动画控制，不能在特定位置添加回调函数
动画效果	动画效果丰富：如曲线运动，冲击闪烁等等	动画效果不够丰富
复杂度	复杂度较高	复杂度相较js动画偏低
稳定情况	在主线程进行，可能会因为别的js脚本干扰出行啊堵塞从而丢帧	部分效果可以使用gpu强制加速
性能消耗	需要频繁操作dom的css属性来实现视觉上的动画效果，这个时候浏览器需要不断的重绘重排，性能消耗大	浏览器在部分情况下可以对动画进行优化，性能消耗无js动画大

---

二、vue中css的scope原理，以及cssMoudle

2.1 关于scope

vue组件中，为了使样式私有化（模块化），不会对全局造成污染，可以在style标签上添加scoped属性以表示它只属于当下的模块；

编译后其内的选择器会在其后添加自定义属性data-v-[str]，str为一串字符串，而使用该选择器的标签也会自己写上该自定义属性，而且只会修改当前组件中使用该选择器的标签。简明来说，原理是通过Dom元素结构上以及css样式上添加一个不重复的标记用来保证其唯一性，以此来达到样式的私有化。

2.2 关于cssMoudle

2.2.1 传统css的缺点：

/* components/submit-button.css */
.Button { /* all styles for Normal */ }
.Button--disabled { /* overrides for Disabled */ }
.Button--error { /* overrides for Error */ }
.Button--in-progress { /* overrides for In Progress */

<button class="Button Button--in-progress">Processing...</button>

1. 命名混乱
2. 依赖管理不好
3. 全局污染
4. 无法共享变量

2.2.2 使用css Module

css模块会将定义一个对象，将文件中类的名字动态的映射为js作用域中可以使用的字符串，css模块还可以从其他模式中继承样式。

/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

/* components/submit-button.js */
import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

每个组件有自己对应的样式，即使import后在同一个js文件中也不会冲突，看上面的，它的class只有submit-button里的样式。
依赖管理方面更好管理。

---

三、css中单位px和em，rem

css单位
相对长度单位	em、ex、ch、rem、vw、vh等
绝对长度单位	cm、mm、px、pt等

（1）px像素-绝对长度单位

在每一台固定的主机上是绝对长度单位，但是不同的显示器上，分辨率不一样也就px像素不一样。

• px-px像素

px是相对长度。 CSS 像素（CSS Pixel）: 又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web
编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。
在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

• pt-物理像素

pt（point，磅）：是一个物理长度单位，指的是72分之一英寸。
设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。指设备能控制显示的最小物理单位，意指显示器上一个个的点。
pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

• 设备像素比（DevicePixelRatio）:DPR = 设备像素 / CSS 像素

（2）em-相对长度单位

em是相对长度单位，相当于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器默认字体尺寸，任意浏览器默认字体高都是16px；

1. body巡按则其中声明Font-size=62.5%，1em=16*62.5%=10px；
2. 将原来的px数值除以10，然后换上em作为单位；
3. en的值并不是固定的；
4. em会继承父级元素的字体大小。

（3）rem-相对长度单位

rem与px，和em与px转换是一样的，二者区别在于前者默认从根元素继承，后者从父级元素继承。

单位	类型	描述
px	绝对长度单位	1个viewport像素，是相对于显示器屏幕分辨率而言的
em	相对长度单位	相对于父元素的字体尺寸，相当于当前对象内文本的字体尺寸
rem	相对长度单位	相对于html标签的字体尺寸，相对的只是html根元素

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~