精心整理HTML/CSS面试题(2022求职必看)

11,978 阅读9分钟

「Offer 驾到,掘友接招!我正在参与2022春招系列活动-经验复盘,点击查看 活动详情

一、如何理解HTML语义化

这道题我们人为主要分为两个方面回答就好:对人和对机器(搜索引擎)

  • 对人: 就是增加代码的可读性,让代码更容易维护
  • 对机器:就是对搜索引擎更加友好有利于seo

二、块级元素和内联元素

这道题就是会问你块级元素有哪些和内联元素有哪些及特点,以及之间怎么相互转换

2.1 块级元素

  • 常见的块级元素有div p h1 h2... ul ol等
  • 块级元素会独自占据一行,可以声明宽和高
  • display:block可以把元素转换为块级元素

2.2 行内元素

  • 常见的行内元素有 span a input button
  • 行内元素会出现在一行,不会起新行。不能直接声明宽高,如果要声明宽高需要把元素转换为行内或者行内块元素。
  • display:inline把元素转换为行内元素

2.3 行内块元素

  • 不自动换行,可以声明宽高
  • display: inline-block将元素转换为行内块元素

三、盒模型宽度计算

请问下面的p标签的offsetWidth是多少?

image.png

这道题考察的就是offsetWidth是怎么计算的

offsetWidth = width+border+padding,不包括margin

所以上面问题的答案是222px

3.1 扩展

上边的问题还可以接着问,怎么才能让offsetWidth是200px呢?

答案是:加上box-sizing:border-box。

box-sizing属性定义了应该如何计算一个元素的总高度和总宽度,它不包含margin。它的默认值是content-box,标准盒模型,它会把元素的padding和border计算到最终绘制出元素的总宽度或高度中。border-box,IE盒模型,会将元素的padding和border包括在元素的width或height内。

这个知识点也会被这样问,IE盒模型和标准盒模型有什么区别 ?其实答案都是一样的。

四、margin相关

4.1 margin 纵向重叠问题

请看如下代码,两个div1和div2之间的距离是多少

image.png 答案是15px

在纵向margin存在是,会发生重叠,取较大值为最后的纵向距离,而不是叠加。

4.2 margin负值问题

  • margin-right为负值时,自身不会移动,右侧元素会向左移动相应局距离
  • margin-left为负值时,元素自身向左移动相应距离
  • margin-bottom为负值时,自身不会移动,底部侧元素会向上移动相应局距离
  • margin-top为负值时,元素自身向上移动相应距离

五、BFC

这个题会问什么是BFC,以及怎么形成BFC?BFC解决了什么问题?

BFC,Block Format Context,块级格式化上下文。形成一块独立的渲染区域,内部元素的渲染不会影响边界之外的元素

形成BFC的条件

  • overflow不是visible
  • display是flex或者inline-block等
  • position是absolute或fixed
  • float不是none

BFC解决的问题

  • 垂直方向margin塌陷问题
  • float脱离文档流后,父元素高度塌陷问题

六、圣杯布局和双飞翼布局

这两种布局都是在PC端应用的,主要应用于两侧固定,中间自适应的布局,中间的内容更重要。

这两种布局的考察其实就是float和margin负值的应用,说出这两点,这道题就差不多了。

下面用代码实现一遍这两种布局

6.1 圣杯布局

基本效果

image.png

代码实现:

carbon (1).png

carbon.png

6.2 双飞翼布局

基本效果

image.png

代码实现:

carbon (3).png

七、手写clearfix

这道题目其实考察意义不大,不过我们还是在这里过一遍

代码如下:

carbon (4).png

八、用flex实现一个三点骰子

这道题主要考察的就是flex布局及其相关属性的应用。

实现效果

image.png

代码如下

carbon (5).png

九、水平垂直居中

这道题考察的就是css的应用,我们可以分别从水平和垂直两个角度来实现

9.1 inline元素水平处置居中

  • span水平居中text-align:center就可以实现
  • 垂直居中就是line-height的值与height的值相等即可

image.png

image.png

9.2 block元素水平处置居中

让下面得红色区域水平垂直居中

image.png

image.png

  • 第一种margin:0 auto就可实现水平居中

image.png

image.png

  • 第二种绝对定位+margin负值,这种情况必须给定宽高

这种方法在使用时必须有想要居中元素的宽高,margin-left和margin-top的值分别负的是宽和高的一半

image.png image.png

  • 第三种是绝对定位+margin:auto;这种情况必须给定宽高

image.png

  • 第四种是绝对定位+transform,可以处理不定宽高情况

image.png

  • 第五种是flex,可以处理不定宽高情况

image.png

  • 第六种是grid,可以处理不定宽高情况

image.png

当然居中的方法远不止这几个,但是面试的时候你能说出这么多就已经够用了。

十、line-height继承问题

下面有一段代码,请问div的行高是多少?

image.png

答案是40px

这道问题的考点是:当line-height的值是百分比的时候,继承的是计算之后的结果,也就是20 * 200%=40,是这样计算的,当line-height的是是多少px时,直接继承。当line-height的值是比例的时候,比如说line-height:1.5;,那么它的行高就是14*1.5 = 21px

十一、rem

这道题的考察点主要就是一些有移动端需求的公司会问一嘴,为了验证你是否具备移动开发的最基本能力。 主要就是问rem是什么,和em、px的区别,以及是如何进行响应式布局的

  • rem是相对长度单位,是相对于根元素而设置的
  • em也是相对长度单位,当相对的是当前元素内的字体尺寸,这个不容易控制,很少使用
  • px是绝对长度单位

最常见的响应式布局就是media-query,就是根据不同的屏幕大小设定不同的根元素的font-size,之后用rem实现响应式。

但是rem是存在弊端的,它的弊端就是具有阶梯型,如果有很多不同的尺寸,就要从低到高设置很多不同的区间,这样的区间如果过多,样式的变化也就越大,这是不太友好的。

为了结局这个弊端,我们可以用vh/vw来解决

  • vh 视口高度的百分之一
  • vw 视口宽度的百分之一

用这两个单位同样可以实现响应式布局。

十二、左边定宽与右边自适应布局

这道题其实和上边的布局问题考察点是一样的,但是现在这种布局在一些文档类项目中比较常见,比如vue官方文档,vuepress的文档等等都是采用这种布局的,我们平时在整理规划自己的网站或项目时,也可以采用这种布局,

我们这里一共有6中方式实现这种布局,其中又分为3种非严格模式和三种严格模式。

非严格模式就是当左边宽度改变时,我们还需要调整其它样式已达到右边自适应。严格模式就是我们直接改变左边宽度就好,右边会自动适应。下面前三种为非严格模式实现,后三种为严格模式实现。

HTML代码

image.png 最终效果

image.png

第一种方式:float+calc

image.png

第二种方式:inline-block+calc

image.png

第三种方式:绝对定位+padding

image.png

第四种方式:flex

image.png

第五种方式:table

image.png

第六种方式:grid

image.png

十三、清除浮动相关

在前边我们已经说过浮动以及清除浮动问题,在这里再一次拿出来写一遍,是因为最近在整理中大厂面试题时发现,这个问题出现的频率还挺高,所以打算在这里再次梳理一下。

13.1 为什么要清除浮动

主要是因为两个方面的问题

  • 垂直方向上margin塌陷问题
  • 子元素float脱离文档流后,父元素高度塌陷问题

答出这两点就可以了,主要就是为了解决这两个问题。BFC也同样是如此。这道题也可以结合BFC回答。

13.2 清除浮动的方法有哪些?以及各自的优缺点

  • 父元素固定宽高 优点:简单,没有兼容问题

缺点:子元素高度不固定是时无法使用

  • 添加新元素

这种实现方式就是添加一个没有意义的标签,之后这个标签添加一个清除浮动的CSS属性clear:both

优点:简单,没有兼容问题

缺点:代码不优雅,不利于后期维护

  • 使用伪元素

优点:仅用CSS就能实现

缺点:兼容问题,仅支持IE8以上或非IE浏览器

  • 触发父元素BFC

优点:仅用CSS实现,兼容性好

缺点:有些属性会影响其他样式,比如overflow:hidden,就容易裁剪元素内容

十四、CSS提升页面性能的方法有哪些

  • 属性设置简写 比如设置一个元素的上下左右margin,可以直接简写margin: 10px 12px 23px 34px;

这样写的目的是减少最后打包代码的包的体积

  • 去除0后面的单位

有很多人写样式愿意写margin: 0px 10px;

其实可以把0后面的单位去掉:margin: 0 10px;

这样做的目的也是减少最后打包代码的包的体积

  • 用css代替图片

比如,可以用css画三角形代替一些箭头图片

这样做的目的是减少http请求

  • 用css雪碧图代替单个图片

这样做的目的是减少http请求节约带宽

总结

其实,本人一直在使用面试学习法,每个月都会出去面几次,大小面试经历也很多,但是,其实HTML/CSS相关面试题的考察并不频繁,按照一个小时的面试时长算,考察这部分知识点的时间也就十分钟,最多不会超过15分钟,而考察难度也很基础。所以,总结这十四道面试题,应付这部分知识的考察应该问题不大,至少我们遇见过太多超出这个范围的,当然也有,比如说CSS3的动画和一些新属性,有些公司也有考察,但是,遇见频率不高。故不赘述。以上所有意见,仅代表我个人意见。

后续还会整理JS初级高级面试题合集,希望大家关注一下一起进步。本文给你带来帮助的,希望点个赞,不胜感激。

另外,我每天会在github开一个issue,搞一道面试题,希望志同道合的朋友一起参与进来,大家一起分享、学习。

github地址