前端面试复习（一）HTML5和CSS3的经典面试题

最新推荐文章于 2024-04-03 08:48:08 发布

槐序&清和

最新推荐文章于 2024-04-03 08:48:08 发布

阅读量332

点赞数

本文链接：https://blog.csdn.net/death_of_King/article/details/108377581

版权

本文总结了HTML5和CSS3的面试重点，包括盒子模型的理解，如标准和怪异盒子模型，以及Flex盒子模型和多列布局。还探讨了盒子水平垂直居中的多种方法，如定位、display属性和CSS3新特性。同时，介绍了经典布局方案如圣杯布局和双飞翼布局的实现，并讨论了移动响应式布局的开发技术，如media查询、rem单位和视窗单位。

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

HTML5和CSS3的经典面试题

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

定位：三种

<div class="father">
    <div class="son">
    </div>
</div>

<style>
    .father {
        position: relative;
    }
    .son {
        position: absolute;
        width: 100px;
        height: 100px;
        
        //第一种方案，需要知道宽高
        top: 50%;
        left: 50%
        margin-top: -50px;
        margin-left: -50px
            
        //第二种方案，需要有宽高
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        
        //第三种方案,不兼容
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

display:flex

<div class="father">
    <div class="son">
    </div>
</div>

<style>
    //兼容问题
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
	}
</style>

display:table-cell

<div class="father">
    <div class="son">
    </div>
</div>

<style>
    .father {
       	//要求盒子固定宽高
        width: 500px
        height: 500px
        display: table-cell;
        vertical-align: middle;
        text-align: center;
	}
    .son {
        display: inline-block;
    }
</style>

2.关于CSS3中盒子模型

标准盒子模型（box-sizing:content-box）
怪异盒子模型（box-sizing:border-box）
Flex盒子模型
多列布局盒子模型

经典布局方案

圣杯布局 => 左右固定，中间自适应

<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 {
        width: 100%;
        padding: 0 200px;
    }
    .left,
    right {
        width: 200px;
        min-height: 200px;
        background: lightblue;
	}
    .ccenter {
        width: 100%;
        min-height: 400px;
        backgraound: lightsalmon;
	}
    .left,
    .center,
    .right {
        float: left;
    }
    .left {
        margin-left: -100%;
        position: relative;
        left: -200px;
	},
    .right {
        margin-right: -200px
	}
</style>

双飞翼布局

<body class=“clearfix”>
    <div class="container">
   		<div class="center"></div>
	</div>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
     html,
    body {
        height: 100%;
        overflow: hidden;
    }
    .left,
    .center,
    .right {
        float: left;
    }
    .container {
       width: 100%;
    }
    .contain .center {
        margin: 0 200px;
        min-height: 400px;
        background: lightsalmon;
    }
    .left,
    .right {
        width: 200px;
        min-height: 200px;
        background: lightblue;
	}
    .left {
        margin-left: -100%;
	}
    .right {
        margin-left: -200px;
	}
</style>

使用CALC

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

Flex实现

<div class="container">
    <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: lightblue;
}
.center {
    flex: 1;
    min-height: 400px;
    background: lightsalmon;
}
</style>

定位实现

html,
body {
    height: 100%;
    overflow: hidden;
}.
.container {
    positoin: relative;
    height: 100%;
}
.left,
.right {
    position: absolute;
    top: 0;
    width: 200px
    min-height: 200px;
    background: lightblue;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0 200px;
    min-height: 400px;
    background: lightsalmon;
}