CSS知识整理
https://juejin.im/post/6867715946941775885
1.盒模型
包装 html 标签的容器，组成包括 content+padding+border+margin 不同浏览器元素高度可能不一致，除了内置 margin 和 padding 不同之外，可能是 IE 和 W3C 的盒子模型组成不同。
- W3C盒子模型：可通过 box-sizing:content-box 来设置，包含 content+padding+border+margin
- IE盒子模型：可通过 box-sizing:border-box 来设置，content+margin 。content 包含 border，padding
2.BFC
block formatting context 块级格式化上下文。产生BFC的形成了独立容器，不会在布局中影响外面的元素。
特性：
- BFC边距会重叠
- BFC内外元素互不影响
- BFC不会与浮动元素发生重叠
- BFC元素高度计算会计算包括元素内的浮动元素的高度
触发条件
- body根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position（absolute,fixed)
- display 为 inline-block、table-cells、flex、table-caption
- overflow 除了visible 以外的值
3.flex布局
弹性布局，一旦父级采用 flex 布局，里面子控件受 flex 布局限制，原本部分样式会失效（比如float：left）
4.css3新特性
- 背景，支持rgba透明度
- 支持媒体查询
- 支持阴影、渐变
- 支持边框图片 border-image:url(border.png) 30 30 round
- 支持transform位移
- 支持过渡效果transition
- 支持自定义字体
- 引入 flex、grid 布局
- 引入多种选择器
- 其他…
5.常见兼容性
- 间距差距是否过大，导致文本换行，或者间隔太大。原因：每个浏览器margin、padding 默认值不同。解决方案：全局文件统一设置默认margin和padding。
- 图片默认有间距 原因：因为 img 标签是行内属性标签，所以只要不超出容器宽度，img 标签都会排在一行里，但部分浏览器的 img 标签之间会有个间距。解决方案：使用float属性为img布局（使用负margin虽然能解决，但负margin本身就容易引起浏览器兼容问题）
- 较小的高度（小于10px）时，ie可能超出高度。原因：IE有一个默认行高。解决方案：给超出高度的标签设置 overflow：hidden；或者设置行高 line-hight 小于你设置的高度
- 透明度兼容设置。原因：不同浏览器各自透明度关键字不统一。解决方案：filter：alpha（opticy=50）；-moz-opticy：0.5；-khtml-optocy：0.5；opticy：0.5
- IE的hover图片会闪烁。原因：IE6的每次触发hover的时候都会重新加载。解决方案：提前缓存文件。document.execCommand(“BackGroundImageCache”,false,true)
6.垂直居中
- 已知宽高：1.margin 自己算宽高 2.定位+margin-top + margin-left 3.定位+ margin：auto
- 未知款高：1.transform 2.flex布局 3.display：table-cell
7.三列布局
- CSS浮动 第一个float：left，第二个float：right，第三个设置margin-left和margin-right
- 绝对定位 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
- flex布局
8.样式优化
- 避免css层级太深
- 首屏（特别是缓冲效果图）可适当使用内联元素。
- 异步加载css。非首次重要引入的css文件，不放在head里面。这样会引起阻塞。
- 减少回流的属性。如displa：none可以考虑使用visiblity
- 适当使用GPU渲染。如transform等。
- css动画的性能，远大于js动画性能