帅帅哥曾经遇到面试相关

xiaoxiao2021-02-28  90

帅帅哥的ms

主题

什么是行内元素?什么是块级元素?

块级元素:divtableullimenup

行内元素:spanlabelstronginputtextareaaddress

块级元素可以独占一行,宽度自动填满整个父级元素的宽度,可以设置 marginpadding

行内元素不会独占一行,相邻的元素会在一行,除非一行排不下才会换行,而且只有水平方向有用,坚向没有用,只用实现 marign-leftmargin-rightpadding-leftpadding-right

css的长度单位有哪些?

css的长度单位包括:相对单位和绝对单位。

相对单位:emexchremvwvhvmaxvmin

绝对单位:cmmmqinptpxpc

注)特殊值的单位可以省略。比如:margin: 0px;可以写成 marign: 0

伪类和伪元素的区别?

伪类:一个冒号

伪元素:两个冒号

什么叫文档流?

文档中可以显示对象在页面所占的位置。

什么叫数据表现与分离?

类似于MVC结构,HTML控制结构、CSS控制表现、JS的数据联系表现和结构。对网页的数据、更新、维护有帮助。

web标准?

web标准不是指某一个标准,而是一系列标准的集合。

网页由三部分组成:结构(html)、表现(css)、 行为(JS)。

Position的相对定位和绝对定位有什么特点?

relative 定义:相对定位

相对定位的对象不可层叠,可以依据leftrighttopbottom属性在正常文档流中偏移位置。

absolute 定义:绝对定位

绝对定位就是将对象从文档流中脱离出来,可以使用 leftrighttopbottom属性进行绝对定位。些时不存在边距。但仍有补白和边框。

绝对定位不能和 float一起使用。

通常情况下我们使用 position: relative; position:absolute进行布局。

父级:position:relative

子级:position:absolute; left bottom right top

如果父级不用 position:relative。直接用 postionabosolute定位的话,那么父级则为 <body>;使用position:absolute定义对象无论位于DIV多少层结构,都将会被拖出以<body>为父级(参考级)进行绝对定位。

css 填空题

css 的单位中,设定元素的长度或者宽度与父元素的字体大小相关的单位是 em,与html文档相关的元素是rem

css中使用  link media个关键字判断不同的屏幕使用不同的 css文件,使用css @media 键字判断屏幕使用有同的css样式表。

现在有三个异步 ajax请求,一个为别写出以下两种情况下回调函数的执行代码?

a) 只要其中任意一个请求成功返回时执行。

b) 三个请求全部成功的时候执行代码。

分析:

一种是常规方法,成功一个执行一个,每个函数都加一个pan断,三个函数执行的时候都设置为 flase,执行一条成功后变为ture时,即时执行第二条一直到true时截止。

第二种是promise

参考https://segmentfault.com/a/1190000002395343

包裹长文本

文字超过文本的长度

white-space:pre-line

word-wrap: break-word

合理的页面布局常说的结构与表现分离,表现是什么?分离是什么?

表现是HTML

分离是CSS

html5可省略标签有哪些?可省略结束标签有哪些?有省略属性标签有哪些?

省略标签有哪些?省略属性标签有哪些?

省略结束标签有哪些?

dddtlipoptionrtrpthreadtfoottrtdthoptgroup

不允许写结束标记是指,不允许使用开始标记与结束标记将元素括起来的形式,只允许使用“<元素/>”的形式进行书写。

 “可以省略结束标记是指,该元素可以完全被省略,请注意,即使标记被省略了,该元素还是以隐式的方式存在的。例如将body元素省略不写时,但它在文档结构中还是存在的,可以用document.body进行访问。

          不允许写结束标记的元素有:areabasebrcolcommandembedhrimginputkeygenlinkmetaparamsourcetrackwbr

          可以省略结束标记的元素有:lidtddprtrpoptgroupoptioncolgrouptheadtbodytfoottrtdth

          可以省略全部标记的元素有:htmlheadbodycolgrouptbody

         另外html5在指定属性值时做了一些改进,在属性值不包括“<”">""="、单引号、双引号等字符时,属性值两边的引号可以省去。例如:

       <input type="email">

       <input type=email>

       <input type=‘email'>

给一个div固定宽度,如何实现它的高度和宽度相等(css实现)

<div>

<div class="div">

<span>我是文字</span>

</div>

<style>

* {margin:0;padding:0;}

.div{width:200px;background:green;vertical-align: middle;display: inline-block;position: relative;}

.div span {font-size: 14px;color:#fff;vertical-align: middle;display:inline-block;text-align: center;}

.div:before{content:'';padding-bottom:100%;display:inline-block;width:.1px;vertical-align: middle;}

</style>

什么叫做单行语句?复合语句?

// 单行语句

var box = 100;

var age = 20;

// 用花括号包含的语句集合,叫做复合语句

// 复全语句,我们一般叫做代码块

{

var height = 200;

var width = 300;

}

用户正在访问一个在线网站,技术人员修改了css样式提交。但是用户不懂技术,不知道 F5刷新,怎么样才能更新用户缓存的代码(以前都是后台处理,现在前端技术可以处理,怎么处理)

前后端分离,不用服务器进行渲染。先加载的前端页面,然后用ajax等访问后台,返回数据。不分离的话服务器会把整修页面给浏览是器。前后端分离可以用localstorage进行token存储,服务器在用户第一次访问数据的时候会生成一个字符串返回客户端,客户端进行存储。每次发送请求的时候都带这个字符串,服务端进么校验判断用户身份。

你直接给css的链接后面加一个?随机数 就可以了

例如 a.css?123123

        123123换成随机数,每次都能取到最新的 

为什么要用 Sass

sass 能够解决 css的一些问题,解决了问题,有变量、支持语句、复合。

vue介绍?

mvvm, 一种设计模式。vue在这里面只是vm层。传统开发模式用 JQ或者原生JS,需要手动更新 dom,在使用这种 mvvm 的双向绑定,只要关心视图层,不用关心 dom层。

Webpack

整个项目的依赖关系是复杂的,各种关系需要手动维护,webpack可以打包,编译主要通过lodash来处理。

存储(localStoragecookielocalSession

localStorage

localSession

cookie

web交互的几种方式?

1、利用cookie对象

2、利用session对象

3、利用request重定向,设置setAttribute

4、利用Ajax进行异步数据请求(得到的数据可以以jsonxml格式返回,便于处理)

参考:http://blog.csdn.net/luckyrass/article/details/38758007

Script引入跨域了,可以直接用 //***.com/***.js么?

http协议不同,导致跨域了,script路径上写的是http,结果引入失败,因为开发使用的http,线上是https

面试遇到的问题 css部分: 1、html中的DTD是什么意思? 2、HTML和XMHTML最不同的特性是什么? 3、meta的标签有哪些? 4、页面垂直居中有几种方法? 5、css3和html5的新特性有哪些? 6、div、span、p有什么区别?如何让span变成和div一样? 7、左右固定200px,右边自适应有什么方法? 8、h5的存储和cookie有什么区别? 9、清除浮动? 10、隐藏元素的几种方法? 11、sass和css有什么不同? 12、如果用float,页面还是浮动,怎么处理? 13、如何提高网站的加载速度? js部分: js的原型链和作用域是什么? js的call和apply有什么区别? js字符串转为数字? 一个数组中如何删除重复的内容? 事件冒泡和停止冒泡? 事件委托? 闭包是什么,写出一个案例? promise创造一个函数? es6和es5有哪些不同? ajax部分: ajax中get和post有什么区别? 异步请求和同步请求的区别是什么? 跨域请求怎么操作? json和jsonp的区别?jsonp是什么原理? 前后台交互的方法有哪些? ajax中可以识别几种语言? vue部分: 1、vue的生命周期? 2、vue的组件化,如何子组件和子组件相联? 3、vue的容器是什么(不是指组件容器)? 4、vue介绍? mvvm, 一种设计模式。vue在这里面只是vm层。传统开发模式用 JQ或者原生JS,需要手动更新 dom,在使用这种 mvvm 的双向绑定,只要关心视图层,不用关心 dom 层。 5、什么叫前后端分离? 前后端分离,不用服务器进行渲染。不分离的话服务器会把整修页面给浏览是器。前后端分离可以用localstorage进行token存储,服务器在用户第一次访问数据的时候会生成一个字符串返回客户端,客户端进行存储。每次发送请求的时候都带这个字符串,服务端进么校验判断用户身份。 打包工具: 1、Webpack是什么? 整个项目的依赖关系是复杂的,各种关系需要手动维护,webpack可以打包,编译主要通过lodash来处理。 笔试部分: 1、用纯css写出一个 ul 里如果只有一个li时则该 li 的宽度应该为 100%,如果有 2 个或2个以上的li则li的宽度均为 50%。 方法一: <style> ul li { display: block; width: 50%; height: 20px; border: 1px solid #000; } ul li:only-child { width: 100%; } </style> 方法二: <style> ul{ width: 400px; } ul>li:only-chlid { width: 100%; } ul>li { width: 50%; float:left; display: block; background: pink; } ul>li:after { content: ''; display: block; padding-top: 75%; } </style> 2、有一个ul内有两个li元素宽度为50%,且有左浮动属性,如何在不使用js的情况下实现ul在任意宽度下 li的宽度比例都保持为4:3? 方法一:padding-bottom: 37.5% 方法二:vm 方法三:rem(还是需要要到 js) 3、如何在页面中定义一个 “中心有一个宽高为500px*500px 镂空的” 半透明蒙层(类似于扫一扫的镂空)。 4、页面中一个宽高均为 200px 的div绝对定位,请给出鼠标在此元素上按下时拖动、鼠标抬起时停止拖动的相关思路。 5、请写出当鼠标在某一个“启动图标”上长按时使桌面所有图标均产生摇晃效果(类似ios系统长按图标时的效果)的实现方式。 6、给出在页面中自定义右键菜单的步骤。 7、页面中有一组复选按钮,比如 10个,有一个全选按钮,请以角发事件方式控制选中状态,实现他们中的选中关系?(当 10个按钮 都选中时,“全选按钮”这选, 当手动将“全选按钮”取消选中时 10 个复选框全部取消选中,如果所有复选框均为选中状态时取消其中任意一个,则“全选按钮”取消选中) 8、自动搜索。在一个input输入框中实现输入过程中调用ajax传入input的值返回搜索结果过行渲染(条件:只有在输入停顿时才调用ajax进行自动搜索)。 9、如何在一个大于10条的数据流中随机抽出 10条数据。 10、在一个容器内包含有1个数字显示框(默认为 0)和多个按钮(每个按钮内显示随机数字文本),当按钮点击数字显示框内的数字则加上对就按钮的值;请以面向对象的思想设计需求中的类与实例)。 11、请为数组拓展一个 max 方法,该方法返回数组中的最大值。 12、请写出一个能够实现异步请求的链式调用方法。 13、写一个函数用于实现 js对象深拷贝。 14、用js实现一个闭包程序,并写出测试代码。 15、随机生成10000个不重复的8位数字 并找出后四位AAAA AABB ABAB 并且后四位不能有4 16、form中input 可以设置为 readonly和 disable,两者有何区别? 17、js如何选中一个checkbox,怎样设置他无效。 18、js的同源策略是什么意思? 19、http常用的状态码有哪些? 20、怎么样拦截事件冒泡? 21、清除浮动的方法有哪些? 22、jq的绑定事件? 23、性能优化方式?

如何解决跨域的问题? documentdomain+iframe()只有在主域相同的时候才能使用 动态创建script location.hash+iframe window.name+iframe cors jsonp websockets 回调函数 function dosomething(damsg,callback)){ alert(damsg); if(typeof callback == "function") callback(); } dosomething("回调函数",function(){ alert("和jq的callbacks形式一样") }) arguments打包共有函数 个人理解: 1、在移动端开发上,zepto可以完全代替jq,而且文件更小。 2、hybrid业务,微信完全可以使用 weex,rn、h5开发来代替jq。 3、在pc上,如果是spa业务,可以用 ng、vue、react框架,而且jq是以 dom为理念进行逻辑处理,会导致spa开发后越来难维护。

转载请注明原文地址: https://www.6miu.com/read-54315.html

最新回复(0)