2021前端面试题之html,css,浏览器相关，面试官必问！！！

1.网络中使用最多的图片格式有哪些？

JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以 jpeg 格式存储时，提供11

级压缩级别

2.视频/音频标签的使用 ？

视频：

视频标签属性：

src 需要播放的视频地址

width/height 设置播放视频的宽高，和 img 标签的宽高属性一样

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的展位图片

loop 是否循环播放

perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属

性，perload 属性会失效。

muted 静音模式

音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用

3.HTML5 新增的内容有哪些？

1）新增语义化标签

2）新增表单类型

3）表单元素

4）表单属性

5）表单事件

6）多媒体标签

4.Html5 新增的语义化标签有哪些 ？

语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护

Header 页面头部

main 页面主要内容

footer 页面底部

Nav 导航栏

aside 侧边栏

article 加载页面一块独立内容

Section 相 当 于 div

figure 加 载 独 立 内 容 （ 上 图 下 字 ）

figcaption   figure 的标题

Hgroup 标题组合标签 mark 高亮显示

dialog 加载对话框标签（必须配合 open 属性）

Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式ogg，mp3，wav）

5.Css3 新增的特性 ？

边框：

border-radios 添加圆角边框

border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，insetr（内/外部阴影））

border-image：设置边框图像

border-image-source 边框图片的路径

border-image-slice 图片边框向内偏移

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）

背景：

Background-size 背景图片尺寸

Background-origin规定background-position属性相对于什么位置定 位

Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

渐变：

Linear-gradient（）线性渐变

Radial-gradient（）径向渐变

文本效果：

Word-break：定义如何换行

Word-wrap：允许长的内容可以自动换行

Text-overflow：指定当文本溢出包含它的元素，应该干啥

Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换：

Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜

Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）

Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法：

rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n） 定义缩放转换

3D 转换方法：

Perspective（n）为 3D 转换 translate rotate scale

过渡：

Transition-proprety

过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

动画：animation

Animation-name 为@keyframes 动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

6.清除浮动的方式有哪些？请说出各自的优点

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高塌陷。

清除浮动方式 1：给父元素单独定义高度

优点：快速简单，代码少 缺点：无法进行响应式布局

清除浮动方式 2：父级定义 overflow：hidden；zoom：1（针对 ie6 的兼容）

优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时要注意

清除浮动方式 3：在浮动元素后面加一个空标签，clear：both；height： 0；overflow：hidden

优点：简单快速、代码少，兼容性较高。

缺点：增加空标签，不利于页面优化

清除浮动方式 4：父级定义 overflow：auto

优点：简单，代码少，兼容性好

缺点：内部宽高超过父级 div 时，会出现滚动条

清除浮动方式 5：万能清除法：

给塌陷的元素添加伪对象

.father：after{

Content：“随便写”；

Clear：both；

display：block；

Height：0；

Overflow：hidden；

Visibility：hidden

}

优点：写法固定，兼容性高

缺点：代码多

7.定位的属性值有何区别 ？

Position 有四个属性值：relative absolute fixed static

1）Relative 相对定位 不脱离文档流，相对于自身定位

2）Absolute 绝对定位，脱离文档流 相对于父级定位

3）Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

4）Static 默认值，元素出现在正常的流中

8.子元素如何在父元素中居中 ？

水平居中：

1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置 浮动，否则居中失效

2.子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

1.子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素 margin-top 和 margin-left 减去各自宽高的一半

2.子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin：auto

3.父元素设置 display：table-cell vertical-align：middle，子元素设置 margin：auto

4.子元素相对定位，子元素 top，left 值为 50%，transform：translate （-50%，-50%）

5.子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform： translat（-50%，-50%）

6.父元素设置弹性盒子，display：flex； justfy-content：center ；align-item：center；

justfy-content：center

9.Border-box 与 content-box 的区别？

Content-box 标准盒模型 width 不包括 padding 和 border

Border-box 怪异盒模型 width 包括 padding 和 border

10.元素垂直居中 ？

1.设置子元素和父元素的行高一样

2.子元素设置为行内块，再加 vertical-align：middle

3.已知父元素高度，子元素相对定位，通过 transform：

translateY（-50%）

4.不知道父元素高度，子绝父相，子元素 top：50%，transform：

translateY（-50%）

5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半

6.给父元素 display：table，子元素 display：table-cell，vertical-align：

middle

7.给父元素添加伪元素

8.弹性盒，父元素 display：flex，子元素 align-self：center

11.网页中有大量图片加载很慢 你有什么办法进行优化？

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

2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

3.使用 csssprite 或者 svgsprite

12.Margin 和 padding 在什么场合下使用?

Margin 外边距 自身边框到另一个边框之间的距离

Padding 内边距 自身边距到自身内容之间的距离

当需要在 border 外侧添加空白时用 margin，当需要在 border 内侧添加空白时用 padding

13.弹性盒子布局属性有那些请简述?

Flex-direction：弹性容器中子元素排列方式（主轴排列方式）

Flex-wrap：设置弹性盒子的子元素超出父容器时是否换行

Flex-flow：是 flex-direction 和 flex-wrap 简写形式

Align-item：设置弹性盒子元素在侧轴上的对齐方式

Align-content：设置行对齐

Justify-content：设置弹性盒子元素在主轴上的对齐方式

14.Px，rem，em 的区别?

Px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

em 的值并不是固定的

em 会继承父级元素的字体大小（参考物是父元素的 font-size）

em 中所有的字体都是相对于父元素的大小决定的

rem 相对于 html 根元素的 font-size

1em=1rem=16px 在 body 中加入 font-size：62.5% 这样直接就是原

来的 px 数值除以 10 加上 em 就可以

15.浏览器缓存机制?

缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。

协商缓存相关字段有 Last-Modified/If-Modified-Since ，Etag/If-None-Match

16.浏览器输入网址到页面渲染全过程 ?

DN

解析 TCP

连接

发送 HTTP 请求

服 务 器 处 理 请 求 并 返 回

HTTP 报文浏览器解析渲 染页面

连接结束

17.Css 选择器有哪些，那些属性可以继承，优先级如何计算？

Css3 新增的伪类有哪些？

Css2 选择器：

元素选择器，id 选择器，群组选择器，类选择器，*通配符选择器，后代选择器

Css2 伪类选择器：a:link/visited/hover/active

Css3 选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）

结构伪类选择器：

查找第几个 nth-child（n）

查找同一类型第几个 nth-of-type

查找唯一类型 only-of-type

属性选择器：根据标签属性查找 [attr=value]

: root 查找根元素 html 标签

: empty 查赵空标签

目标伪类选择器：（表单）

：enabled

查找可以使用的标签

：disabled

查找禁止使用的标签

：checked

查找被选中的标签

伪元素选择器 ：：selection 设置选中文本内容的高亮显示（只能用于背 景色和文本颜色）

否定伪类选择器 not（）

语言伪类选择器 lang（取值）

优先级（权重）：

元素选择器 1

伪元素选择器 1

class 选择器 10

伪类选择器 10

属性选择器 10

Id 选择器 100

内联样式的权重 1000

包含选择器权重为权重之和

继承样式权重为 0

那些属性可以继承：

Css 继承特性主要是文本方面

所有元素可继承：visibility 和 cursor

块级元素可继承：text-indent 和 text-align

列表元素可继承：list-style，list-style-type，list-style-position， list-style-image

内联元素可继承：letter-spacing，word-spacing，line-height，color， font，font-family，font-size Font-style ， font-variant ， font-weight ， text-decoration ，text-transform，direction

字母间距 ，段落间距， 行高，字体颜色 ，字体种类， 字体大小， 字体样式 ，字体粗细 ，小型大写字母文本 ，文本修饰 ，转换不同元素中的文本，文本方向

18.对 HTML 语义化标签的理解？

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav 表示导条，类似的还有article、header、footer 等等标签

19.web 性能优化？

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩， webP，lazyLoad。加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存

localStorage。

渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

20.对 CSS 的新属性有了解过的吗？

CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了

例如：

first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing 来改变盒模型，在动画方面增加了 animation，2d 变换，3d 变换 等，在颜色方面添加透明，rbga 等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等。