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

最新推荐文章于 2024-03-15 08:30:00 发布

VIP文章尘风gg

最新推荐文章于 2024-03-15 08:30:00 发布

阅读量1.9k

点赞数 1

文章标签： javascript

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

版权

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...
复制链接

扫一扫