前端面试官必备-面试宝典HTML与CSS

Posted 2022-08-07 水香木鱼

一、博主介绍

💒首页:水香木鱼

🛫专栏：邂逅HTML

✍简介: 博主:花名 “水香木鱼”，星座"水瓶座一枚"

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 充电：相信付出终将会得到回报!

---

二、笔芯文章

前端基础面试题，考察前端开发人员的基本功。-面试官必备考察宝典

(1)、说一说行内标签、块标签、行内块标签有哪些？

行内标签：span、a、input、select、label

（1）同排序跟显示，遇到父级边界换行
（2）不支持宽高，内容撑开宽高
（3）不支持上下外边距
（4）不正常显示上下内外边距
（5）换行被解析

块标签：div、h1~h6、p、ul、ol、li【加分点：H5新增块标签 article、section、aside、nav、header、footer】

独占一行，默认宽度占满父级，高度为0，子级内容撑开高度

行内块标签：img、input、textarea

（1）同排序跟显示，遇到父级边界换行
（2）没有宽高的时候内容撑开宽高
（3）换行被解析

加分点：能够列举各自的应用场景

(2)、说一说html语义化？

得分点：语义化标签有哪些？

<header>头部</header>
<section>内容</section>
<footer>页脚</footer>
<nav>导航</nav>
<article>独立内容区域</article>
<aside>侧边栏</aside>
<dialog>对话框</dialog>

加分点：HTML语义化标签的作用？

易于用户阅读，页面结构清晰。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。
有利于开发和维护，代码更具可读性，代码更好维护。

(3)、说一说CSS尺寸设置的单位？

得分点：常见的尺寸？

px、rem、em

px:绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位

rem:相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小

em:相对长度单位，在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。

加分点1⃣️：视窗单位

vw、vh

vw：相对长度单位，相对于视窗宽度的1%。 
vh：相对长度单位，相对于视窗高度的1%。

加分点2⃣️：理解rem的应用

在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。

原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改。

vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。

原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。

(4)、说几个未知宽高元素水平垂直居中方法？

得分点：列出元素

position 定位
transform 动画
flex   弹性盒子
justify-content 水平 
align-items    垂直
vertical-align  定义图片和文字
text-align   定义文本

加分点：标准回答

1. 设置元素相对父级定位position:absolute;left:50%;right:50%，让自身平移自身高度50% transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式。
2. 设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁，很多网站现在也在使用这种方式实现。
3. 设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁。
4. 设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block; ，这种方式兼容性较好

(5)、说一说样式优先级的规则是什么？

得分点：优先级【从高至低】

!important>行内样式>嵌入样式>外链样式>id选择器>类选择器>标签选择器>复合选择器>通配符>继承样式

加分点1⃣️：优先级分析

第一类!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。

第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。

第四类继承样式，是所有样式中优先级比较低的。

第五类浏览器默认样式优先级最低。

加分点2⃣️：使用!important注意事项

1. 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important

2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

3. 永远不要在你的插件中使用 !important

4. 永远不要在全站范围的 CSS 代码中使用 !important优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效

(6)、说一说盒模型？

得分点：标准盒模型【box-sizing:content-box】、怪异盒模型【box-sizing:border-box】

加分点：解释一下标准盒模型、怪异盒模型?

标准模型，给盒设置 width 和height，实际设置的是 content box。padding和border再加上设置的宽高一起决定整个盒子的大小。

怪异盒模型，给盒设置 width 和 height，包含了padding和border，设置的 width 和 height就是盒子实际的大小 默认情况下，盒模型都是标准盒模型

(7)、说一说BFC

得分点：块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display

加分点：如何清除浮动 ？

overflow:hidden

清除浮动分析

使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。

如果设置父级为display:flex，内部的浮动就会失效。

标准回答：

BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

BFC布局规则:

1. 内部盒子会在垂直方向，一个接一个地放置。

2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

3. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4. BFC的区域不会与float box重叠。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6. 计算BFC的高度时，浮动元素也参与计算。

BFC形成的条件:

1. float 设置成 left 或 right

2. position 是absolute或者fixed

3. overflow 不是visible，为 auto、scroll、hidden

4. display是flex或者inline-block等

说一说 IFC（Inline formatting contexts）？

内联格式上下文。

IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱

说一说GFC（GrideLayout formatting contexts）？

网格布局格式化上下文。

当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

说一说FFC（Flex formatting contexts）？

自适应格式上下文

	display值为flex或者inline-flex的元素将会生成自适应容器。

(8)、rgba() 和 opacity 的透明效果有什么不同？

得分点：

opacity 作用于元素，以及元素内的所有内容的透明度

rgba()只作用于元素的颜色或其背景色

加分点：设置rgba透明的元素的子元素不会继承透明效果

(9)、请描述下 SEO 中的 TDK？

得分点：所谓的 TDK 其实就是 title、description、keywords 这三个标签

title 标题标签
description 描述标签
keywords 关键词标签

加分点：说一说SEO怎么优化？

SEO>网站优化

(1)网站结构布局优化

控制首页链接的数量、扁平化的目录层次、结构布局清晰易读、控制页面文件的大小

(2)网页代码优化

语义化书写HTML代码，符合W3C标准、合理使用h1~h6标签

(3)网站性能优化

(10)、说一说文本超出部分显示省略号

单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

三、博主致谢

感谢小伙伴们，耐心的阅读完本篇文章，关注👉 水香木鱼🔔 获取更多精彩文章！

⭐⭐⭐ 别忘记一键三连呦!