BFC
BFC - Block Formatting Context 块级格式化上下文 BFC的定义,在官方文档到中,是这么介绍BFC的。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
强行翻译一下吧,简单来说,这句话的意思就是:
一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素
怎么触发BFC
浮动元素:float 除 none 以外的值。
绝对定位元素:position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。
精灵图
定义:
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。把一个网页所涉及到的所有零星图片都包含到一张大图中去,目前网页处理不大于200k的图片速度都差不多,这样做能大大提高页面加载图片的速度。
优缺点:
优点
1.减少网页的http请求,提高页面的性能
2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
缺点
1.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。
2.CSS Sprites非常值得学习和应用,特别是页面有一堆icon(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。
3. 往常 CSS Sprites在开发的时候比较麻烦,你要通过或其他工具测量计算每一个背景单元的精确位置,但是如果是单图的话可以用一个CSS Sprite Generator这个网站进行单图拼接,能够很好的处理精确位置而且附带代码,减少不必要的繁琐。