前端面试题--01

2024-01-15 11:14:52

几道前端经典的面试题

掌握盒子水平垂直居中的五大方案

<style>
    body{
        height: 100%;
        overflow: hidden;
    }
    .box{
        height: 50px;
        width: 100px;
        background-color: blue;
    }
</style>
<body>
    <div class="box" id="box">hello world</div>
</body>

定位：三种

body{
    position: relative;
}
/* 定位1 元素大小是确定的*/
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -50px;
}

/* 定位2 元素必须得有宽高*/
.box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/* 定位3 不需要具体宽高，兼容性不太好*/
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

display:flex

/* display:flex 兼容性不太好*/
body{
    display: flex;
    justify-content: center;
    align-items: center;
}

javaScript

body{
	position: relative;
}
.box{
	position: absolute;
}
<script>
let HTML = document.documentElement,
    winW = HTML.clientWidth,
    winH=HTML.clientHeight,
    boxW=box.offsetWidth,
    boxH=box.offsetHeight;
    box.style.position="absolute";
    box.style.left=(winW-boxW)/2+'px';
    box.style.top=(winH-boxH)/2+'px';
</script>

display:table-cell

/* display: table-cell 父元素必须得有固定宽高*/
body{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* 固定宽高 */
    height: 500px;
    width: 500px;
    background-color: blue;
}
.box{
    display: inline-block;
}

关于css3中盒模型的几道面试题
- 标准盒子模型。box-sizing: content-box; width和height指的内容content，不是盒子大小
- IE盒子模型。box-sizing: border-box; width和height指的盒子大小，大部分情况下用的IE盒子模型
- FLEX盒模型
- 多列布局。基本不用

掌握几大经典布局方案

圣杯布局：浮动和负MARGIN

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
    }
	.container{
        height: 100%;
        padding: 0 200px;
    }
    .left,.right{
        width: 200px;
        min-height: 200px;
        background-color: blue;
    }
    .center{
        width: 100%;
        min-height: 400px;
        background-color: pink;
    }
    .left,.center,.right{
        float: left;
    }
    .left{
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right{
        margin-right: -200px;
    }       
</style>

双飞翼布局：浮动和负MARGIN

<div class="container clearfix">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
    }
	.container{
        width: 100%;
    }
    .container,.left,.right{
        float: left;
    }
    .containe .center{
        margin: 0 200px;
        min-height: 400px;
        background-color: pink;
    }
    .left,.right{
        width: 200px;
        min-height: 200px;
        background-color: blue;
    }
    .left{
        margin-left: -100%;
    }
    .right{
        margin-left: -200px;
    }   
</style>

使用CALC：不推荐，css中尽量少些表达式

.center{
    width: calc(100%-400px);
    min-height: 400px;
    background: orange;
}

flex布局

<div class="container clearfix">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<style>
    html,body{
        overflow: hidden;
    }
    .container{
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    .left,.right{
        flex: 0 0 200px;
        height: 200px;
        background: blue;
    }
    .center{
        flex: 1; //1自动分配剩余空间
        min-height: 400px;
        background:pink;
    }
</style>

定位

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<style>
    html,body{
        height: 100%;
        overflow: hidden;
    }
    .container{
        position: relative;
        height: 100%;
    }
    .left,.right{
        position: absolute;
        top: 0;
        width: 200px;
        min-height: 200px;
        background: blue;
    }
    .left{
        left: 0;
    }
    .right{
        right:0;
    }
    .center{
        margin: 0 200px;
        min-height: 400px;
        background: pink;
    }
</style>

移动端响应式布局开发的三大方案
- media: pc和移动用同一套，百分比
- rem：pc和移动用两套，pc端用px，移动端rem
- flex
- vh/vm：百分比布局
- ......
使用css,让一个div消失在视野中，发挥想象力？
请说明z-index的工作原理，适用范围？
- 文档流
- 定位
谈谈你对HTML5的理解？
如何使一个div里面的文字垂直居中，且该文字的大小根据屏幕大小自适应？
不考虑其他因素，下面哪种的渲染性能比较高？

答：第二种好，因为css浏览器渲染机制选择器从右到左查询，第一种先查找所有a,再查box
```
.box a{
    ...
}
    
a{
    ....
}
```

码农公寓

几道前端经典的面试题

相关文章