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让我们一起加油吧!💪💪💪

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

 

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?