debian怎么配置静态ip地址
302
2022-06-24
面试的信心来源于过硬的基础（自信面试题）
在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么 你 准备好了吗？
下面是本人整理的一份面试材料，本想自己用的，但是新年第一天 公司突然给了我个惊喜，涨工资了！！！
1、 viewport
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
延伸 提问
怎样处理 移动端 1px 被 渲染成 2px 问题
1 局部处理
meta标签中的 viewport属性 ，initial-scale 设置为 1
rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；
2 全局处理
meta标签中的 viewport属性 ，initial-scale 设置为 0.5
rem 按照设计稿标准走即可
2、跨域的几种方式
首先了解下浏览器的同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
那么怎样解决跨域问题的呢？
1 通过jsonp跨域
1.）原生实现：
2、 document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。
1.）父窗口：(http://domain.com/a.html)
其他meta标签
10、消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；
启动硬件加速的 另外一种方式：
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
启动硬件加速
最常用的方式：translate3d、translateZ、transform
opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，
其它属性并不会变成复合层），
弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。
11、android 4.x bug
1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
4.android无法同时播放多音频audio
5.oppo 的border-radius 会失效
12、JS 判断设备来源
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; 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; } } 13、audio元素和video元素在ios和andriod中无法自动播放 原因： 因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放； /音频，写法一 优先播放音乐bg.ogg，不支持在播放bg.mp3 //JS绑定自动播放（操作window时，播放音乐） $(window).one('touchstart', function(){ music.play(); }) //微信下兼容处理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小结 //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常； //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间； //3.注意不要遗漏微信的兼容处理需要引用微信JS； 14、css实现单行文本溢出显示 ... 直接上效果：相对于多行文本溢出做处理， 单行要简单多，且更容易理解。 实现方法 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览。 15、实现多行文本溢出显示... 效果： 实现方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： 1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： 2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 如果你觉着这样还不够美观， 那么就接着往下看： 效果： 这样 是不是你想要的呢？ 实现方法： div { position: relative; line-height: 20px; max-height: 40px; overflow: hidden; } div:after { content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } 不要只顾着吃，要注意胃口，此方法有个弊端 那就是 【未超出行的情况下也会出现省略号】 ，这样会不会很挫！！！ 没办法，只能结合JS 进行优化该方法了。 注： 1、将height设置为line-height的整数倍，防止超出的文字露出。 2、给p::after添加渐变背景可避免文字只显示一半。 3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。 16、让图文不可复制 这点应该大家 都很熟悉了， 某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制 -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; 那有些网页为了尊重原创，复制的文本 都会被加上一段来源说明，是如何做到的呢？问的好！ 等的就是你这个问题 -_- 。 大致思路： 1、答案区域监听copy事件，并阻止这个事件的默认行为。 2、获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboarddata.setData()）。 17、盒子垂直水平居中 这个问题好像面试必问的吔！反正我是必问的，哈哈！！！ 其实无关多少种实现思路，只要你能实现就可以！ 提供4种方法 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和left偏移各为50%*/ top: 50%; left: 50%; /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/ transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇） 4、flex 布局 父级： /*flex 布局*/ display: flex; /*实现垂直居中*/ align-items: center; /*实现水平居中*/ justify-content: center; 再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%); 18、改变placeholder的字体颜色大小 其实这个方法也就在PC端可以，真机上屁用都没有，当时我就哭了。 但 还是贴出来吧 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333; } 19、最快捷的数组求最大值 var arr = [ 1,5,1,7,5,9]; Math.max(...arr) // 9 20、更短的数组去重写法 [...new Set([2,"12",2,12,1,2,1,6,12,13,6])] // [2, "12", 12, 1, 6, 13] 21、 vue 父子组件嵌套时，组件内部的各个生命周期钩子触发先后顺序 首先 我们可以把 子组件当做function函数来看待，当父组件 import 子组件的时候， 就当是声明了 并加载了这个函数， 在调用的时候才会去执行这个函数（子组件）。那么父子组件中的各个声明周期钩子触发的先后顺序是怎样的呢？ 如下图： 下图带222 的 是为子组件，所以一次顺序是为 先创建父组件，然后才穿件子组件，当子组件创建完成并且实体dom挂载完成后父组件才挂载完成 注：资源来源于自己长期收集整理而来，如有和其他网站和论坛相同部分，在此抱歉！
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~