2023年6月28日发(作者：)

前端相关测试题（持续更新）1、⾏内元素有哪些？块级元素有哪些？空（void）元素有哪些？css 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”,则为块级元素(1) ⾏内元素：a b span img input select strong（强调）(2) 块级元素：div ul ol li dl dt dd h1 h2 ... p(3) 常见的空元素

---

其他空元素还有

2、页⾯导⼊样式时，使⽤ link 和 @import 有什么区别？(1) link 属于 XHTML 标签，除了加载 CSS 外，还能⽤于定义 RSS ，定义 rel 连接属性等作⽤；⽽ @import 是 CSS 提供的，只能⽤于加载 CSS(2) 页⾯导⼊样式时,link 会被同时加载，⽽ @import 引⽤的 CSS 会等到页⾯加载完之后再加载(3) @import 是CSS2.1 提出的，只有在 IE5 以上才能被识别，⽽ link 是 XHTML标签，⽆兼容性问题**3、viewport **width: 设备 viewport 宽度，为⼀个正整数，或字符串 device-widthdevice-width: 设备宽度height：设备 viewport 宽度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置initial-scale：默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数minimum-scale: 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数maximum-scale: 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数user-scalable: 是否允许⼿动缩放4、怎样处理移动端 1px 被渲染成 2px 的问题？1、局部处理:meta 标签中的 viewport 属性，initial-scale 设置为 1rem 按照设计稿标准⾛，外加利⽤ transfrom 的 scale(0.5) 缩⼩⼀倍即可2、全局处理meta 标签中的 viewport 属性，initial-scale 设置为 0.5rem 按照设计稿标准⾛5、meta 标签// 设置缩放// 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）// 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）// IOS中禁⽤将数字识别为电话号码/忽略Android平台中对邮箱地址的识别// 启⽤360浏览器的极速模式(webkit) -->// 避免IE使⽤兼容模式 -->// 针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓 -->// 微软的⽼式浏览器// uc强制竖屏// QQ强制竖屏// UC强制全屏// QQ强制全屏// UC应⽤模式// QQ应⽤模式// windows phone 点击⽆⾼光6、盒⼦垂直⽔平居中1、定位：盒⼦宽⾼已知，position:absolute; left:50%; top:50%; margin-left: ⾃⾝⼀半的宽度； margin-top: -⾃⾝⼀半⾼度2、table-cell 布局：⽗级 display:table-cell; vertical:align:middle;⼦级：margin: 0 auto;3、定位 + transform ; 适⽤于 ⼦盒⼦ 宽⾼不定时；position: relative / absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 注意这⾥启动了3D硬件加速，会增加耗电量的 （3D加速 请看浏览器进程与线程篇）top和left偏移各为50% ; translate(-50%,-50%) 偏移⾃⾝的宽和⾼的-50%4、flex 布局：⽗级： display:flex; align-items:center; justify-content: center;垂直⽅向居中：align-items:center⽔平⽅向居中：（1） justify-content: center;（2）margin-left : 50% ; transform: translateX(-50%);7、让图⽂不可复制：-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;8、trim 使⽤场景？var str = " hello world ";str = ();(str); // hello world, trim 只会去掉字符中前后的空格，不会去除⽂字中的空格9、去掉字符串中的前后空格1、(), （参照问题3）2、正则表达式：html: js: var test = mentById("test").e(/(^s*)|(s*$)/g,""); (test);

10、什么是跨域？由于浏览器同源策略，凡是发送请求 url 的协议、域名、端⼝三者之间任意⼀与当前页⾯地址不同即为跨域。存在跨域的情况：1、⽹络协议不同，如 http 协议访问 https 协议。2、端⼝不同，如 80 端⼝访问 8080 端⼝。3、域名不同，如 访问

4、⼦域名不同，如 访问

5、域名和域名对应 ip ，如 访问 8.8.8.8注释：同源策略的同源指的是“协议+域名+端⼝”三者相同，缺⼀不可11、解决跨域问题1、通过 jsonp 跨域，原⽣实现：