BFC

BFC（块级格式化上下文）

元素显示模式display
分为block、inline-block、inline等等

BFC元素所具有的特性

BFC布局规则特性：

1. 在BFC中，盒子从顶端开始垂直地一个接一个排列
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
3. 在BFC中，每一个盒子的左外边距会触碰到容器的边缘
   1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
   2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

BFC的主要用途

4. 清除元素内部浮动
   只要把父元素设为BFC就可以清理子元素的浮动，最常见的用法就是在父元素上设置overflow：hidden样式，对于IE6加上zoom：1；
5. 解决外边距合并问题
   盒子垂直方向的距离由margin决定属于同一个BFC的两个相邻盒子的margin会发生重叠。
   创建不属于同一个BFC，就不会发生margin重叠了。
6. 制作右侧自适应的盒子问题
   普通流元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

BFC总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

优雅降级和渐进增强

渐进增强是向上兼容，针对低版本浏览器进行构建页面，保证最基本的功能，任何再针对高级浏览器进行效果。交互等改进和追加功能达到更好的用户体验
优雅降级是向下兼容，一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。

浏览器前缀

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

背景渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/

因为它可以检测本地文件哦！！

CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢

还可以去站长之家进行快速压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx