前端面试准备

最新推荐文章于 2024-09-28 19:02:04 发布

X-Adobe

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量625

点赞数

分类专栏：面试笔记文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/weixin_50767381/article/details/124665654

版权

本文主要探讨了前端面试中常见的几个关键知识点，包括如何使用flex布局实现div的居中，理解flex-grow属性的工作原理，constructor构造器的指向，原型链的查找规则，以及如何判断属性是否为实例的基本属性。此外，还涵盖了变量访问、节流防抖、闭包和let与var的区别，这些都是前端开发者必备的技能。

摘要由CSDN通过智能技术生成

前端面试准备一

将一个div在页面上下左右居中（flex）布局

<style>
        body,html{
   
            height: 100%;
            width: 100%;
        }
        body{
   
            display: flex; // 第一步
        }
        .coon{
   
            width: 500px;
            height: 500px;
            background-color: brown;
            margin: auto; //第二步
        }
    </style>
</head>
<body>
    <div class="coon"></div>
</body>
</html>

flex-grow属性值关系

在这里插入图片描述

<div class="coon">
        <div class="div1" style="flex-grow: 1;">111</div>
        <div class="div2" style="flex-grow: 2;">222</div>
        <div class="div3" style="flex-grow: 1;">333</div>
</div>

.coon{
   
            width: 100%;
            height: 200px;
            display: flex;
}
.div1{
   
            width: 200px;
            height: 100%;
            margin: auto;
            background-color: burlywood;
}
.div2{
   
            width: 200px;
            height: 100