1、弹出窗——
宽度最小值300px，高度根据实际情况，一般250px,采用绝对定位的方法使之水平垂直方向居中（posotion:fixed;top:0;left:0;right:0;bottom:0;margin:auto）。内部元素全部采用百分比方式设置宽度。
在这种情况下，魅族和苹果会在居中方面有问题。解决方法：在弹出框外部加个父元素，并给父元素设置绝对居中（posotion:absolute:top:0;left:0;right:0;bottom:0;margin:auto）
2、多行多列之间水平布局——
可用列表作为结构，列表中的子元素设置margin属性四边相同
3.手机端内面内容布局——
不要规定绝对尺寸，可使用min-width属性设置最小宽度，里面的元素不要用绝对尺寸，适用百分比或者定义rem。
4、一行多列的居中布局——
使用百分比适应性非常不好，小屏适合了，大屏有别扭了，但在其他两列布局下使用百分比效果都可控，不知为何。
可使用flex属性。使用方法：父元素设置display：flex,子元素根据需要调整flex：n的值，最后子元素的width = 父元素宽度 * (n/(子1的n值 + 子2的n值 + 。。。))
注：划分的区域中带背景就不适用这个方法了，可以用百分比或者绝对尺寸
诙谐又易懂的文章再次：http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/
5、IE9一下版本不兼容opacity属性解决方法——
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
6、浮动元素居中——
父元素设置text-align:center;子元素设置display：inline-block。
7、可设置尺寸的行内元素（img、input）上下、左右排列有间距的解决方法——
使行内元素float，并清除浮动
8、使用css3 filter属性中的blur注意事项——
不可为body设置blur，否则所有的元素都讲一片蒙蒙胧；
为每个大的分割区域加个共同的类名，如.row,最后在body上统一加上blur样式。实际按照一般情况可能就是header,wrap和footer了；
在用position:absulote+zindex!=0时用transform会偶尔出现页面会闪的现象，解决方法有三：
-
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
该方法对于sprite图无效。 -
body {-webkit-transform:translate3d(0,0,0);}
-
.no-flick{-webkit-transform:translate3d(0,0,0);}
比较多使用的解决方法是 -webkit-backface-visibility: hidden;
9、absolute与z-index对层次的影响——
9.1、不使用 position ：
这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.
9.2. 使用 absolute ：
如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.
9.2.1不使用z-index：
依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0；
9.2.2使用z-index:
z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层.
9.3父子元素：
子元素的从属于父元素的层次,子元素在父层的上面
9.4混合使用：
对于没有设置 position:absolute 属性的元素 不管 z-index 设置多少都为 0, 但低于 position:absolute 中 z-index:0 的元素