「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,搞一道面试题，希望志同道合的朋友一起参与进来，大家一起分享、学习。
