前端语言串讲 Browser HTTP————构建DOM树————计算CSS树————排版————渲染合成
CSS in HTML
三种形式
1.内嵌CSS Inline CSS
2.内部CSS Internal CSS
3.外部CSS External CSS
HTML DTD HTML并非图灵完备，它只是一门标记语言
HTML全部标签分类
HTML head标签
HTML ARIA 了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义
HTML5存储
HTML5 IndexedDB趋势明显
HTML5 Audio
HTML5 Video
HTML5 二进制
HTML5 API
HTML5 Web Worker
HTML5 Web Socket
HTML5 Shadow DOM
HTML5 Web Component
HTML5 WebAssembly 一种新的编码方式，可以直接在浏览器中运行
MVC & MVVM & MVP
深入理解CSS 基础知识 层叠、优先级 层叠三大规则 优先程度递减： 1.样式表来源 2.选择器优先级 3.源码位置
（样式表来源）重要程度递增 1.用户代理样式 2.用户样式表 3.作者样式表 4.作者样式表中的！important 5.用户样式表中的！important 6.用户代理样式表中的！important
选择器 基础选择器 1.#id--ID选择器 Tagname --类型选择器或者标签选择器 2..class--类选择器 *--通用选择器。该选择器匹配所有元素 3.组合器 4.子组合器（>）--匹配的目标元素是其他元素的直接后代。如.parent>.child 5.相邻兄弟组合器（+）--匹配的目标元素紧跟在其他元素后面，如：p +h2 6.通用兄弟组合器（～）--匹配所有跟随在指定元素之后的兄弟元素，如 li.active~li. 7.复合选择器 多个基础选择器可以连起来使用，如：h1 .page-header 8.属性选择器 通过约束属性值，div[data-title="aaa"] 9.伪类选择器：选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素：如:first-child , :hover 10.伪元素选择器：匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如：h2::first-letter,div::before 11.逻辑选择器：较新的选择器：is():has():where():not()
选择器优先级：内联>id>class=attribute=pseudo-class>type=pseudo-element
源码顺序 1.对于@import的样式，根据@import的顺序 2.对于link和style标签的样式，根据在document中国的顺序决定
对于层叠、优先级 1.选择器尽量少用id 2.尽量不要用！important 3.自己的样式加载在引用库样式的后面
继承 大部分具有继承特性的属性跟文本相关 还有少部分列表、表哥的属性
可以使用interit关键字显式指定一个属性值从其父元素继承
CSS的值和单位
盒模型 浏览器根据视觉格式化模型 将所有元素表示为盒子模型，css通过盒模型做layout
盒模型-负外边距 padding、border、margin中，只有margin可以设置负值
常规流布局
块级格式化上下文
外编距塌陷 会产生外边距塌陷的情况 1.两个兄弟元素之间相邻的上下外边距 2.父子元素之间相邻的上下外边距 3.内容为空元素自己上下外边距相邻
消除外边距塌陷的方法 1.在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻 2.在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中
内联级格式化上下文
弹性盒子布局
网格布局
使用Grid布局
Grid和Flex布局策略 1.Flex一纬布局，基于内容，浏览器兼容性良好 2.Grid二维布局，基于布局，2017年后浏览器的版本普遍支持
大面积或整体布局，推荐使用Grid布局 小面积或组件中，或Grid Item中可以使用Flex做灵活布局
定位Position relative、absolute、fixed
层叠上下文 1.底层到最上层 2.根元素的背景和边框 3.z-index<-的元素按z-index大小排列 4.非positioned且形成新stack context的元素，同类型的按照HTML出现的顺序 block元素——float元素——inline元素 5.除了{position：relative｜absolute;z-index:auto;}的元素之外，其他元素内部形成新的层叠上下文 【positioned&&z-index为auto｜0；无z-index但形成新stack context的元素（比如opacity<1）；按照html出现顺序排列 6.内部形成新的层叠上下文 z-index>0的元素按z-index大小排列 7.用户可见 *z-index只在同一个层叠上下文内比较 *子元素的z-index无法超越父元素的z-index显示区域
transform变形
transform变形3D
transition过渡
animation动画 @keyframes关键帧 用来定义动画过程中出现的关键样式
transfrom、transition、animation ————性能相关 如何写动画性能更好 1.尽量不要触发reflow的属性 2.在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transfrom3d等 3.尽量使用transform和opacity去写动画
响应式设计推荐遵循的原则 1.优先选用流式布局，如百分比、flex、grid等 2.使用响应式图片，匹配尺寸、节省带宽 3.使用媒体查询为不同的设备类型做适配 4.给移动端设备设置简单、统一的视口 5.使用相对长度，em、rem、vw做为长度度量
媒体查询
设备像素
DPI&&PPI 当屏幕分辨率是X*Y，计算公式 PPI=X/屏幕亮度（inch）=Y/屏幕高度（inch）=√x^2+Y^2 / 屏幕对角线（inch）
CSS像素
DPR设备像素比
移动端的viewport
相对长度的使用
em
rem
vw和vh
CSS生态相关
语言增强————CSS预处理器
语言增强————postcss机制浅析
工程架构————CSS模块化
工程架构————CSS in JS
工程架构————styled-component机制浅析
工程架构————CSS-in-JS pros&cons
工程架构————原子化CSS
