CSS--------BFC布局 经典的多列布局

BFC规则

1. 什么BFC规则？

Block Formatting Context 块级格式化上下文

块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部

2. 哪些属性可以触发BFC规则？

   1. float不为none
   2. position属性为absolute和fixed
   3. oveflow不为visiable 
   4. html 根标签 

3. BFC有哪些规则

   1. BFC盒子内部的子标签按照垂直从上到下排
   2. 共用一个BFC盒子的垂直方向上的外边距会发生塌陷现象
   3. 子标签都会父盒子的左边界停靠，即使浮动元素也如此
   4. BFC盒子内部浮动元素也要参与高度计算
   5. BFC区域和浮动元素不重叠
   6. BFC盒子是一个密闭空间   外部不影响内部  内部不影响外部

4.解决的问题

2—》外边距塌陷

3—》浮动特性

4—》清除浮动影响

5----》图文不环绕 (p+overflow)

经典的多列布局

自适应： 一个盒子的宽度随着屏幕宽度发生变化 单位：%

两列自适应布局

原理： 两列并排 左列固定宽度 右列宽度自适应（100%）

/* 1.解决方案：左列+ float: left; */

/* 2.解决方案 左列+ position:absolute */

三列自适应布局

原理： 左右两列固定宽度 中间列自适应 (100%)

圣杯布局

过程：

三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中

双飞翼布局

过程：

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中

图片优化技巧

减少http请求 降体积

1. 合适地方选择合适的图片类型

   jpg 不支持背景透明 装饰性，商品盒子图片 (60-70)

   png 支持背景透明 （精灵图）png-8

   webp 背景透明+ 无损压缩+体积小 不兼容ie8-

2. 在线压缩工具 压缩图片

3. 小图拼合成精灵图

4. 单一的小图 纯色 —》字体图标

5. 图片可以采用编码 base64

轮播图结构

原理：