2022 web前端面试题【1】 — CSS、 HTML篇

2022 web前端面试题【1】 — CSS、 HTML篇

转眼就2022，一方面回首者2021的所经历的，一方面期待着2022的新生活。小月博客祝愿大家2022都可以平安喜乐。从2014年一直支持到2022的铁粉小伙伴相信都结婚有娃娃了吧哈哈，还有近几年来到的小伙伴很感谢大家一直以来的支持。煽情的话不多说了，近期不忙给大家陆续整理一下面试题吧。希望新的一年大家都可以有满意的工作❤️。

有关html、css常见面试题

1、如何理解语义化？

2、块级元素和行内元素有哪些？

3、布局问题

— 盒子模型的宽度如何计算？
— margin 纵向重叠的问题？
— margin 负值的问题？
— BFC 的理解和应用？
— float布局的问题如何实现圣杯布局和双飞翼布局？
— 手写 clearfix？
— flex 画筛子？
— absolute 和 relative分别依据什么定位？
— 居中对齐有哪些方式？

4、图文样式： line-height的继承问题如何解决？

5、响应式： rem是什么？如何利用rem实现响应式

问题解答：

Q：1、如何理解语义化

— 让人更容易读懂代码（增加代码可读性）
— 让搜索引擎更容易读懂（SEO）

Q: 2、块级元素和行内元素有哪些

— display: block/table [ div、h1, h2, table, ul,ol,p]
— display: inline/inline-block; 有 span, img, input, button 等

3、布局问题

【1】Q: 盒子模型的宽度（offsetWidth）如何计算？

#div{
    width:100px;
    padding: 10px;
    border:1px solid #CCC;
    margin:10px
}

offsetWidth = (内容宽度 + 内边距 + 边框)， 无外边距
* 故此答案： 122px

何如让offsetWidth=100？ ==》 添加 box-sizing：border-box；

【2】margin 纵向重叠的问题如何解决

p{
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
}

<p>第一行</p>
<p></p>
<p></p>
<p></p>
<p>第五行</p>

请问第一个p标签和第五个的间距是多少？

答案：15px

⚠️注意：

～相邻元素的margin-top和margin-bottom 会发生重叠
～空白内容的<p></p>也会重叠

【3】margin 负值的问题

· margin-top 和 margin-left 负值，元素向上，向左移动
· margin-right 负值 右侧元素左移动，自身不受影响
· margin-bottom 负值，下方元素上移，自身不受影响

【4】 BFC 的理解和应用

<style type="text/css">
.container {
    background-color: #f1f1f1;
}
.left {
    float: left;
}
.bfc {
   overflow: hidden; /* 触发元素 BFC */
}
</style>

<div class="container bfc">
    <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
    <p class="bfc">某一段文字……</p>
</div>

含义： Block format context 块级格式化上下文
· 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件
· float 不是none
· position不是absolute 或fixed
· overflow 不是visible

【5】float布局的问题如何实现圣杯布局和双飞翼布局

—「圣杯布局」—

<div id="header">this is header</div>
<div id="container" class="clearfix">
    <div id="center" class="column">this is center</div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>

body {
    min-width: 550px;
}
#header {
    text-align: center;
    background-color: #f1f1f1;
}

#container {
    padding-left: 200px;
    padding-right: 150px;
}
#container .column {
   float: left;
}

#center {
   background-color: #ccc;
   width: 100%;
}
#left {
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -100%;
    right: 200px;
}
#right {
    background-color: red;
    width: 150px;
    margin-right: -150px;
}

#footer {
   text-align: center;
   background-color: #f1f1f1;
}

/* 手写 clearfix */
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

—「双飞翼布局」—

<div id="main" class="col">
    <div id="main-wrap">
         this is main
    </div>
</div>
<div id="left" class="col">
    this is left
</div>
<div id="right" class="col">
    this is right
</div>

body {
    min-width: 550px;
}
.col {
    float: left;
}

#main {
   width: 100%;
   height: 200px;
   background-color: #ccc;
}
#main-wrap {
   margin: 0 190px 0 190px;
}

#left {
    width: 190px;
    height: 200px;
    background-color: #0000FF;
    margin-left: -100%;
}
#right {
    width: 190px;
    height: 200px;
    background-color: #FF0000;
    margin-left: -190px;
}

目的：三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应，一般用于PC网页

技术总结：
· 使用float布局
· 两侧使用margin 负值，以便和中间内容横向重叠
· 防止中间内容被两侧覆盖，一个用padding，一个用margin

【6】手写 clearfix

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
.clearfix{
    *zoom: 1; /*兼容IE低版本*/
}

【7】flex 画筛子

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

.box {
   width: 200px;
   height: 200px;
   border: 2px solid #ccc;
   border-radius: 10px;
   padding: 20px;
   display: flex;
   justify-content: space-between;
}
.item {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #666;
}
.item:nth-child(2) {
   align-self: center;
}
.item:nth-child(3) {
   align-self: flex-end;
}

考察属性应用主要：

flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
align-self: center;

【8】absolute 和 relative分别依据什么定位？

• absolute：生成绝对定位的元素， 相对于 最近一级的定位不是 static 的父元素来进行定位。
• fixed：（老IE不支持）生成绝对定位的元素，通常 相对于浏览器窗口或 frame 进行定位。
• relative：生成相对定位的元素， 相对于其在普通流中的位置进行定位。
• static： 默认值。没有定位，元素出现在正常的流中
• sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出

【9】 居中对齐有哪些方式？直接看案例吧！

—「水平居中」—

<div class="container container-1">
    <span>一段文字</span>
</div>

<div class="container container-2">
     <div class="item">
        this is block item
    </div>
</div>

<div class="container container-3">
    <div class="item">
        this is absolute item
    </div>
</div>

.container {
   border: 1px solid #ccc;
   margin: 10px;
   padding: 10px;
}
.item {
   background-color: #ccc;
}

.container-1 {
   text-align: center;
}

.container-2 .item {
   width: 500px;
   margin: auto;
}

.container-3 {
   position: relative;
   height: 100px;
}
.container-3 .item {
   width: 300px;
   height: 100px;
   position: absolute;
   left: 50%;
   margin-left: -150px;
}

—「垂直居中」—

<div class="container container-1">
    <span>一段文字</span>
</div>

<div class="container container-2">
    <div class="item">
        this is item
    </div>
</div>

<div class="container container-3">
    <div class="item">
       this is item
    </div>
</div>

<div class="container container-4">
    <div class="item">
       this is item
    </div>
</div>

.container {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    height: 200px;
}
.item {
    background-color: #ccc;
}

.container-1{
    text-align: center;
    line-height: 200px;
    height: 200px;
}

.container-2 {
    position: relative;
}
.container-2 .item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -50px;
}

.container-3 {
    position: relative;
}
.container-3 .item {
    width: 200px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.container-4 {
    position: relative;
}
.container-4 .item {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

⚠️注意：主要利用margin、定位、css3的transform: translate(-50%,-50%);

4、图文样式：line-height的继承问题

body {
    font-size: 20px;
    line-height: 200%;
}
p {
    background-color: #ccc;
    /*font-size: 16px;*/
}

⚠️：考察点

数字倍数：1.5: 继承自身的font-size*1.5 = 行高
百分数：200%：继承父元素的font-size*200% = 行高
直接像素：16px： 直接继承

5、响应式： rem是什么？如何利用rem实现响应式

需要明白的：

· rem是一个长度单位，相对于跟元素的
· px 绝对长度单位，最常用
· em 相对长度单位，相对于父元素，不常用

一下代码实现响应式，根据设备屏幕宽度。

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

===========html===========
body {
    font-size: 0.16rem;
}
#div1 {
    width: 1rem;
    background-color: #ccc;
}

最新单位： vw + vh 和可以动态实现响应式。具体自行了解

总结：

以上是总结的前端常见的基础面试题，如果需要视频讲解的可以点击下方链接直接下载，有不对的地方欢迎指正，大家有遇到其他的面试题可以联系我补充上去哦。2022让我们一起加油吧！???

《 快速搞定前端技术一面 匹配大厂面试要求 》 百度云下载通道