web前端开发面试题易莱胜web前端开发培训面试题.doc
《web前端开发面试题易莱胜web前端开发培训面试题.doc》由会员分享,可在线阅读,更多相关《web前端开发面试题易莱胜web前端开发培训面试题.doc(15页珍藏版)》请在咨信网上搜索。
1、web前端开发面试题易莱胜web前端开发培训面试题资料仅供参考web前端开发面试题,易莱胜web前端开发培训面试题热点:百读易莱胜官网 上海易莱胜 易莱胜 上海百读易莱胜1.行内元素转化为块级元素?行元素转换为块级元素方式:display:block;2.将多个元素设置为同一行?清除浮动有几种方式?将多个元素设置为同一行:position,float,inline-block清除浮动的方式:方法一:添加新的元素 、 clear:both;方法二:父级div定义 overflow: hidden;方法三:利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。.cle
2、arzoom:1;.clear:aftercontent:”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;3.怪异盒模型box-sizing?弹性盒模型|盒布局?在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的。盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
3、box-sizing有两个值一个是content-box,另一个是border-box。当设置为box-sizing:content-box时,将采用标准模式解析计算;当设置为box-sizing:border-box时,将采用怪异模式解析计算。4.简述几个css hack?(1) 图片间隙在div中插入图片,图片会将div下方撑大3px。hack1:将与写在同一行。hack2:给添加display:block;dt li 中的图片间隙。hack:给添加display:block;(2) 默认高度,IE6以下版本中,部分块元素,拥有默认高度(低于18px)hack1:给元素添加:font-si
4、ze:0;hack2:声明:overflow:hidden;表单行高不一致hack:给表单添加声明:float:left;height: ;border: 0;鼠标指针hack:若统一某一元素鼠标指针为手型:cursor:pointer;当li内的a转化块元素时,给a设置float,IE里面会出现阶梯状hack1:给a加display:inline-block;hack2:给li加float:left;5. :before 和 :before 区别?单冒号(:)用于CSS3伪类,双冒号(:)用于CSS3伪元素。 对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法:befor
5、e作用是一样的。6.如何让一个div 上下左右居中?答:有三种方法。方法1: .div1 width:400px;height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); 方法2: .div2 width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bott
6、om: 0; right: 0; margin: auto; 方法3: .div3 width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; 7.css2.0 和css3.0答:css3加强了css2的功能,增加了新的属性和新的标签,而且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属性)。在效果方面加
7、入了更多的效果(圆角,动画之类的),还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好,只有一些高级版本的浏览器支持。8.弹性盒子模型?flex|box区别?(1) 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整。比如当容器尺寸变大时,其中包含的条目会被拉伸以占满多余的空白空间;当容器尺寸变小时
8、,条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,能够由开发人员自由操作。(2) flex和box的区别: display:box 是老规范,要兼顾古董机子就加上它; 父级元素有display:box;属性之后。她的子元素里面加上box-flex属性。能够让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的,董机老机子不支持的;父元素设置display:flex后,子元素宽度会随父元素宽度的改变而改变,而display
9、:box不会。 Android UC浏览器只支持display: box语法;而iOS UC浏览器则支持两种方式。9.viewport 所有属性 ?(1)width :设置layout viewport的宽度,为一个正整数,或字符串device-width;(2)initial-scale:设置页面的初始缩放值,为一个数字,能够带小数。(3)minimum-scale:允许用户的最小缩放值,为一个数字,能够带小数。(4)maximum-scale:允许用户的最大缩放值,为一个数字,能够带小数。(5)height:设置layout viewport的高度,这个属性对我们并不重要,很少使用(6)u
10、ser-scalable:是否允许用户进行缩放,值为no或者yes。安卓中还支持:target-densitydpi,表示目标设备的密度等级,作用是决定css中的1px 代表多少物理像素(7) target-densitydpi:值能够为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个10.如何理解HTML结构的语义化?所谓标签语义化,就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,对搜索引擎友好,有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取
11、,这种符合搜索引擎收索规则的做法,网站的推广便能够省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。11.伪类选择器和伪元素?c3中引入的伪类选择器有?c3中伪元素有?伪类用一个冒号来表示,而伪元素则用两个冒号来表示。伪类选择器:由于状态是动态变化的,因此一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。伪元素选择器:并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器;c3中引入的伪类选择器::root()选择器,根选择器,匹配元素E所在文档的根元素。在HTML文档中,根元素始终
12、是。:root选择器等同于元素。:not()选择器称为否定选择器,和jQuery中的:not选择器一模一样,能够选择除某个元素之外的所有元素。:empty()选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,而且跳转到target元素后起作用。:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。:nth-child(
13、)选择某个元素的一个或多个特定的子元素。:nth-last-child()从某父元素的最后一个子元素开始计算,来选择特定的元素:nth-of-type(n)选择器和:nth-child(n)选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。:only-child表示的是一个元素是它的父元素的唯一一个子元素。:first-line为某个元素的第一行文字使用样式。:first-letter 为某个元素中的文字的首字母或第一个字使用样式。:before 在某个元素之前插入一些内容。:after 在某个元素之后插入一些内容。c3中伪元素::first-line选择元素的第一行,比如说改变
14、每个段落的第一行文本的样式:before和:after这两个主要用来给元素的前面或后面插入内容,这两个常见content配合使用,见过最多的就是清除浮动:selection用来改变浏览网页选中文的默认效果12.placeholder?如何在ie8上兼容placeholder这个效果方法一:首先判断浏览器是否支持placeholder属性,如果不支持的话,就遍历所有input输入框,获取placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色。当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时,就把输入框内清空;当输入框失去焦点( blur )同时输入框内文
15、字为空时,再把获取的placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色;当输入框内有输入( keydown )时,此时输入框内的提示信息已经由focus事件清除,此时只需要把字体再恢复成黑色即可此方法的缺点是,不适用于加载完DOM时即获得焦点的输入框,因为在用户的角度,加载完页面时看到的获得焦点的那个输入框,它的提示文字是看不到的。HTML:CSS:.phcolor color:#999;JS$(function() /判断浏览器是否支持placeholder属性 supportPlaceholder=placeholderin document.createEleme
16、nt(input), placeholder=function(input) var text = input.attr(placeholder), defaultValue = input.defaultValue; if(!defaultValue) input.val(text).addClass(phcolor); input.focus(function() if(input.val() = text) $(this).val(); ); input.blur(function() if(input.val() = ) $(this).val(text).addClass(phcol
17、or); ); /输入的字符不为灰色 input.keydown(function() $(this).removeClass(phcolor); ); ; /当浏览器不支持placeholder属性时,调用placeholder函数 if(!supportPlaceholder) $(input).each(function() text = $(this).attr(placeholder); if($(this).attr(type) = text) placeholder($(this); ); );方法二:此方法的思路是做一张含有提示文字的图片作为input输入框的背景图,初始时获得
18、焦点同时加载背景图;当输入框不为空时,去掉背景图;当输入框为空时,加载背景图;当用户键盘按键且输入框不为空( 输入字符 )时,去掉背景图;当用户键盘按键且输入框为空( 删除字符 )时,加载背景图。此方法的缺点是:需要为每一个提示文字不同的input制作背景图片,而且设置input的样式。CSS:.phbg background:url(img/bg.jpg) 0 0 no-repeat;JS$(function() /判断浏览器是否支持placeholder属性 supportPlaceholder=placeholder in document.createElement(input); i
19、f(!supportPlaceholder) /初始状态添加背景图片 $(#uname).attr(class,phbg); /初始状态获得焦点 $(#uname).focus; function destyle() if($(#uname).val() != ) $(#uname).removeClass(phbg); else $(#uname).attr(class,phbg); /当输入框为空时,添加背景图片;有值时去掉背景图片 destyle(); $(#uname).keyup(function() /当输入框有按键输入同时输入框不为空时,去掉背景图片;有按键输入同时为空时(删除字
20、符),添加背景图片 destyle(); ); $(#uname).keydown(function() /keydown事件能够在按键按下的第一时间去掉背景图片 $(#uname).removeClass(phbg); ); );方法三:使用插件:Placeholders.js13.常见兼容性问题?* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也能够引用一段脚本处理。* 浏览器默认的margin和padding不同。解决方案是加一个全局的*margin:0;padding:0;来统一。* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在i
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 前端 开发 试题 易莱胜 培训
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【a199****6536】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【a199****6536】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。