2022年大厂前端面试手册新版1

【网络中使用最多的图片格式】 在前端开发中，网络中常用的图片格式主要有三种：JPEG、PNG和GIF。JPEG（Joint Photographic Experts Group）适用于高质量的图像，特别适合照片，压缩率较高，但不支持透明。PNG（Portable Network Graphics）提供了无损压缩，支持透明度，分为PNG-8和PNG-24两种，前者支持256色，后者支持全彩。GIF（Graphics Interchange Format）早期用于动画，支持透明，但色彩限制在256色以内。 【CSS 盒子模型】 CSS盒子模型是理解布局的重要概念，它包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域是元素的实际内容，如文本或图像；内边距是内容与边框之间的空间；边框包围内容和内边距；外边距则是元素与其他元素之间的空白区域。盒模型有两种不同的解析方式：W3C标准盒模型（content-box），边框和内边距是在内容区域之外增加的；IE盒模型（border-box），边框和内边距被包含在内容区域之内。 【视频/音频标签的使用】 HTML5引入了`<video>`和`<audio>`标签，用于内嵌视频和音频。基本结构如下： ```html <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ``` `controls`属性用于显示播放、暂停等控制，`src`属性指向媒体文件，`type`指定媒体类型。如果浏览器不支持`<video>`标签，可以添加备用内容。 【HTML5新增的内容】 HTML5新增了许多功能，如离线存储（Offline Storage）、拖放功能（Drag and Drop）、画布（Canvas）、Web Workers和Web Storage（包括localStorage和sessionStorage）、表单控件（date、time等）、新的语义化标签（如<header>、<footer>、<article>、<section>等）以及媒体元素（<video>和<audio>）等。 【Html5新增的语义化标签】 HTML5引入语义化标签以增强页面结构的可读性和可访问性，如<header>表示页眉，<nav>表示导航链接，<section>代表文档的一部分，<article>表示独立的内容，<aside>是与主要内容相关的辅助信息，<footer>表示页脚。 【Css3新增的特性】 CSS3带来了一系列新特性，包括但不限于：选择器扩展（如:nth-child()、:not()等）、多列布局（column-count、column-gap等）、边框圆角（border-radius）、阴影效果（box-shadow、text-shadow）、渐变（linear-gradient、radial-gradient）、背景图像层叠（background-image、background-size、background-origin、background-clip）、Flexbox布局和Grid布局、动画（@keyframes）以及响应式设计单位（如vw、vh）等。 【清除浮动的方式】 清除浮动主要有以下几种方法： 1. 使用clear属性：如`clear:both;`，但只能对当前元素起作用。 2. 使用clearfix类：通过伪元素如`.clearfix::before`和`.clearfix::after`添加清除浮动。 3. 使用overflow属性：设置`overflow:hidden;`或`auto;`，但可能导致滚动条的出现。 4. 使用display属性：将父元素的display属性设置为`table`或`flex`。 【定位的属性值】 定位属性主要是`position`，其值有static（默认值，遵循正常文档流）、relative（相对于自身位置偏移）、absolute（相对于最近的非static定位祖先元素偏移）、fixed（相对于浏览器窗口偏移，不受滚动影响）和sticky（粘性定位，介于relative和fixed之间，当元素在视口内时表现为relative，离开视口时表现为fixed）。 【子元素在父元素中居中】 子元素水平居中可以通过`margin: 0 auto;`实现，垂直居中则有多种方法，如使用绝对定位、Flexbox（`align-items: center;`）和Grid布局（`align-items: center;`）等。 【Border-box与content-box的区别】 Box-sizing属性决定了元素的宽度和高度是否包含边框和内边距。`border-box`表示元素总宽度和高度由边框、内边距和内容区域组成，而`content-box`（默认）表示总宽度和高度仅包含内容区域，不包含边框和内边距。 【元素垂直居中】 垂直居中的方法包括使用绝对定位、Flexbox（`align-items: center;`或`justify-content: center;`）、Grid布局（`align-items: center;`或`place-items: center;`）、表格布局（`vertical-align: middle;`）和CSS transform（`transform: translateY(-50%);`）等。 【Chrome显示小于12px的文字】 Chrome默认不渲染小于12px的字体，可以通过`-webkit-text-size-adjust`属性设置比例来调整，如`-webkit-text-size-adjust: 50%;`。 【CSS选择器、继承和优先级计算】 CSS选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(element)、属性选择器([attr])、伪类选择器(:hover)等。继承是指某些CSS属性可以从父元素传递到子元素。优先级计算按ID、类/属性/伪类、标签/伪元素顺序，每种类型的计数器从0开始，最后根据计数值确定优先级，数值越大，优先级越高。相同优先级时，后定义的样式覆盖前定义的。 【图片加载优化】 为了优化图片加载，可以采用以下策略：懒加载（只加载可视区域内的图片）、使用合适的图片格式（如WebP、AVIF等）、使用响应式图片（srcset和sizes属性）、压缩图片、利用CDN加速、合并和缩小图片尺寸等。