2021前端面试高频 HTML + CSS

程序员海军

发布于 2021-10-11 10:47:43

9390

发布于 2021-10-11 10:47:43

文章被收录于专栏：前端笔记ing

前言

❝ 我是从5月中旬裸辞的，其实在裸辞时，我已经拿了3个北京 offer ,都是远程面试的，过程还算可以。我是不太喜欢北京这个城市的，后来都放弃了。又踏上了面试求职之路，一边刷题一边面试，复盘。找工作 运气真的很重要，运气 + 技术能力，面试过程太难了，来回跑折腾。如今，我现在已经入职新公司一个月了，公司还可以，955，办公环境和同事也都挺 Nice。接下来，我将把我之前遇到的高频面试题分享给读者，送给正在面试的你，由于篇幅比较长，为了方便阅读 「本篇文章分享高频 HTML + CSS 面试题」 ❞

发车了

`HTML`

1. DOCTYPE 的作用是什么？

❝<!DOCTYPE>声明位于 HTML 文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。解析模式分为 标准模式 和 兼容模式. ❞

2. 标准模式与兼容模式区别

❝「标准模式」的渲染方式和 JavaScript 引擎的解析方式都是以浏览器支持的最高标准运行。 「兼容模式」页面以宽松的向后兼容方式显示 ❞

3. 行内元素与块级元素

❝在 HTML4 中，元素被分为两大类：inline 行内元素 和 block 块级元素 「行内元素」: 一个行内元素只占据它自身的空间大小。常见的行内元素有： a b span img button input label select textarea 「块级元素：」 块级元素占据父容器的整个宽度。常见的块级元素有： div ul ol li dl dt h1 h2 h3 h4 h5 h6 p ❞

4. 行内元素与块级元素的主要区别是

❝在盒模型中，行内元素设置 width height 无效，可以设置 line-height ❞

5. 空元素定义

❝标签内没有内容的html 标签称为空元素。空元素是在开始标签中关闭的。常见的空标签有： br hr img input link meta ❞

6. 页面导入样式时， link 和 @import 的区别

❝目前主要使用的还是 link 导入样式，因为 @import 兼容性不太好，它是在 ` CSS2.1 才有的语法，只能在 IE5+ 中可以识别。使用 link 不仅可以引入样式文件，还可以引入网站图标等; 而@import 只是引入样式作用。加载顺序不同: 使用 link 时，它是和页面同时加载的, 而` @import 是等待页面加载完成，才会加载样式的。 ❞

7. 对浏览器内核的理解

❝主要分为两部分： 渲染引擎 和 JS引擎 「渲染引擎：」 主要职责就是负责渲染所请求网站内容，默认支持显示 html, xml 图片. 它还可以借助第三方插件来渲染，例如 pdf。 「JS引擎：」 解析和执行 JavaScript 来实现网页动态效果。 ❞

8. 常见浏览器内核

❝

IE 浏览器内核：IE内核。
Chrome 浏览器内核： Chrome 内核 / Blink 内核
FireFox 火狐浏览器内核： Gecko 内核 / FireFox 内核
Safari 浏览器内核：Webkit 内核
Opera 浏览器内核：Blink 内核
360浏览器猎豹浏览器内核：IE + Chrome 双内核
百度浏览器内核：IE 内核

❞

9. 浏览器渲染原理

❝

首先解析请求的网站资源文档，根据文档构建一颗 DOM 树，DOM 树由 DOM 元素和属性节点组成。
然后解析 CSS，生成 CSSOM 规则树。
根据 DOM 树 和 CSSOM 规则树 构建生成 渲染树,
浏览器生成渲染树后，会很根据渲染树进行布局，确定元素的大小位置。
布局阶段结束后就是绘制内容显示在页面上。

❞

10. 什么是回流和重绘

回流

❝

1. 概念

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

2.什么时候会发生回流？

页面初始渲染，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸，比如边距、填充、边框、宽度和高度等
改变元素内容，比如文字数量，图片大小等
改变元素字体大小
改变浏览器窗口尺寸，比如resize事件发生时
激活CSS伪类（例如：:hover）
设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

常见引起重排属性和方法	--	--	--
width	height	margin	padding
display	border-width	border	position
overflow	font-size	vertical-align	min-height
clientWidth	clientHeight	clientTop	clientLeft
offsetWudth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollIntoView()	scrollTo()	getComputedStyle()
getBoundingClientRect()	scrollIntoViewIfNeeded()

❞

重绘

❝

**重绘：**当渲染树中的一些元素只需要更新属性的外观，而不影响布局操作就称之为 「重绘」，例如：改变背景，字体颜色等。

常见的引起重绘的属性：

属性：	--	--	--
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

怎样减少重绘

「样式集中改变」
「分离读写操作」
.....

❞

11. 对语义化的理解

❝

它使页面内容结构化，结构更清晰，便于浏览器，搜索引擎解析。
有利于网站的SEO 优化排名。

❞

12. SEO 一些优化小技巧

❝

合理的 title description. keyword : 浏览器会对这三项权重排名 ❝title : 强调网站主题内容，每个页面的 title 不一样， description : 网站主要内容描述，提炼关键。 keywords : 列出关键词即可 ❞
语义化 HTML 代码，便于浏览器解析。
尽量减少使用 iframe ，搜索引擎不会抓取 iframe 中的内容
图片加上 alt
提高网站性能也是一方面。

❞

13. 常见的浏览器存储技术有哪些

❝浏览器常见的存储技术包括：cookie , localStronge 和 sessionStronge 大规模数据存储：indexDB ❞

14. 对 `cookie` `sessionStronge` `localStronge` 理解

❝「cookie：」 它是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，携带cookie ,进行身份通信，cookie 最多可以存储4 K 数据，它的时间由 exoires 属性指定，并且 cookie 只能被同源页面共享。 「sessionStrong:」 它是一次会话存储的数据，当页面关闭时，它的数据也会随之销毁掉，最大存储 5M **localStronge: ** 它是浏览器本地永久存储的一种方法，它与 sessionStronge 的区别是不会随之浏览器关闭消失，除非主动删除，最大存储 5M ❞

15. iframe 有哪些缺点

❝

iframe 会阻塞页面的 onload 事件，它会等待 iframe 加载执行完后，再执行 onload 事件。
搜索引擎无法解析 iframe ，不便于SEO优化
浏览器后退功能失效

❞

16. img 标签的 title 和 alt 有什么区别

❝title : 当鼠标滑到元素上时显示 alt : 当图片无法加载时显示文字内容，提供图片的可访问性， ❞

`CSS`

1. 对盒子模型的理解

❝它分为 IE 盒模型 和 W3C 标准盒模型 . 盒模型包括：内容 content , 填充 padding , 边界 margin , 边框 border IE 盒模型和 W3C 标准盒模型的区别是： W3C 标准盒模型 : 属性 width height 只包含内容 content , 不包含border 和padding IE 盒模型 : 属性 width height 包含 content border padding ❞

2. ::after 和 :hover 中双冒号和单冒号的区别是？

❝

单冒号 : 用于 CSS3 伪类选择器中

双冒号 : 用于 CSS3 伪元素选择器中

伪类选择器 是用来向元素添加特殊效果的，用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled。

常用伪类选择器

关于 a 标签的四种状态

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态

关于 form 表单的伪类选择器

选择器	示例	示例说明
:focus	input:focus	选择元素输入后具有焦点
:enabled	input:enabled	匹配每个已启用的元素
:disabled	input:disabled	匹配每个被禁用的元素
:checked	input:checked	匹配每个已被选中的 input 元素
:required	input:required	选择有"required"属性指定的元素属性
:optional	input:optional	选择没有"required"的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:valid	input:valid	选择所有有效值的属性
:invalid	input:invalid	在表单元素中的值是非法时设置指定样式
:in-range	input:in-range	用于标签的值在指定区间值时显示的样式
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性

伪元素 :指它创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。

伪元素只有以下几种

选择器	示例	示例说明
::first-letter	p::first-letter	选择器的首字母
::first-line	p::first-line	选择器的首行
::selection	p::selection	被用户选取的部分
::before	p::before	在选择器前增加内容
::after	p::after	在选择器后增加内容

❞

3. `CSS` 样式权重

❝css优先级规则：

css选择规则的权重值不同时，权重值高的优先；
css选择规则的权重值相同时，后定义的规则优先；
css属性后面加 !importand 时，无条件绝对优先；

内联选择器style > id 选择器 > class / 伪类 / 属性选择器 > 标签 / 伪元素 ❞

4. 实现水平居中

4.1 `text-align: center`

❝外层盒子设置对齐方式为 居中 内层盒子 display 为 inline-block , ❞

<body>
    <div class="container">
        <div class="box">

        </div>
    </div>
</body>
<style>
    .container {
        text-align: center;
    }
    .box {
        width: 300px;
        height: 300px;
        border-radius: 15px;
        background: red;
        display: inline-block;
    }
</style>

4.2 `margin: 0 atuo`

div {
  width: 500px;
  margin: 0 auto;
}

5.水平垂直居中

5.1 绝对定位

.box{
    width: 200px;
    height: 200px;
    background: deepskyblue;
    position: absolute; //绝对定位
    top: 50%;
    left: 50%;
    /* - 高的一半  - 宽的一半 */
    margin: -100px -100px;
}

5.2 transform

.box{
    width: 200px;
    height: 200px;
    background: deepskyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

❝translate(-50%,-50%)在这个代码段的具体作用是什么？ 当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ❞

5.3 flex

<body>
    <div class="container">
        <div class="box">

        </div>
    </div>
</body>
<style>
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    width: 300px;
    height: 300px;
    background: orange;
}
</style>

总结

❝

利用绝对定位，将元素的左上角通过 top:50% 和 left: 50% 定位到页面中心，然后使用 margin 来调整元素到页面中心，-width/2 -height/2
利用绝对定位，将元素的左上角通过 top:50% 和 left: 50% 定位到页面中心，然后使用 transform: translate(-50%, -50%) 将元素调整到页面中心
使用 flex ，在父元素上，设置 aligin-items 垂直居中 和 justify-content 水平居中

❞

6. display 有哪些值，它们的作用是？

❝

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。如果不指定宽度，默认为100% 宽
none 元素不显示，并从文档流中移除
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

块级元素block	div ul ol li dl dt h1 h2 h3 h4 h5 h6 p
行内元素 inline	a b span img button input label select textarea

❞

7. 利用 `CSS`实现一个 📐 三角形

/* 采用的是相邻边框连接处的均分原理
    将元素的宽高设置为0，border-width 来设置线条粗细
    然后使用 transparent 隐藏掉任意3条边即可
*/
#box {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color:   red transparent ;
  cursor: pointer;
}

8. 你遇到过哪些浏览器兼容性有哪些？解决方法是?

❝

不同浏览器的默认的 margin 和 padding 不同。 ❝解决方案: 可以使用 reset.css ，重置浏览器的css默认属性 ❞

❞

9. width：auto 和 width：100% 区别

❝width : 100% : 它会的宽度等于父元素的宽度大小。 width : auto : 它会使元素撑满整个父元素，margin padding border content 会自动分配空间。 ❞

10. 使用图片 base64 优点缺点

❝base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。 优点 : 「1. 减少图片HTTP 请求」 缺点 : 「1.文件体积比源文件大1/3,影响浏览器加载，渲染时间加长」 「2.兼容性问题，ie8 以下的版本不支持」 ❞

11. 什么是`BFC`? 如何生成`BFC`？

❝定义 BFC 是块级可视化上下文，一个元素形成了 BFC 之后，它内部元素产生的布局不会影响到外部元素，外部元素布局也不会影响到BFC 内部元素。一个 BFC 像是一个隔离区域，和其它区域互不影响。 如何生成BFC？

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

❞

12. CSS 有哪些文档流，它们的作用分别是？

❝文档流分别是：

「定位流」
「浮动流」
「普通流」

普通流

在常规流中，盒一个接着一个排列;
在块级格式化上下文里面，它们竖着排列；
在行内格式化上下文里面，它们横着排列;
当position为static或relative，并且float为none时会触发常规流；
对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

浮动流

左浮动元素尽量靠左、靠上，右浮动同理
这导致常规流环绕在它的周边，除非设置 clear 属性
浮动元素不会影响块级元素的布局
但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局
最高点不会超过当前行的最高点、它前面的浮动元素的最高点
不超过它的包含块，除非元素本身已经比包含块更宽
行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

定位流

绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
如果元素的属性position为absolute或fixed，它是绝对定位元素；
对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

❞

13. 说说 `postion` 有哪些属性? 它们的作用分别是？

❝position

static 默认定位 ❝按正常布局走，top, right, bottom, left 和 z-index属性无效。 ❞
relative 相对定位 ❝元素会放置在定位时的位置，不改变原有布局，通过改变 top, right, bottom, left 来改变所在位置，但原所在位置会留下预留空间。 小结：通过自身改变位置，但会预留空间。 ❞
absolute 绝对定位 ❝元素会「脱离文档流」，不会预留原有位置空间。如果就近都没有指定 position , 那么它会以全局为定位来定位了。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 「最佳实践」 ：也是我常用的技巧布局方式 子绝父相 它基本可以满足你复杂的日常布局需求。 ❞
fixed 固定定位 ❝元素会「脱离文档流」，不会预留原有位置空间。元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。元素的位置在屏幕滚动时不会改变。 ❞
sticky 粘性定位 ❝元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先。包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 「元素在跨越特定阈值前为相对定位，之后为固定定位。」 「应用：」 手机通讯录联系人 ❞

❞

14. 关于Flex 面试常考问题？

14.1 左右定宽，中间自适应

❝中间 flex = 1, 宽用百分比，左右固定宽，父元素 display:flex。 ❞

14.2 等分布局

❝父元素 display:flex，子元素 flex:1 ❞

15. px、em、rem、rpx 用法与区别

❝

`px`

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸.

. em的值并不是固定的；
. em会继承父级元素的字体大小。

rem

rem是CSS3新增的一个相对单位,使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

p {font-size:14px; font-size:.875rem;}

「使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。」

手机端适配时可以采用 rem

rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

❞

END

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全

css

本文分享自前端自学社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网络安全

css