【知识总结】前端高频HTML、CSS、浏览器相关的面试题合集

2024-02-06 15:02:34

HTML

页面导入样式时，使用link和@import有什么区别

从属关系区别：@import只能导入样式表，link还可以定义RSS、rel连接属性、引入网站图标等。
加载顺序区别：加载页面时，link标签引入的css被同时加载；@import引入的css将在页面加载完毕后被加载。

浏览器的渲染原理

首先解析收到的文档，根据文档定义构建一棵DOM树，DOM树是由DOM元素及属性节点组成的。
然后对CSS进行解析，生产CSSOM规则树。
根据DOM树和CSSOM规则树构建Render Tree。渲染树的节点被称为渲染对象，渲染对象树一个包含有颜色和大小等属性的矩形，渲染对象和DOM对象相对应，但这种对应关系不是一对一的，不可见的DOM元素不会被插入渲染树。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树后，就会根据渲染树来进行布局（也可以叫回流）。这一阶段浏览器要做的事情就是弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段。

为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的html解析完之后再去构建和布局render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。

HTML5的form的自动完成功能是什么

autocomplete属性规定输入字段是否该启用自动完成功能，默认为启用。自动完成允许浏览器预测字段的输入。

如何实现浏览器内多个标签页之间的通信

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者来让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

使用websocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。
可以调用localStorage，localStorage在另一个浏览上下文里被添加、修改或删除时，它都会触发一个storage事件，我们可以通过监听storage事件，控制它的值来进行页面信息通信。
如果我们能够获得对应标签页的引用，通过postMessage方法也是可以实现多个标签页通信的。

什么是webp

webp是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大优点是，在相同质量文件下，它拥有更小的文件体积。因为它非常适合于网络图片的传输，因为图片体积的减小，意味着请求时间的减小，这样提高了用户体验。

浏览器如何判断是否支持webp格式图片？

通过创建Image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽和高，如果能获取，则说明浏览器支持webp格式图片；如果不能获取，或者触发了onerror函数，那么说明浏览器不支持webp格式的图片。

对HTML语义化标签的理解

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

浏览器缓存机制

缓存分为：强缓存、协商缓存

根据响应的header内容来决定强缓存相关字段有：expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expores。

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

CSS

介绍下BFC及其应用

BFC块级格式化上下文，是页面盒模型中的一种css渲染模式，相当于一个独立的容器，里面的元素和外部的元素互相不影响。

创建BFC的方式有：

html根元素
float浮动
绝对定位
overflow不为visible
display为表格布局或者弹性布局

BFC的作用是：

清除浮动
防止同一BFC容器中的相邻元素间的外边距重叠问题

分析比较opacity:0 、visibility:hidden、display:none的优劣和实用场景

display：none 不占空间，不能点击，会引起回流，子元素不影响
visibility：hidden 占据空间，不能点击，引起重绘，子元素可设置visible进行显示
opacity：0 占据空间，可以点击，引起重绘，子元素不影响

简述Rem及其转换原理

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。

默认根元素的font-size都是16px的。如果想要设置12px的字体大小也就是12px/16px=0.75rem

由于px是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放。
rem直接相对于根元素html，避开层级关系，移动端新型浏览器对其支持较好。

移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

initial-scale：初始缩放比例
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩放

简述伪类和伪元素

伪类

伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的，比图说：hover，它只有处于dom树无法描述的状态才能为元素添加样式，所以称为伪类。

伪元素

伪元素用于创建一些原本不在文档树中的元素，并未其添加样式，比如::before，虽然用户可以看得到这些内容，但是其实它不在文档树中。

区别：伪类的操作对象树文档树中已经存在的元素，而伪元素是创建一个文档树外的元素。css规范中用双冒号表示伪元素，用一个冒号表示伪类。

css3新增的伪类有哪些

elem:nth-child(n) 选中父元素下的第n个标签名为elem的元素
elem:nth-last-child(n) 作用同上，从后开始查找
elem:last-child 最后一个子元素
elem:only-child 如果elem是父元素下唯一的子元素，则选中
elem:nth-of-type(n) 选中父元素下第n个elem类型元素
elem:empty 选中不包含子元素和内容的elem类型元素
:not(elem) 选择非elem元素的每个元素
:enabled 启用状态的表单组件

min-width/max-width 和min-height/max-height 属性间的覆盖规则

max-width会覆盖width，即使width是行内样式或者设置!important
min-width会覆盖max-width，此规则发生在两者冲突的时候

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

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

方式1：给父元素单独定义高度

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

方式2：父级定义overflow:hidden; zoom:1;

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

方式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;
}

优点：写法固定、兼容性高
缺点：代码多

定位的属性值有何区别

position：relative、absolute、fixed、static
relative：相对定位，不脱离文档流，相对于自身定位
absolute：绝对定位，脱离文档流，相对于父级定位
fixed：固定定位，脱离文档流，相对于浏览器窗口定位
static：默认值，元素出现在正常的流中

元素垂直居中

设置子元素和父元素的行高一样
子元素设置为行内块，再加vertial-align:middle
已知父元素高度，子元素相对定位，通过transform:translateY(-50%)
不知道父元素高度，子绝对定位，父相对定位，子元素top:50%; transform:translateY(-50%)
创建一个隐藏节点，让隐藏节点的height为剩余高度的一半
给父元素display:table，子元素display:table-cell; vertical-align:middle
给父元素添加伪元素
弹性盒模型，父元素display:flex，子元素align-self:center

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

图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小于后者，优先加载。
实用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
使用csssprite或者svgsprite

弹性盒子布局属性有哪些请简述

Flex-direction：弹性容器中子元素排列方式（主轴排列方式）
Flex-wrap：设置弹性盒子的子元素超出父容器是否换行
Flex-flow：是flex-direction的flex-wrap简写形式
Align-item：设置弹性盒子元素在侧轴上的对齐方式
Align-content：设置行对齐
Justify-content：设置弹性盒子元素在主轴上的对齐方式

三栏布局方式两边固定中间自适应

margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后。
绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。
flex：左右固定宽，中间flex：1
网格布局
table布局

画一条0.5px的线

采用mete viewport的方式：

<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no'>

采用border-image的方式

采用transform:scale()的方式

双边距重叠问题（外边距折叠）

多个相邻普通流的块元素垂直方向margin会重叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

css动画如何实现

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyfremes规则实现。

此外，transition也可以实现动画，tansition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两种不同的途径获取样式，而第二个途径当某种发生改变时才能获取，这样就产生了过渡动画。

css3中对溢出的处理

text-overflow属性

clip：修剪文本
ellipsis：显示省略号来表被修剪的文本
string：为使用给定的字符串来代表被修剪的文本

码农公寓