经典面试题

1.代码实现左边div宽度为100px，右边自适应的布局。

（1）flex布局

<!DOCTYPE html>
<html>
<head>
    <title>代码实现左边div宽度为100px，右边自适应的布局。</title>
</head>
<style type="text/css">
    .container{
        display: flex;
        height: 500px;
    }
    .left{
        width: 100px;
        background:gray;
    }
    .right{
        flex: 1;
        background: #000;
    }
</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
View Code

（2）浮动布局（必须设置宽高）

<!DOCTYPE html>
<html>
<head>
    <title>代码实现左边div宽度为100px，右边自适应的布局。</title>
</head>
<style type="text/css">
    .container{
        overflow: hidden;
        height: 500px;
    }
    .left{
        width: 100px;
        float: left;
        height: 100%;
        background:gray;
    }
    .right{
        width: auto;
        height: 100%;
        background: #000;
    }
</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
View Code

（3）左侧使用定位，右侧不定位（或者左侧使用定位不写left：100px，右侧使用margin-left：100px）（必须设置宽高）

<!DOCTYPE html>
<html>
<head>
    <title>代码实现左边div宽度为100px，右边自适应的布局。</title>
</head>
<style type="text/css">
    .container{
        position: relative;
        height: 500px;
    }
    .left{
        width: 100px;
        position: absolute;
        left: 0;
        height: 100%;
        background:gray;
    }
    .right{
        height: 100%;
        background: #000;
    }
</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
View Code

2.let var const 声明变量的区别

const声明一些常量，后面不允许修改。

let声明变量，块作用域，后面不能覆盖之前声明的值。

var声明变量，函数作用域,全局作用域，后面能覆盖之前声明的值。

 

posted @ 2019-12-02 17:22  ~西门紫凌~  阅读(142)  评论(0)  编辑  收藏  举报