前端面试之布局

昨天朋友去公司面试了一波，某公司给来了三道机试题，限时15分钟写出这三道布局题（要求务必完成前面两道），朋友拍了个照片发群里，然后我想着帮他来着，没想到一看到题目我一脸懵逼，只能怪自己还是不够努力，还处于小菜鸟阶段，限时写的话我感觉自己确实不能信手拈来，今天抽空把题目做了下，当然肯定有好多种方式实现，精力有限就各总结一种吧。

1.间距50像素，容器自适应

要求实现间距50像素，容器自适应

• HTML部分

<ul class="box">
    <li></li>
    <li></li>
</ul>

• CSS部分

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    /*用flex布局*/
    display: flex;
    padding: 0 25px;
}
li{
    flex: 1;
    background-color: #0ee69c;
    margin:50px 25px;
    height: 100px;
}

2.两边容器固定130像素 中间容器自适应距离左右容器10像素

要求实现以上效果，有很多种布局方式

• HTML部分

<div class="outer">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

• CSS部分

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.left,.right{
    width: 130px;
    height: 200px;
    background-color: #b7aa00;
}
.left{
    float: left;
    margin-right: 15px;
}
.right{
    float: right;
    margin-left: 15px;
}
.center{
    height: 200px;
    background-color: #eb6100;
    overflow: hidden;
}

3.实现switch开关效果

开关关闭跟打开的效果示例图

• HTML部分

<div class="switch">
    <input id="input" class="toggle" type="checkbox">
    <label for="input"></label>
</div>

• CSS部分

*{
    margin: 0;
    padding: 0;
}
.switch{
    margin: 100px auto;
    width: 400px;
}
.toggle{
    position: absolute;
    margin-left: -9999px;
}
.toggle + label{
    display: block;
    position: relative;
    cursor: pointer;
}
input.toggle + label{
    width: 120px;
    height: 60px;
    background-color: #ddd;
    padding: 2px;
    border-radius: 60px;
}
input.toggle + label:before,
input.toggle + label:after{
    position: absolute;
    display: block;
    content: '';
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 0;
}
input.toggle + label:before{
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
}
input.toggle + label:after{
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
}
input.toggle:checked + label:before {
    background-color: orange;
}
input.toggle:checked + label:after{
    margin-left: 64px;
}