1.

实现一个两栏布局，左侧固定宽度200px，右侧自适应宽度，附上预览接。

1. 使用浮动做布局
2. 使用 flex 布局
   使用浮动布局时记得父容器要清除浮动哦

2.

实现一个三栏布局，两侧固定宽度200px，中间宽度自适应撑满，附上链接。

1. 浮动布局
2. flex 布局

3.

css reset 是什么？css 预编译器是什么？ 后编译器(post css)是什么？
重置样式
作用：解决默认样式不兼容问题；让各个浏览器的CSS样式有一个统一的基准。
注意：不要把全面的reset复制粘贴到自己的style目录下，应该仔仔细细选择一翻，留下有用的，没用的和不必要的就不要让它们白白增加css的大小了

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, 
cite, code, del, dfn, em, font, img, 
ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
center, u, b, i { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline 
} 
body { 
    line-height: 1 
} 
:focus { 
    outline: 0 
} 
ol, ul { 
    list-style: none 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0 
} 
blockquote:before, blockquote:after, q:before, q:after { 
    content: “” 
} 
blockquote, q { 
    quotes: “” “” 
} 
input, textarea { 
    margin: 0; 
    padding: 0 
} 
hr { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    color: #000; 
    background-color: #000; 
    height: 1px ;
}}

以上css reset代码载自网络，一个很全面的reset.css

css预编译器：

作用： 解决css繁重、冗杂的样式
解决css的缺点：
1.语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
2.没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
3.如今比较流行是Sass、Less 和 Stylus 这三种 css 预编译器。

后编译器(post css):

PostCSS 是一个CSS后处理器框架，允许你通过 JavaScript 对 CSS 进行修改。
特点：
1.它和 Rework 非常相似，但提供了 更高级的 API，更易扩展
2.它可以在现有 Source Map 的基础上生成新的 Source Map
3.在 原有 CSS 格式 的保留方面做的更好，便于开发 编辑器插件

4.

实现如下居中方式，并附上 Demo 链接
要求：块级元素固定宽度，水平居中

1. 范例

5.

实现如下居中方式，并附上 Demo 链接
要求：大段文字在容器内水平垂直居中
范例

6.

实现如下居中方式，并附上 Demo 链接
要求：并列三个按钮，在父容器内水平居中
范例

7.

实现如下居中效果，
要求：图片在容器内水平垂直居中，容器宽高大于图片宽高

1. 使用 table-cell
2. 借用伪元素
3. flex

8.

实现如下居中方式
要求： 固定宽高的块在浏览器窗口水平垂直居中
范例

9.

实现如下居中方式
要求： 不定宽高的块在浏览器窗口水平垂直居中
范例