css

• flex布局， margin-left: auto，元素靠右

• transition 需要浏览器侦测到属性变化，才会有过渡效果

• position: fixed 元素默认基于浏览器视口定位，如果该元素有 transform 样式 不为'none'的父元素，则相对于该父元素定位。

• margin padding 设置百分比是基于父容器的宽度。padding-bottom 宽高比固定的技巧

• box-sizing: 默认值 content-box, 宽高设置不包含 padding，border。border-box

• em：设置字体时是父元素字体大小，设置宽度等是本元素字体大小

• rem： 根元素字体大小

• vw，vh，vmax，vmin

• 通过 clear 属性或者 bfc 来清除浮动

• 可替换元素：iframe,img,video,embed

• vertical-align: 用来指定行内或行内块或表格单元格（table-cell）元素的垂直对齐方式。

• 优先级：max-width/min > flex-basis > width

word-break

• normal: 默认。不可以打断英文单词，可以打断中文

• break-all: 可以打断英文单词

• keep-all: 不可以打断英文单词，也不可以打断中文日文韩文

word-wrap 重命名后叫 overflow-wrap

• normal:默认。不可以打断英文单词，可以打断中文

• break-word: 尽量不打断单词，除非单词一行放不下 ，推荐用法。

• anywhere

formatting contexts 格式化上下文

• 页面上每一块内容都是格式化上下文的一部分，格式化上下文决定了其内部子节点如何布局

• 常见的种类有：BFC，IFC，flex formatting context(flex 布局) 等等

bfc： block formatting context

• 定义了子元素遵循 bfc 布局方式，是一个独立的渲染区域，规定了内部 box 如何布局， 并且这个区域的子元素不会影响到外面的元素

• 创建新的 bfc：overflow 不是 visible，float，absolute，inline-block，flex item(flex 的直接子元素) 等等

• bfc 可以： 包含内部浮动，清除外部浮动，避免 margin 折叠

ifc: Inline formatting contexts

• 行内元素会创建 IFC： a, strong 等

• ifc: 宽高无效， 上下 margin 无效，padding 有效但不会撑起父元素的高度，会导致上下重叠

重排重绘

• 浏览器渲染分为几个阶段： 生成 DOM 树，同时创建 css 对象模型，然后生成渲染树，布局，渲染，合成

• 重排要经历布局阶段，布局需要计算节点的新属性，比较耗时