移动web面试题

1、前端页面有三层结构，分别是什么？作用是什么？

•  HTML    结构层   页面元素
•  CSS       表示层   页面样式
•  JS          行为层    页面交互的动态效果

2、主流浏览器对应的内核

• IE   trident
• 火狐  gecko
• 谷歌   blink
• 欧朋   blink
• safari  webkit

3、flex的基本使用

• display：flex   弹性盒子
• justify-content  主轴
• align-items       侧轴
• flex-wrap          换行
• align-content     多行侧轴
• flex-direction     主轴方向

4、行内元素、块级元素、行内块元素、空

• 行内元素：a span button strong
• 块级元素:div h系列 ol ul p
• 行内块元素：input
• 空：br hr link img

5、BFC块级格式化上下文

独立的布局区域，在区域内有两个特点：

没有margin的塌陷现象；清除浮动

在布局中通常会将盒子转化成BFC：解决margin的塌陷和清楚浮动

6、css选择器的优先级

!important>行内样式>id>class>标签>通配符>继承

7、初始化css的意义

浏览器的兼容性不同，不同浏览器对有些标签的默认值不同的，如果没有对css初始化会导致页面显示差异

8、h5和c3的新特性

h5:

多媒体标签：audio video

语义化标签：header nav aside article section

input类型:number email search date time url tel file

本地离线存储

画布  canvas

自定义属性 data-*

双向通信协议  websocket

c3:

圆角  过渡 渐变 媒体查询 自定义动画 transform

9、对语义化的理解

• 用正确的标签做正确的事情
• 让页面结构化，便于浏览器搜索引擎解析
• 即使在没有css的样式下也可以以文档的格式展示，便于阅读
• 搜索引擎爬虫依赖html的标记来计算确定上下文和各个关键字的权重，利于seo
• 使阅读代码的人更容易将网站分块，便于读者理解维护

10、css盒模型

IE盒模型和W3C

盒模型：border padding margin content

IE盒模型：border padding

11、重绘和重排

重绘指的是更新页面上元素的可视样式，例如改变背景颜色、字体颜色等，而不影响它们在文档流中的位置。这个过程并不会引起页面布局的改变，只是重新绘制元素的外观。

重排指的是当页面布局发生改变时，浏览器需要重新计算元素的几何属性（如大小、位置）并将其放置在正确的位置上。这可能会触发整个或部分文档流的重新布局，导致显著的性能开销，特别是对于复杂的页面和大量元素的情况。

由于重排操作会引起重绘，因此重排通常比重绘更加耗费资源。浏览器需要重新计算元素的几何属性，然后重新绘制页面上的元素。因此，在性能优化方面，我们应该尽量减少重排和重绘的次数，以提高页面的响应速度和用户体验。

以下是一些减少重排和重绘的技巧：

1. 使用 CSS3 动画代替 JavaScript 动画：CSS3 动画使用 GPU 加速，比 JavaScript 动画更高效，并且通常不会引起重排和重绘。

2. 使用 transform 和 opacity 属性进行动画：这两个属性的动画不会引起重排，因为它们只涉及元素的外观，而不会影响其布局。

3. 使用绝对定位：对于需要频繁操作的元素，将其设置为绝对定位，这样它们的位置变化不会导致其他元素的重排。

4. 批量修改样式：如果需要连续修改元素的样式，建议使用 CSS 类，并一次性将样式应用到元素上，这样可以减少重排和重绘的次数。

5. 使用文档片段进行 DOM 操作：在创建新的 DOM 元素时，先使用文档片段（DocumentFragment）进行操作，然后再将整个文档片段添加到文档中。这样可以减少重排和重绘的次数。

6. 避免在布局过程中获取布局信息：当我们获取元素的几何属性（如宽度、高度）时，浏览器会强制进行重排以确保返回正确的值。避免在布局过程中频繁获取这些属性，可以提高性能。

12、px em rem upx rpx的区别

px、em、rem、upx 和 rpx 是不同的长度单位，用于在网页设计和开发中测量和调整元素的尺寸。它们之间的区别如下：

1. px（像素）：像素是最常见的长度单位，在网页设计中用于确定元素在屏幕上显示的大小。1 像素表示屏幕上的一个物理像素点。px 是绝对单位，不可缩放，所以在不同的设备上可能会有不同的显示效果。

2. em：em 是相对单位，相对于父元素的字体大小。如果父元素的字体大小为 16px，设置子元素的字体大小为 2em，则子元素的字体大小为 32px（2 x 16px）。em 还可以用于其他元素属性（如宽度、高度等），此时参照的是该元素的字体大小。

3. rem：rem 是相对单位，相对于根元素（即 元素）的字体大小。与 em 不同的是，rem 不会继承父元素的字体大小，而是参照固定的基准值。例如，如果根元素的字体大小为 16px，设置一个元素的宽度为 2rem，则它的宽度将等于 32px。

4. upx：upx 是微信小程序专用的长度单位，用于适配不同像素密度的屏幕。upx 是与设备宽度有关的相对单位，1upx 约等于 1 物理像素点。在不同像素密度的屏幕上，upx 会自动转换为适当的像素值。

5. rpx：rpx 是小程序开发框架中对于不同终端（iOS 和 Android）进行适配的单位。rpx 同样是与设备宽度有关的相对单位，1rpx 在标准屏幕下等于 0.5px，在高清屏幕下等于 1物理像素点。小程序开发框架会根据不同终端的密度自动进行转换，以保证在各种终端上显示的一致性。

总结：

• px 是固定的绝对单位，不会随环境的变化而改变尺寸。
• em 和 rem 是相对单位，相对于父元素和根元素的字体大小。
• upx 和 rpx 是用于移动端开发中考虑不同像素密度和终端适配的相对单位。

13、css画一个三角形

代码：

效果图：

14、元素消失的方法

opacity：0  和 visibility：hidden  元素隐藏起来，不会改变布局

display：none  元素不占位置，会改变布局

15、rgba()和opacity的透明度效果有什么不同

opacity应用于所有内容的透明度

rgba()只应用于颜色或者背景颜色，子元素不会继承其透明效果

16、设置比12px还要小的字体

font-size:12px

transform：scale（0.8）

17、外边距折叠和塌陷现象

外边距折叠（Margin collapsing）和外边距塌陷（Margin collapsing）是两个与 CSS 盒模型中外边距相关的现象。

1. 外边距折叠：当相邻的垂直方向上的两个元素具有外边距时，它们的外边距可能会合并成一个外边距。这种现象被称为外边距折叠。外边距折叠仅适用于正常流中的块级元素，并且在以下情况下发生：

   • 相邻的兄弟元素的外边距会折叠，取其中较大的一个作为最终的外边距。
   • 父元素的上外边距与第一个子元素的上外边距会折叠，取其中较大的一个作为最终的外边距。
   • 父元素的下外边距与最后一个子元素的下外边距会折叠，取其中较大的一个作为最终的外边距。

2. 外边距塌陷：外边距塌陷指的是两个相邻的垂直方向上的外边距发生重叠时的现象。外边距塌陷发生在以下情况下：

   • 当相邻的上下元素之间没有边框、内边距或者块格式化上下文时，它们的外边距会发生塌陷。
   • 嵌套的元素的上外边距和其第一个子元素的上外边距也会产生塌陷。

外边距折叠和外边距塌陷有时会导致预期之外的布局结果。为了避免这些问题，可以采取一些措施来处理：

• 使用内边距或边框来防止外边距折叠和塌陷。
• 使用浮动或定位等方法创建新的块格式化上下文，以阻止外边距折叠。
• 使用 overflow: hidden; 或 display: inline-block; 等方法来创建新的包含块，以避免外边距折叠。

18、清除浮动的方法

使用空标签清除浮动：在浮动元素的末尾添加一个空的块级元素，并为其添加 clear: both; 样式。例如：

浮动元素

这样，空的

元素将会占据一行，并且清除之前所有的浮动效果。

使用 clearfix 类清除浮动：定义一个 .clearfix 类，为该类添加 ::after 伪元素，并设置 content 为空字符串和 clear: both; 样式。然后将该类应用于包含浮动元素的父元素。例如：

浮动元素

通过使用 .clearfix 类，可以在浮动元素后添加一个看不见的伪元素来清除浮动。

使用 overflow 属性清除浮动：将父元素的 overflow 属性设置为 auto 或 hidden。例如：

浮动元素

通过设置 overflow 属性为 hidden，父元素会包裹住浮动元素，从而清除浮动效果。

19、link与@import的区别

link 和 @import 是两种不同的 CSS 导入样式表的方法，它们有以下区别：

1. 加载时机：link 是 HTML 的标签，用于在页面加载时同步加载外部样式表。而 @import 是 CSS 的规则，用于在当前样式表中异步加载外部样式表。

2. 兼容性：link 具有更好的兼容性，适用于所有现代浏览器。而 @import 并不被一些古老的浏览器所支持（如 IE5 和 IE6），因此在考虑兼容性时，更推荐使用 link。

3. 顺序和权重：link 可以同时引入多个样式表，并且可以通过 rel 属性指定加载顺序。样式表按照 link 出现的顺序依次加载，具有较高的优先级。而 @import 只能在一个样式表中引入其他样式表，并且它会在当前样式表完全加载后才开始加载外部样式表，具有较低的优先级。

4. 动态加载：@import 允许根据特定条件动态加载外部样式表，例如在媒体查询中使用 @import 可以根据屏幕尺寸加载不同的样式表。而 link 没有这种动态加载的能力。

综上所述，link 是更常见和推荐的用于导入样式表的方式。它在加载时机、兼容性和灵活性方面都更为优秀。除非有特定需求，否则建议使用 link 来引入外部样式表。

20、document.write与innerHTML的区别

document.write：将内容写入页面，清空替换掉原来的内容，会导致重绘

innerHTML：将内容写入某个dom节点，不会引起重绘