「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是多少?
这道题考察的就是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之间的距离是多少
答案是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 圣杯布局
基本效果
代码实现:
6.2 双飞翼布局
基本效果
代码实现:
七、手写clearfix
这道题目其实考察意义不大,不过我们还是在这里过一遍
代码如下:
八、用flex实现一个三点骰子
这道题主要考察的就是flex布局及其相关属性的应用。
实现效果
代码如下
九、水平垂直居中
这道题考察的就是css的应用,我们可以分别从水平和垂直两个角度来实现
9.1 inline元素水平处置居中
- span水平居中text-align:center就可以实现
- 垂直居中就是line-height的值与height的值相等即可
9.2 block元素水平处置居中
让下面得红色区域水平垂直居中
- 第一种margin:0 auto就可实现水平居中
- 第二种绝对定位+margin负值,这种情况必须给定宽高
这种方法在使用时必须有想要居中元素的宽高,margin-left和margin-top的值分别负的是宽和高的一半
- 第三种是绝对定位+margin:auto;这种情况必须给定宽高
- 第四种是绝对定位+transform,可以处理不定宽高情况
- 第五种是flex,可以处理不定宽高情况
- 第六种是grid,可以处理不定宽高情况
当然居中的方法远不止这几个,但是面试的时候你能说出这么多就已经够用了。
十、line-height继承问题
下面有一段代码,请问div的行高是多少?
答案是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代码
最终效果
第一种方式:float+calc
第二种方式:inline-block+calc
第三种方式:绝对定位+padding
第四种方式:flex
第五种方式:table
第六种方式:grid
十三、清除浮动相关
在前边我们已经说过浮动以及清除浮动问题,在这里再一次拿出来写一遍,是因为最近在整理中大厂面试题时发现,这个问题出现的频率还挺高,所以打算在这里再次梳理一下。
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,搞一道面试题,希望志同道合的朋友一起参与进来,大家一起分享、学习。