页面居中、响应式布局的总结

一、水平居中（父容器和子容器的宽度都是不一定的）

1.inline-block+text-align

如果不希望元素内的文字水平居中，那么需要在child中设置text-align为left。

2.table+margin

只需要设置子元素。

3.absolute+transform

子元素不会对其他元素产生影响。

4.flex+justify-content

只需设置父元素。

二、垂直居中（父容器和子容器的高度都是不一定的）

1.table-cell+vertical-align

兼容性比较好。

2.absolute+transform

子元素不会干扰其他的元素。

3.flex+align-items

只需对付元素进行设置。

三、居中（父容器和自容器的大小都是不确定的）

1.inline-block+text-align+table-cell+vertical-align

2.absolute+transform

3.flex+justify-content+align-items

四、多列布局（一列定宽，另一列自适应）

1.float+margin

改进方案：（清除浮动的时候不会出现问题）

2.float+overflow

3.table

table-cell不能设置margin，所以用padding值来设置间距。

4.flex

性能可能有问题，通常只用作小范围的布局，即left和right中的内容不要太多。

五、多列布局（一列不定宽，另一列自适应）

1.float+overflow

2.table（将table-layout：fixed删除）

3.flex

六、全屏布局（有固定区域也有自适应区域）

1.position

2.flex（css3新出现的概念）

flex-direction不设置时默认值为row，水平方向。
如果需要每个模块都自适应，通过里面的内容来撑起宽高，则删除代码中的高度设置就行。

七、响应式

1.少用定宽，多用自适应。

宽度设置为设备宽度；初始缩放为1，用户不能手动缩放。

2.媒体查询（防止手机屏幕太小布局发生变化）

里面写要改变显示方式的样式css

八、页面优化

1.减少请求：
图片合并、
减少css文件请求，多个css文件合并成一个、少量css样式内联、避免使用import方式引入css文件（每个import都会产生请求，且同步）

2.减少图片大小：
选择合适的图片格式
压缩图片（ImageOptim）

3.css值缩写

4.省略值为0的单位px

5.颜色值最短表示：英文单词、十六进制、rgb

6.css选择器合并

7.文件压缩：YUI Compressor

8.css文件放在head中，js放在body的底部（js的加载会阻塞其他资源的加载，处理逻辑也需要等到所有页面加载完成后才处理）

9.减少标签数量

10.简短选择器长度

11.要给图片设置宽高：img中的图片尽量不要缩放，在标签中就设置宽高

12.样式表现多用css，少用js