面试总结

1、两栏布局——

绝对定位法：若左栏高度超过右栏，则包裹层container无法撑开

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左栏固定宽度，右栏自适应之绝对定位法</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        #nav{
            top: 0;
            left: 0;
             230px;
            height: 600px;
            background: #ccc;
            position: absolute;
        }
        #main{
            height: 600px;
            margin-left: 230px;
            background: #0099ff;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="nav">
        左栏
    </div>
    <div id="main">
        右栏
    </div>
</div>
</body>
</html>

　　float浮动方法：外包裹层不会因为左栏height > 右栏height而不能撑开外包裹层。此方法不会影响底部布局

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左栏固定宽度，右栏自适应之负margin法</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        #container{
           /* margin-left: 230px;  也可以配合#nav的注释部分这样写 */
        }
        #nav{
            float: left;/*采用浮动float方法*/
             230px;
            height: 600px;
            background: #ccc;
           /* margin-left: -230px;*/
        }
        #main{
            height: 600px;
            background: #0099ff;
            margin-left: 230px;/*没有这步右栏则在左栏下，和左栏位置相同*/
        }
    </style>
</head>
<body>
<div id="container">
    <div id="nav">
        左栏
    </div>
    <div id="main">
        右栏
    </div>
</div>
</body>
</html>

　　2、元素垂直居中

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
        }
        #container{
           200px;height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>

<script>
    window.onload=function(){
        var winH=document.documentElement.clientHeight;/有兼容问题/
       var elemH=document.getElementById('container').offsetHeight;
        document.getElementById('container').style.marginTop=(winH-elemH)/2+'px'
    }
</script>
</html>