解析:

 flex-direction 控制主副轴
flex-wrap 控制换行(默认不换行)
flex-flow是上两个的结合
justify-content 主轴对齐方式
align-items 交叉轴对齐方式 

解析:

 overflow: hidden 能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算
盒子内所有元素的高度, 所以会隐式清除浮动
创建 BFC 条件(满足一个):
float的值不为 none；
overflow 的值不为 visible；
position 的值为 fixed / absolute；
display 的值为 table-cell / table-caption / inline-block / flex / inline-flex。 

解析:

 使用 vw, vh
width 百分比, height: 0, padding-top(bottom): 50% 

解析:

 document.compatMode 属性可以判断是否是标准模式，当 document.compatMode 为
“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。
怪 异 模 式 是 为 了 兼 容 旧 版 本 的 浏 览 器 , 因 为 IE 低 版 本
document.documentElement.clientWidth 获取不到
怪异模式盒模型: box-sizing: border-box; 标准模式: box-sizing: content-box 

解析:

 两个对半矩形遮罩, 使用 rotate 以及 overflow: hidden 进行旋转