移动端流式布局问题总结

1.margin塌陷原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值.正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位. 但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
解决方法：
1.给父级设置边框或内边距(不建议使用)
2.触发bfc(块级格式上下文),改变父级的渲染规则改变父级的渲染规则有以下四种方法,给父级盒子添加
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷
定位：
1.相对定位：不脱离文档流
2.绝对定位：脱离文档流，position：absolute；
没有参照物的定位方式：top：相对于页面顶端；bottom：相对于首屏底部
有参照物的定位方式：有祖先盒子声明了定位方式，以距离最近的祖先盒子为参照物定位，以参照物的边框内部为准
3.固定定位：position：fixed；脱离文档流position的属性值
4.static 普通文档流
5.inherit：继承父亲的position
移动端精灵图的二倍图
先将整个图片的width设置为原图的二分之一
再根据图片的位置设置background属性
图片与顶端之间有白色的空隙
vertical-align：middle；
待补充