前端面试总结（一）— css篇

   最近准备离职，今天去某家公司前端，面试官问了好多css基础问题，才发现好多东西长时间不怎么用都有点记不清了，写个博客回顾一下。

（1）三列中间自适应布局

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>

</div>

/* 三列中间自适应布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}

.g-mn5c{margin:0 200px 0 240px;}

原理利用margin负值，方法来自网易nec，其实margin负值的作用很多，比如去除列表最后一项的边线以及右边框等。更多margin负值的用法可参考：

https://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

（2）元素垂直居中

1.负margin法:这是比较常用的方法，在知道元素的宽高的前提下才能使用

2.transform法：不知道自己高度和父容器高度的情况下

parentElement { position : relative ; }

childElement { position : absolute ; t op : 50% ; transform : translateY ( -50% ); }

3. Flex 布局： 不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}