BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。(清除浮动)
==========
FOUC
Flash Of Unstyled Content 无样式内容闪烁
什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
什么是FOUC(文档样式短暂失效)?
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
原因大致为：
1，使用import方法导入样式表。
2，将样式表放在页面底部
3，有几个样式表，放在html结构的不同位置。
其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。
此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：
使用LINK标签将样式表放在文档HEAD中。
语义化的HTML
是表现与结构相分离的一种方式
对搜索引擎友好
标题 列表 段落 表格 使整体结构清晰，主次分明
提高加载速度
减少请求：文件压缩，图片合并，
资源GZip
css置头，js置尾
多域名负载均衡
CDN托管
服务器配置缓存时间
浏览器模式
标准模式(strict mode) 采用W3c标准解析
接近标准模式(almost standards mode) 常用解析方式 有doctype
混杂模式(quirks mode) 采用自身方式解析 宽松兼容 没有doctype
js判断
docoment.compatMode=='strict'
docoment.compatMode=='quirks'
data-的好处：
提供自定义的属性
对象的dataset属性获取
通过 getAttribute方法获取
css reset的好处：
重置浏览器的CSS默认属性 使每个浏览器的默认样式显示一致