基础课第七天到第八天，学习布局

1.flexbox布局

http://www.css88.com/archives/7760

http://www.css88.com/archives/7212

参照这两个一起看，第二个是动画，看起来更加直观。

2.垂直居中

效果：

 

可以发现，只产生了左右居中，并没有达到预期效果的水平垂直居中

这时候应该改用定位

position: relative;

    top: 50%;

    transform: translateY(-50%);

效果：

达到居中位置。

参考：https://www.zhihu.com/question/20543196

3.圆角

需要单独针对某一个角设置为圆角可以使用下面代码：
border-top-left-radius:5em;
border-top-right-radius:5em;
border-bottom-right-radius:5em;
border-bottom-left-radius:5em;

4.绝对定位和相对定位的配合使用

父元素用position:relative定位

子元素用position:absolute定位，然后用top/left/right/bottom这些改变位置