HTML5 + CSS3面试题整理(2)，前端资料大全

Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器

几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等

1.8 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

---

文档声明。

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题

1.9 div+css的布局较table布局有什么优点

---

正常场景一般都适用div+CSS布局，

优点：

1. 结构与样式分离

2. 代码语义性好

3. 更符合HTML标准规范

4. SEO友好

Table布局的适用场景：

某种原因不方便加载外部CSS的场景，例如邮件正文，此时用table布局可以在无css情况下保持页面布局正常

1.10 img的alt与title有何异同？ strong与em的异同

---

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

em:表现为斜体，语义表示强调

strong:表现为粗体，语义为强烈语气，强调程度超过em

1.11 简述一下src与href的区别

---

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

1.12 知道的网页制作会用到的图片格式有哪些

---

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

1.13 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理

---

dns缓存，cdn缓存，浏览器缓存，服务器缓存

1.14 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

1. 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

2. 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3. 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

5. 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

1.15你如何理解HTML****结构的语义化

1. 更符合W3C统一的规范标准，是技术趋势。

2. 没有样式时浏览器的默认样式也能让页面结构很清晰。

3. 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

4. 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。

5. 对SEO友好。

1.16谈谈以前端角度出发做好SEO****需要考虑什么

搜索引擎主要以:

外链数量和质量,网页内容和结构等来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

1. Meta标签优化：主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等，符合W3C规范的语义性标签的使用

2. 如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

1.17html5****有哪些新特性、移除了那些元素

新特性：

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件，calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2. 对可用性产生负面影响的元素：frame，frameset，noframes；

1.18如何处理HTML5****新标签的浏览器兼容问题

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

1.19****如何区分 HTML 和 HTML5**？**

DOCTYPE声明新增的结构元素、功能元素

1.20 HTML5 Canvas 元素有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作

1.21 如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：

Your browser does’nt support audio embedding feature.

1.22 如何在HTML5页面中嵌入视频

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

Your browser does’nt support video embedding feature.

1.23 HTML5 引入什么新的表单属性

datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

1.24****语义化的理解

用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

1.25****介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

JS引擎则：解析和执行javascript来实现网页的动态效果

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

1.26浏览器是怎么对HTML5****的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源

1.27****请描述一下 cookies**，**sessionStorage 和 localStorage 的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

**1.28 css sprite是什么,**有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

减少HTTP请求数，极大地提高页面加载速度

增加图片信息重复度，提高压缩比，减少图片大小

更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦

维护麻烦，修改一个图片可能需要从新布局整个图片，样式

1.29  canvas 如何绘制一个三角形|正方形

---

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。

这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>画布</title>   </head> <body>      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">      Your browser does not support the canvas element.      </canvas>      <script type="text/javascript">          var c=document.getElementById("myCanvas");//三角形          var cxt=c.getContext("2d");          cxt.moveTo(10,10);          cxt.lineTo(50,50);          cxt.lineTo(10,50);          cxt.lineTo(10,10);          cxt.stroke();//正方形          var cxt2=c.getContext("2d");          cxt2.moveTo(60,10);          cxt2.lineTo(100,10);          cxt2.lineTo(100,50);          cxt2.lineTo(60,50);          cxt2.lineTo(60,10);          cxt2.stroke();      </script></body></html>

1.30弹性盒子模型? flex|box区别?

---

1. 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

(2) flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，董机老机子不支持的；

父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

1.31 解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

---

IE当padding+border的值小于width或者height:

盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）

盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）

当padding+border的值大于width或者height:

盒模型的宽度=margin(左右)+padding(左右)+border(左右)

盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

2.CSS3面试题

---

2.1 解释box-sizing

---

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

应用场景：统一风格的表单元素 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素

2.2 水平垂直居中的方法

行内元素布局

line-height + text-align

行内块元素布局

vertical-align + line-height + text-align

块布局

position absolute + margin auto +top,bottom,left,right=0

position absolute + top:50%,left50% + translate(-50%, -50%)

position absolute + top:50%,left50% +

margin:-元素宽度一半 0 0 -元素高度一半

父容器子容器不确定宽高的块级元素，做上下居中

1.flex

#wrap{

display:flex;

justify-content:center;

align-items:center;

}

2.table

.parent {

text-align: center;//水平居中

display: table-cell;

vertical-align: middle;//垂直居中

}

.child {

display: inline-block;//防止块级元素宽度独占一行，内联元素可不设置

}

3.webkit-box

//对父级元素设置

position: relative;

display: -webkit-box;

-webkit-box-align: center;

-webkit-box-pack: center;

2.3 实现左边定宽右边自适应效果

1.table(父级元素)与tabel-cell（两个子集元素）

2.flex(父级元素)+flex :1（右边子元素）

3.左边定宽，并且左浮动；右边设置距离左边的宽度

4.左边定宽，左边设置position:absolute；右边设置距离左边的宽度

2.4 三列布局（中间固定两边自适应宽度）

1. 采用浮动布局（左边左浮动，右边右浮动，中间margin：0 宽度值）

2. 绝对定位方式（左右绝对定位，左边left0右边right0，中间上同）

3. 圣杯布局与双飞翼布局

2.5 清除浮动元素的方法和各自的优缺点

清除浮动，实际上是清除父元素的高度塌陷。因为子元素脱离了父元素的文档流，所以，父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。

浮动元素的特性： 在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。浮动到右侧的元素，其他内容将从左侧环绕它（浮动元素影响的不仅是自己，它会影响周围的元素对其进行环绕。float仍会占据其位置，position:absolute不占用页面空间 会有重叠问题 ）

1.在浮动元素末尾添加空标签清除浮动 clear:both （缺点：增加无意义标签）

2.给父元素设置 overflow:auto属性

3.after伪元素

2.6 css****实现自适应正方形

方案一：CSS3 vw 单位（相对值的单位）

方案二：设置垂直方向的padding撑开容器

方案三：利用伪元素的 margin(padding)-top 撑开容器

2.7 介绍position的值

1. absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位；如果没有定位父级，则参照初始包含块进行定位。

2. fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口。

3. relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4. static 默认值。没有定位，元素出现在正常的流中

2.8 如何在页面上实现一个圆形的可点击区域

1、字体图标

2、border-radius

3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

2.9 CSS3****新增伪类有那些

p:first-of-type  选择属于其父元素的首个

元素的每个

元素

p:last-of-type 选择属于其父元素的最后

元素的每个

元素

p:only-of-type  选择属于其父元素唯一的

元素的每个

元素

p:only-child   选择属于其父元素的唯一子元素的每个

元素

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素

::after   在元素之前添加内容,也可以用来做清除浮动

::before  在元素之后添加内容

:disabled  控制表单控件的禁用状态

:checked   单选框或复选框被选中

2.10 CSS3****有哪些新特性

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角           （border-radius:8px）

多列布局     （column）

阴影和反射   （Shadow\Reflect）

文字特效      （text-shadow）

线性渐变      （gradient）

旋转，缩放,定位,倾斜 （transform）

动画          （Animation）

多背景，背景裁剪

2.11 **请解释一下CSS3的Flexbox（弹性盒布局模型）****,**以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间

2.12 用纯CSS创建一个三角形的原理是什么

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {width: 0;height: 0;border-width: 20px;border-style: solid;

border-color: transparent transparent red transparent;}

2.13 一个满屏 品 字布局 如何设计

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

2.14 css****等高布局如何实现

利用padding-bottom|margin-bottom正负值相抵；

设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，

当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差

2.15 li与li****之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

2.16 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;}

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

2.17 请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

1、父级div定义height；

2、父级div 也一起浮动；

3、常规的使用一个class；

.clearfix::before, .clearfix::after {

content: " ";

display: table;

}

.clearfix::after {

clear: both;

}

.clearfix {

*zoom: 1;

}

2.18 SASS/LESS编译的时候，浮动元素的父级div定义伪类:after

&::after,&::before{

content: " ";

visibility: hidden;

display: block;

height: 0;

clear: both;

}

解析原理：

1. display:block 使生成的元素以块级元素显示,占满剩余空间;

2. height:0 避免生成内容破坏原有布局的高度。

3. visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:“.“生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:”.”,有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

2.19 CSS****优化、提高性能的方法有哪些

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；

如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；

提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;

使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

2.20 怎么让Chrome支持小于****12px 的文字

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

ear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

2.19 CSS****优化、提高性能的方法有哪些

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；

如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；

提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;

使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

2.20 怎么让Chrome支持小于****12px 的文字

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-z0vJqCTF-1712105212703)]

[外链图片转存中…(img-4ttPgDLK-1712105212703)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-VPTvLaH0-1712105212703)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-ogAc1eIn-1712105212704)]

[外链图片转存中…(img-G24Jd3Up-1712105212704)]