CSS简要发展历史

UT%~%N~457[XO$KDROOK7.png

层叠、优先级

层叠三大规则

选择器优先级

内联>id > class = attribute = pseudo-class > type = pseudo-elementoa

9H0@X6%M86B4VO@3PAH.png

盒模型

浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型,css通过盒模型做layout
F6M09JANCEGAM$T6F183DM.png

控制盒子类型 display: block、inline、inline-block、flex、..控制盒子大小&计算方式 width，height ... box-sizing: content-box、border-box 控制盒中内容流 overflow: auto、scroll、hidden、 ... 控制定位 position: static、relative、absolute、fixed、sticky 是否可见 visibility: visible、hidden、...

外边距塌陷

两个兄弟元素之间相邻的上下外边距
父子元素之间相邻的上下外边距
内容为空元素自己上下外边距相邻

消除外边距塌陷的方法

在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻;
在父子元素重叠时，除了上述方法，还可以设置父元素为BFC,使得父子不在同级BFC中

弹性盒子布局

Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。

网格布局

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。 E@XAQELF0DAN0X~2397VG.png

Grid布局

将面设置为均分的3*3grid布局

${XI0RSV18E4EAQ@QQHO8XB.png

.face {
display: grid;
grid-template-rows: repeat(3，lfr) ;grid-template-columns: repeat(3，1fr);grid-template-areas:
"lt . rt"
"lc cc rc""lb . rb";
}

规定好所需要的点占用的area

.lt-dot {
  grid-area: lt;
}

.rt-dot {
  grid-area: rt;
}

.lc-dot {
  grid-area: lc;
}

.cc-dot {
  grid-area: cc;
}

.rc-dot {
  grid-area: rc;
}

.lb-dot {
  grid-area: lb;
}

.rb-dot {
  grid-area: rb;
}

层叠上下文(The stacking context)

形成新的层叠上下文的条件(任一即可):

position: relative 或absolute;并且z-index不是auto
position: fixed 或 sticky
flex或 grid的子元素;并且z-index不是auto

----------以上为css3之前---------

opacity的值小于1
transform的值不为none
will-change的值不为通用值
....详见规范*

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序︰ CNEWQG8%BJ8756B_0.png

transform、transition、animation——性能相关

VHA~O_6E8X23MR8NG.png

如何写动画性能更好?

尽量不用触发reflow的属性
在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
尽量使用transform和opacity去写动画

响应式设计推荐遵循的原则

优先选用流式布局，如百分比、flex、grid等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度，em、rem、vw作为长度度量

设备像素、参考像素和移动设备视口

设备像素

设备像素(物理像素)︰显示器上绘制的最小单位,显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。
设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

DPI && PPI

dpi (dots per inch)︰每英寸多少点。
ppi (pixels per inch)︰每英寸多少像素数。

当用于描述显示器设备时ppi与dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距当屏幕分辨率是X*Y，计算公式: JRTY6C1EJ1Y6E_H4R2(Z0AD.png

CSS像素

CSS像素(reference pixel)其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI(即1英寸96点)的设备输出时,1点(即1/96英寸)的视角。通常认为常人臂长为28英寸，那么视线与水平线的夹角是:(1/96)in / (28in * 2 * PI /360deg)= 0.0213度。
如果1css像素永远等于1设备像素，那么

$1VJVPG_B5TU~F$F{O8.png$

但是真正使用的CSS像素并不是用0**.0213度去精确计算的，因为css像素存在的目的是为了保证阅读体验一致，所以对不同的物理设备，CSS使得浏览器中1css像素的大小在不同物理设备上看上去大小总是差不多。
真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素

DPR设备像素比

设备像素比(dpr) : 描述的是未缩放状态下，设备像素和CSS像素的初始比例关系

移动端的viewport

viewport的meta标签中的属性

width
height
initial-scale
minimum-scale
maximum-scale
user-scalable

默认iPhone的viewport可以认为是:

<meta name="viewport" content="width=980">

其中initial-scale，在未设定时，如果width设定了，那么它会自动设置放缩值:
initial-scale =屏幕宽度(例子中是390) / 980 = 0.398
相比scale=1的时候，缩小了0.398倍

工程架构

CSS模块化

CSS Module就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的，从这个角度看，主流的单纯针对于防止全局污染的方案大概有:
1. BEM命名规范
通过.block_element--modifier这种命名规范来约束开发者，从而实现样式隔离。
2. vue-loader 的scoped方案
通过编译的方式，在html元素上添加data-xxx的唯一属性，然后css添加属性选择器[data-xxx]的方式，实现样式隔离。
WY%_@%9O6M6%G(4DKPRVFPU.png
3. css Modules
通过编译的方式，将一个css file中的样式命名默认转换为一个全局唯一的名称，实现样式隔离，(常用选择器 css-loader 或 postcss-module) V2VJR1M43EQ7~$75EP.png

css-in-JS

css-in-js︰将应用的CSS样式写在JavaScript文件里面，利用js动态生成css P5V2K@VZJ2Y}}$VV{JW9WM1.png

styled-component机制浅析

生成第一个classname做为componentld 这个类名没有CSS 样式,但是当需要引用其它组件的时候,可以作为一个嵌套选择器来使用
生成第二个classname做为唯一类名(hash值)，使用stylis,生成和唯一类名关联的CSS字符串
唯一类名对应的css样式insert到的中
将两个类名写到目标节点的class中

理解CSS | 青训营笔记