web前端面试题以及相关答案解析

最新推荐文章于 2024-06-17 02:46:14 发布

尘风gg

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量2k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43598023/article/details/124218076

版权

本文列举了web前端面试中常见的CSS和JavaScript题目，包括盒模型、居中方式、优先级、浮动原理等CSS知识点，以及栈、堆的区别、JavaScript继承方式、创建对象的方法等JavaScript基础内容。此外，还涉及Vue框架的生命周期、组件通信和路由实现。面试题涵盖从基础到进阶的多个方面，旨在帮助应聘者准备面试。

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

web前端工程师面试题

CSS面试题

1.盒模型

答案: 基础概念 : 标准模型 + IE模型包括: margin , border ,padding ,content

标准模型和IE模型的区别 : 内容计算方式不同

1, IE模型元素宽度 width =content + padding +border

标准模型元素宽度 width = content

2.如何让一个盒子水平垂直居中？

答案:

方式一: 绝对定位 +margin (需要指定子元素的宽高 ,不推荐)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div {
        width: 750px;
        height: 750px;
        background: violet;
        position: relative;
    }

    .div1 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -75px;
        background: turquoise;
    }

    .big {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="big">
        <div class="div">
            盒子一
            <div class="div1">盒子二</div>
        </div>
    </div>
</body>

</html>

方式二: 绝对定位 + translate(无需指定子元素的宽高,推荐)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div {
        width: 750px;
        height: 750px;
        background: violet;
        position: relative;
    }

    .div1 {

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: turquoise;
    }

    .big {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="big">
        <div class="div">
            盒子一
            <div class="div1">盒子二</div>
        </div>
    </div>
</body>

</html>

方式三:绝对定位 + margin:auto

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div {
        width: 750px;
        height: 750px;
        background: violet;
        position: relative;
    }

    .div1 {
        width: 100px;
        height: 100px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: turquoise;
    }

    .big {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="big">
        <div class="div">
            盒子一
            <div class="div1">盒子二</div>
        </div>
    </div>
</body>

</html>

方式四: flex 布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div {
        width: 750px;
        height: 750px;
        background: violet;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .div1 {
        width: 100px;
        height: 100px;
        background: turquoise;

    }

    .big {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="big">

最低0.47元/天解锁文章

尘风gg

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端面试题以及相关答案解析

web前端工程师面试题CSS面试题1.盒模型答案: 基础概念 : 标准模型 + IE模型包括: margin , border ,padding ,content 标准模型和IE模型的区别 : 内容计算方式不同 1, IE模型元素宽度 width =content + padding +border 标准模型元素宽度 width = content2.如何让一个盒子水平垂直居中？答案:方式一: 绝对定位 +m...
复制链接

扫一扫