北森云计算2023校招提前批面经

最新推荐文章于 2025-10-31 09:57:10 发布

原创

最新推荐文章于 2025-10-31 09:57:10 发布 · 1.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #面试 #javascript #缓存

本文深入探讨前端开发中的布局技巧，包括水平垂直居中方法，如BFC、Flexbox实现。同时讲解JavaScript中的作用域、作用域链、闭包，以及Promise的使用，如Promise.all和Promise.race。还涉及事件委托的概念，以及浏览器缓存机制和HTTP状态码的含义。

一面在6.30
bfc,作用域,作用域,什么情况有局部变量,水平垂直居中,flex居中,promis使用,all,race,301,302,304,
cache-troal与express时间,es6特性,es6块级作用域,事件代理委托,e.earget
闭包,优缺点,代理,垃圾回收
原型,原型链作用,object的原型. es6中继承
作用域链

元素居中

水平居中

行内元素

直接设置元素居中

text-align:center

块元素

定宽

使块元素左右自动对齐

margin:0 auto

不定宽

1.将元素设置为行内元素，直接按照行内元素设置

        .container{
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            text-align: center;
        }
        .inner{
   
   
            display: inline-block;
            border: 1px solid black;
        }

2.将元素设置为绝对定位,通过left移动父元素的50%,在通过translateX自身的50%

        .container{
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
   			position: relative;
        }
        .inner{
   
   
            border: 1px solid black;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

flex方式

对于顶宽或不定宽的元素都适用

设置父元素为flex弹性盒，设置内容分布为center

        .container{
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
           display: flex;
           justify-content: center;
        }
        .inner{
   
   
            border: 1px solid black;
        }

垂直居中

行内元素

给父元素设置line-high，与父元素同高时会自动垂直居中

       .container {
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
            line-height: 300px;
        }
        .inner {
   
   
            border: 1px solid black;
        }

块元素

定高

根据父元素高度和元素高度，直接margin-top：（FatherHeight - SonHeight）/2

不定高

1.设置父元素相对定位，子元素绝对定位，top距离50%，然后上移自身尺寸50%

       .container {
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .inner {
   
   
            border: 1px solid black;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

flex方式

对于顶高或不定高的元素都适用

设置父元素为flex弹性盒，设置内容，在侧轴上元素为分布为center

        .container{
   
   
            border: 1px solid #d5ebe1;
            width: 300px;
            height

最低0.47元/天解锁文章