CSS+JS面试题

最新推荐文章于 2022-02-11 20:15:25 发布

卡卡_西

最新推荐文章于 2022-02-11 20:15:25 发布

阅读量796

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/m0_47224321/article/details/121240648

版权

一、什么是盒子

盒子模型是指盒子的content（内容=width+height）、margin、padding、border这4部分。
CSS3中新增的box-sizing属性可以控制盒子的计算方式：border-box

二、行内元素有哪些、块级元素有哪些

（1）行内元素：a b strong i em s del u ins span select textarea br
（2）块级元素：h p div table li 所有表格类标签 form

三、同步和异步的区别

（1）同步：是阻塞模式，是指发送一个请求，需要等待返回，然后才能发送下一个请求。有个等待过程。
（2）异步：是非阻塞模式，异步发送一个请求，不需要等待返回，直接就可以发送下一个请求。
总结：
——同步传输面向比特的传输，异步传输是面向字符的传输。
——同步传输的单位是帧，异步传输的单位是字符。
——同步传输是在数据中抽取同步信息,异步传输通过字符起止的开始和停止码抓住再同步的机会。
——异步传输对时序的要求较低，同步传输往往通过特定的时钟线路协调时序。
——异步传输相对于同步传输速率较低。（因为开始位和停止位的开销所占比例较大）
——同步用户体验差，当多个线程同时访问同一资源，等待资源访问结束，浪费时间，效率低；异步用户体验好，当访问资源时在空闲等待时同时访问其他资源，实现多线程机制（效率）

四、px和em的区别

（1）px：实际上就是像素，用px设置字体大小时，比较稳定和精准。像素px是相对于显示器屏幕分辨率而言的。
（2）em:就是根据基准来缩放字体大小em的值并不是固定的；em会根据父级元素的字体大小变化。em相对于浏览器的默认字体尺寸。
（3）rem:是根据根元素<html>字体大小变化，这样就意味着，我们只需要在根元素确定一个参考值。

五、描述cookies,sessionStorage,localStorage的区别

六、怎样添加、移除、移动、复制、创建和查找节点

1、创建节点
（1）createDocumentFragment()创建一个DOM片段
（2）createElement() 创建一个具体的元素
（3）createTextNode()创建一个文本节点
2、添加节点
appendChild()
3、移除节点
removeChild()
4、替换节点
replaceChild()
5、插入节点
insertBefore()
6、查找节点
（1）getElementsByTagName()通过标签名称
（2）getElementsByName()通过元素的Name属性的值
（3）getElementById()通过元素Id，唯一性
（4）getElementsByClassName()

七、清除浮动的几种方式

1、父级定义height
（1）原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
（2）简单、代码少、容易掌握，但只适合高度固定的布局

2、结尾处加空div标签 clear:both
（1）原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，
让父级div自动获取高度。
如果页面浮动布局多，就要增加很多空 div，添加无意义标签，语义化差。

3、父级div定义overflow:hidden
超出盒子部分会被隐藏，不推荐使用

4、父级div定义overflow：auto
（1）原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
（2）优点：简单，代码少，浏览器支持好
（3）缺点：内部宽高超过父级div时，会出现滚动条。
（4）建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5、父级div定义伪类：after和zoom（推荐）

    //清除浮动代码
   .clearfix:after {
     content: "";
     display: block;
     clear : both;
     visibility: hidden;
     height :0;
     line-height :0;
   }
  .clearfix {zoom: 1}

6、双伪元素法（推荐）

.clearfix:before , 
.clearfix:after {
content: "";
display: block;
clear : both;
}
.clearfix {
zoom :1;
}

八、JS有几种数据类型

1、原始数据类型
（1）number
（2）string
（3）boolean
（4）null
（5）undefined
（6）symbol（ES6）
（7）bigint（ES10）

2、引用数据类型
object

九、MVVM、MVC、MVP的区别

1、MVC

MVC模型中，C为（controller）。主要处理逻辑为：View触发事件，controller响应并处理逻辑，调用Model，Model处理完成后将数据发送给View，View更新。

2、 MVP

MVP模型中，P为Presenter，并以Presenter为核心，负责从model获取数据，并填充到View中。该模型使得Model和View不再有联系，且View被称为“被动视图”，暴露出setter接口。

3、MVVM

MVVM模型中，VM为ViewModel，同样是以VM为核心，但是不同于MVP，MVVM采用了数据双向绑定的方案，替代了繁琐复杂的DOM操作。该模型中，View与VM保持同步，View绑定到VM的属性上，如果VM数据发生变化，通过数据绑定的方式，View会自动更新视图；VM同样也暴露出Model中的数据。

卡卡_西

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+JS面试题

一、什么是盒子盒子模型是指盒子的content（内容=width+height）、margin、padding、border这4部分。CSS3中新增的box-sizing属性可以控制盒子的计算方式：border-box二、行内元素有哪些、块级元素有哪些（1）行内元素：a b strong i em s del u ins span select textarea br（2）块级元素：h p div table li 所有表格类标签 form三、同步和异步的区别（1）同步：是阻塞模
复制链接

扫一扫