盒模型

盒模型分为四部分：

• margin box
• border box
• padding box

正常文档流布局（兼容所有浏览器）

按照元素在文档中的出现顺序与书写方向（write-mode），搭配盒模型进行布局。

基于position 的布局（IE 不兼容position：sticky）

通过修改元素的position 来实现一些特殊布局效果。

基于float 的Multicol 布局（几乎兼容所有浏览器）

• float：none/left/right 用于指定浮动方向，元素会朝对应方向移动，直到碰到容器边缘或另一个float 元素；float 元素会脱离正常文档流，并创建BFC；float 元素的display 可能被强制改为block，且对flex/inline-flex 元素无效。
• clear：none/left/right/both 用于清除当前BFC 中的前置float 元素的影响，且该元素为非float 元素时，垂直方向的外边距将会折叠；

HTML语义化有什么用

三点：无需编写CSS就可以保持良好的文档结构、有助于SEO、有助于Web Accessibility；

前端页面分层

三层：结构层（HTML）、表示层（CSS）、行为层（JS）；

数组类技巧

1. 滑动窗口；
2. 双指针;
3. 巧用排序；
4. 巧用数据结构（Hash Map/Set，Stack，Priority Queue）

前言

国内公司几乎不会考虑Web Accessibility，这与我们的法律有关，我国国内的法律并不强制要求Web Accessibility，但是世界上的部分国家如美国，则出台过508康复法案，制订了若干Accessibility标准，一旦某公司的产品不达标，就要面临法律风险。