css精讲1

响应式
两个选择

1. 一套代码适应所有屏幕
   1.1 flex布局
   1.1.1不同情况下需要媒体查询切换页面
   1.2 动态REM布局
2. 多套代码（不同屏幕不同套代码）

布局

1. pc
   1.1 IE8：float布局
   1.1.1 左右布局（宽度一致，然后清除浮动）
   1.2 Chrome
   1.2.1 flex布局

2. mobile
   2.1 flex布局

居中

1. 水平居中
   块级元素
   1.1 子元素宽度不确定，（margin-left/right：20px）
   1.2 子元素宽度确定（margin-left/right：auto）
   行内元素
   1 text-align：center

垂直居中
子元素高度不确定/确定（父元素，padding-top/bottom：20px）

父元素高度确定，子元素不确定：
IE：

1. table：div（模拟table）

Chrome
flex

mobile
flex