BFC

BFC

BFC(块级格式化上下文)

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

BFC元素所具有的特性

BFC布局规则特性:

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

BFC的主要用途

  1. 清除元素内部浮动
    只要把父元素设为BFC就可以清理子元素的浮动,最常见的用法就是在父元素上设置overflow:hidden样式,对于IE6加上zoom:1;
  2. 解决外边距合并问题
    盒子垂直方向的距离由margin决定属于同一个BFC的两个相邻盒子的margin会发生重叠。
    创建不属于同一个BFC,就不会发生margin重叠了。
  3. 制作右侧自适应的盒子问题
    普通流元素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

发表评论