前端分享会之讲css
1.BFC有什么作用？
先抛出一个问题：一个简单应用 ———— 媒体对象，实现效果就是，例如是“图片 + 文字”组合，图片显示在左边，文字没有环绕图片地显示在右边。
该如何实现呢？
源码有：
html
<div class="demo">
<div class="pic"></div>
<p class="cont">
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
我喜欢前端，我学习前端，我使用前端；
</p>
</div>
</html>CSS
.demo{ width:300px; border:1px solid #b2d1a3; background-color:#e5ebe4;}
.pic{ width:100px; height:100px; margin:10px; background: ur("img/100x100.gif"); }
.cont{ margin:10px; color:#37a;}
1.如果要将文字部分放在图片的右侧，可能想到给.pic使用float:
.pic{ ...; float:left; }
2.但是还没实现我们的最终效果，这是需要BFC(Block Formatting Context)出场了，而overflow:hidden又可以激活BFC,所以我们只要给.cont添加关键代码，如下：
.cont{ ...; overflow:hidden; }即可实现最终效果！是不是很有技巧？
BFC又是什么？
简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。
什么情况会创建BFC？
非块级盒子的浮动元素、绝对定位元素及块级容器(比如inline-blocks，table-cells和table-captions)，以及overflow属性是visible之外任意值的块级盒子，都会创建了一个BFC。即当元素CSS属性设置了下列之一时，即可创建一个BFC:
float：left|right
position：absolute|fixed
display: table-cell|table-caption|inline-block
overflow: hidden|scroll|autoIE hack
针对IE6的hack,直接为为.pic增加display:inline来解决双边距bug；_height:1%;是来激活IE浏览器引擎内部特有的属性————hasLayout。
.demo{width:300px;border:1px solid #b2d1a3;background-color:#e5ebe4;}
.pic{float:left;width:100px;height:100px;margin:10px;background: url("img/100x100.gif");display:inline;}
.cont{margin:10px;color:#37a;_height:1%;}讲性能
无图片技术的实现方式
大概有四种方式： ##### 一是通过background-color、border生成图片； ##### ##### 二是通过字符生成图片； ##### ##### 三是通过CSS3 的gradient等生成图片（这个要考虑低级浏览器不兼容的问题）； ##### ##### 四是CSS3的自定义字体(@font-face)生成图片 #####
3个优点
- 减少请求资源的大小
- 减少http的请求个数
- 提高可维护性 > 用background-color生成的小方块 > > 用border生成的小方块 > > 用border生成的小三角 > > 用border生成的尖三角（改变各边border-width） >
CSS书写顺序 ( 推荐 )
//显示属性
display，list-style，position，float，clear，…..
//自身属性
width，height，margin，padding，border，background，…..
//文本属性
color， font， text-decoration， text-align， vertical-align， white-space， other text， content，…..