面试CSS-两侧固定宽度，中间自适应的三列布局

 1. 圣杯布局  （圣杯布局的的原理是利用margin的负值的特性来实现的。）   
   注：布局中间部分一定要放在前面，左右顺序不限制。对于left块的margin负值一定要等于wrap的宽度。
   主要步骤如下：
   在center块外层添加一个div，并设置左浮，以及宽度（这个宽度要与left块的margin-left相匹配），
   center块设置左右的margin，margin-left要与left块的宽度相等，margin-right要与right块的宽度相等。
   left块设置左浮，并且其margin-left设置成负值，这个负值与center块外层的div的宽度相等，这样，left块就移动到center的左侧了。
   right块设置左浮，并且其margin-left设置成负值，这个负值与自身宽度相等，这样，right块就移动到center的右侧了。*/

    
center

left
right

效果图如下：

1.设置 conter

margin: 0 200px;    /*关键步骤：在#center的左右两侧空出#left_margin和#right_margin的宽度来*/

2.设置left,right
margin-left: -100%; /*关键步骤：能够让#left_margin块从第二行移动到左侧*/
margin-left: -200px; /*关键步骤：能够让#right_margin块从第二行移动到右侧*/

2.flex布局

在外围包裹一层div，设置为display：flex；
center块设置flex：1，不设置宽度，
left和right块设置固定的宽度。

3.绝对定位的方法

这种方法，其实原理很简单。
就是将左右两侧使用绝对定位，这样二者脱离了文档流，
中间的部分则设置margin就好了。

4.浮动的方法

浮动法的原理其实跟绝对定位相似的，就是使用对左右使用分别使用float:left和float:right， 从而使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。 需要注意的是：center块要写在左右两侧的后面，不然，不在一行。