前端相关测试题（持续更新）

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) 常见的空元素 <br> <hr> <img> <input> <link> <meta>
其他空元素还有 <area> <col> <base><command> <embed> <keygen> <param> <source> <track> <wbr>

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 **

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

• width: 设备 viewport 宽度，为一个正整数，或字符串 device-width
• device-width: 设备宽度
• height：设备 viewport 宽度，一般设置了宽度，会自动解析出高度，可以不用设置
• initial-scale：默认缩放比例（初始缩放比例），为一个数字，可以带小数
• minimum-scale: 允许用户最小缩放比例，为一个数字，可以带小数
• maximum-scale: 允许用户最大缩放比例，为一个数字，可以带小数
• user-scalable: 是否允许手动缩放

4、怎样处理移动端 1px 被渲染成 2px 的问题？

1、局部处理:
meta 标签中的 viewport 属性，initial-scale 设置为 1
rem 按照设计稿标准走，外加利用 transfrom 的 scale(0.5) 缩小一倍即可
2、全局处理
meta 标签中的 viewport 属性，initial-scale 设置为 0.5
rem 按照设计稿标准走

5、meta 标签

// 设置缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
// 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）
<meta name="apple-mobile-web-app-capable" content="yes" />
// 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
// IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别
<meta name="format-detection"content="telephone=no, email=no" />
// 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
// 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
// 微软的老式浏览器
<meta name="MobileOptimized" content="320">
// uc强制竖屏
<meta name="screen-orientation" content="portrait">
// QQ强制竖屏
<meta name="x5-orientation" content="portrait">
// UC强制全屏
<meta name="full-screen" content="yes">
// QQ强制全屏
<meta name="x5-fullscreen" content="true">
// UC应用模式
<meta name="browsermode" content="application">
// QQ应用模式
<meta name="x5-page-mode" content="app">
// windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">

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.trim();
console.log(str);    // hello        world,     trim 只会去掉字符中前后的空格，不会去除文字中的空格

9、去掉字符串中的前后空格

1、str.trim(),  （参照问题3）
2、正则表达式：
html:
      <input type="text" id="test" value="">
js:
    var test = document.getElementById("test").value.replace(/(^\s*)|(\s*$)/g,"");
    console.log(test);      

10、什么是跨域？

由于浏览器同源策略，凡是发送请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
存在跨域的情况：
1、网络协议不同，如 http 协议访问 https 协议。
2、端口不同，如 80 端口访问 8080 端口。
3、域名不同，如 taobao.com 访问 baidu.com
4、子域名不同，如 abc.taobao.com 访问 def.taobao.com
5、域名和域名对应 ip ，如 www.bb.com 访问 8.8.8.8
注释：同源策略的同源指的是“协议+域名+端口”三者相同，缺一不可

11、解决跨域问题

• 1、通过 jsonp 跨域，原生实现：

<script>  
    var script = document.createElement('script');
    script.type = 'text/javascript';
        
  	// 传参并制定回调执行函数为 onBack
  	script.src = 'http://www......:8080/login?user=admin&callback=onBack';
  	document.head.appendChild(script);

  	// 	回调执行函数
  	function onBack(res) {
  		alert(JSON.stringify(res))
  	}
<script>

12、js 判断设备来源

// 判断移动端设备
function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i<len,len = agent.length; i++){
        if(ua.indexOf(agent[i])>0){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})


// 判断微信浏览器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}``