web前端开发面测试试题易莱胜web前端开发培训面测试试题.docx
《web前端开发面测试试题易莱胜web前端开发培训面测试试题.docx》由会员分享，可在线阅读，更多相关《web前端开发面测试试题易莱胜web前端开发培训面测试试题.docx（20页珍藏版）》请在冰点文库上搜索。
web前端开发面测试试题易莱胜web前端开发培训面测试试题
web前端开发面试题-易莱胜web前端开发培训面试题
————————————————————————————————作者：
————————————————————————————————日期：
web前端开发面试题，易莱胜web前端开发培训面试题
热点：
百读易莱胜官网
上海易莱胜
易莱胜
上海百读易莱胜
1.行内元素转化为块级元素?
行元素转换为块级元素方式：
display：
block；
2.将多个元素设置为同一行?
清除浮动有几种方式?
将多个元素设置为同一行：
position,float，inline-block
清除浮动的方式：
方法一：
添加新的元素、clear：
both；
方法二：
父级div定义overflow:
hidden；
方法三：
利用:
after和:
before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:
1;}
.clear:
after{content:
””;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;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:
content-box时，将采用标准模式解析计算；
border-box时，将采用怪异模式解析计算。
4.简述几个csshack?
（1）图片间隙
在div中插入图片，图片会将div下方撑大3px。
hack1：
将
hack2：
给添加display：
dtli中的图片间隙。
hack：
（2）默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
给元素添加：
font-size：
0；
声明：
overflow：
表单行高不一致
给表单添加声明：
float：
left；height：
；border：
鼠标指针
若统一某一元素鼠标指针为手型：
cursor：
pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
给a加display：
inline-block；
给li加float：
left；
5.:
before和:
:
before区别?
单冒号（:
）用于CSS3伪类，
双冒号（:
）用于CSS3伪元素。
对于CSS2之前已有的伪元素，比如:
before，单冒号和双冒号的写法:
before作用是一样的。
6.如何让一个div上下左右居中?
答：
有三种方法。
方法1：
.div1{width:
400px;
height:
border:
#CCC1pxsolid;
background:
#99f;
position:
absolute;left:
50%;top:
50%;
transform:
translate（-50%,-50%）;}
方法2：
.div2{width:
0;top:
0;bottom:
0;right:
0;margin:
auto;}
方法3：
.div3{width:
#9f9;
margin-left:
-200px;
margin-top:
-200px;}
7.css2.0和css3.0
css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。
以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。
在效果方面加入了更多的效果（圆角，动画之类的），还有在盒子模型和列表模块都进行了改进。
不过CSS3兼容性不好，只有一些高级版本的浏览器支持。
8.弹性盒子模型?
flex|box区别?
（1）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。
即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。
在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。
当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。
比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。
弹性盒布局是与方向无关的。
在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；
而inline布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
（2）flex和box的区别:
box是老规范，要兼顾古董机子就加上它；父级元素有display:
box;属性之后。
他的子元素里面加上box-flex属性。
可以让子元素按照父元素的宽度进行一定比例的分占空间。
flex是最新的，董机老机子不支持的；
父元素设置display:
flex后，子元素宽度会随父元素宽度的改变而改变，而display:
box不会。
AndroidUC浏览器只支持display:
box语法；而iOSUC浏览器则支持两种方式。
9.viewport所有属性？
（1）width:
设置layoutviewport的宽度，为一个正整数，或字符串'device-width';
（2）initial-scale:
设置页面的初始缩放值，为一个数字，可以带小数。
（3）minimum-scale:
允许用户的最小缩放值，为一个数字，可以带小数。
（4）maximum-scale:
允许用户的最大缩放值，为一个数字，可以带小数。
（5）height:
设置layoutviewport的高度，这个属性对我们并不重要，很少使用
（6）user-scalable:
是否允许用户进行缩放，值为‘no’或者‘yes’。
安卓中还支持：
target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
（7）target-densitydpi:
值可以为一个数值或者high-dpi、medium-dpi、low-dpi、device-dpi这几个字符串中的一个
10.如何理解HTML结构的语义化？
所谓标签语义化，就是指标签的含义。
语义化的主要目的就是让大家直观的认识标签（markup）和属性（attribute）的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，而且可维护性更高，因为结构清晰,十分易于阅读。
这也是搜索引擎优化SEO重要的一步。
11.伪类选择器和伪元素？
c3中引入的伪类选择器有？
c3中伪元素有?
伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪类选择器：
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
伪元素选择器：
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；
c3中引入的伪类选择器：
root（）选择器，根选择器，匹配元素E所在文档的根元素。
在HTML文档中，根元素始终是。
root选择器等同于元素。
not（）选择器称为否定选择器，和jQuery中的:
not选择器一模一样，可以选择除某个元素之外的所有元素。
empty（）选择器表示的就是空。
用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
target（）选择器来对页面某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
first-child（）选择器表示的是选择父元素的第一个子元素的元素E。
简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
nth-child（）选择某个元素的一个或多个特定的子元素。
nth-last-child（）从某父元素的最后一个子元素开始计算，来选择特定的元素
nth-of-type（n）选择器和:
nth-child（n）选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
only-child表示的是一个元素是它的父元素的唯一一个子元素。
first-line为某个元素的第一行文字使用样式。
first-letter为某个元素中的文字的首字母或第一个字使用样式。
before在某个元素之前插入一些内容。
after在某个元素之后插入一些内容。
c3中伪元素：
first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
selection用来改变浏览网页选中文的默认效果
12.placeholder?
如何在ie8上兼容placeholder这个效果
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。
当输入框获得焦点（focus）同时输入框内文字等于设置的提示信息时，就把输入框内清空；
当输入框失去焦点（blur）同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；
当输入框内有输入（keydown）时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可
此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。
HTML：
CSS：
.phcolor{color:
#999;}
JS$（function（）{
//判断浏览器是否支持placeholder属性
supportPlaceholder='placeholder'indocument.createElement（'input'）,
placeholder=function（input）{
vartext=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（"phcolor"）;
//输入的字符不为灰色
input.keydown（function（）{
$（this）.removeClass（"phcolor"）;
};
//当浏览器不支持placeholder属性时，调用placeholder函数
supportPlaceholder）{
$（'input'）.each（function（）{
text=$（this）.attr（"placeholder"）;
if（$（this）.attr（"type"）=="text"）{
placeholder（$（this））;
}}）;
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空（输入字符）时，去掉背景图；
当用户键盘按键且输入框为空（删除字符）时，加载背景图。
此方法的缺点是：
需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。
.phbg{background:
url（img/bg.jpg）00no-repeat;}
supportPlaceholder='placeholder'indocument.createElement（'input'）;
//初始状态添加背景图片
$（"#uname"）.attr（"class","phbg"）;
//初始状态获得焦点
$（"#uname"）.focus;
functiondestyle（）{
if（$（"#uname"）.val（）!
=""）{
$（"#uname"）.removeClass（"phbg"）;
}else{
//当输入框为空时，添加背景图片；有值时去掉背景图片
destyle（）;
$（"#uname"）.keyup（function（）{
//当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
$（"#uname"）.keydown（function（）{
//keydown事件可以在按键按下的第一时间去掉背景图片
使用插件：
Placeholders.js
13.常见兼容性问题？
*png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。
*浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:
0;padding:
0;}来统一。
*IE6双边距bug:
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
*浮动ie产生的双倍距离（IE6双边距问题：
在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。
）#box{float:
left;width:
10px;margin:
000100px;}这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入——_display:
inline;将其转化为行内属性。
（_这个符号只有ie6会识别）
*渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css//.bb{background-color:
#f1ee18;.background-color:
#00deff\9;+background-color:
#a200ff;_background-color:
#1e0bd1;}
*IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute（）获取自定义属性;Firefox下,只能使用getAttribute（）获取自定义属性.解决方法:
统一通过getAttribute（）获取自定义属性。
*IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.*解决方法：
（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
*Chrome中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust:
none;解决。
*超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A:
a:
link{}a:
visited{}a:
hover{}a:
active{}
*怪异模式问题：
漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。
为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。
现在可以使用[html5]（ www.w3.org/TR/html5/si…）推荐的写法：
``
*上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
*ie6对png图片格式支持不好（引用一段脚本处理）
18.简述前端优化的方式旧的雅虎34条|h5新添加的方式
1、尽量减少HTTP请求次数
2、减少DNS查找次数
3、避免跳转
4、可缓存的AJAX
5、推迟加载内容
6、预加载
7、减少DOM元素数量
8、根据域名划分页面内容
9、使iframe的数量最小
10、不要出现404错误
11、使用内容分发网络
12、为文件头指定Expires或Cache-Control13、Gzip压缩文件内容
14、配置ETag
15、尽早刷新输出缓冲
16、使用GET来完成AJAX请求
17、把样式表置于顶部
18、避免使用CSS表达式（Expression）
19、使用外部JavaScript和CSS
20、削减JavaScript和CSS
21、用代替@import
22、避免使用滤镜
23、把脚本置于页面底部
24、剔除重复脚本
14.jquery版本?
1.11兼容?
Query2.x系列和jQuery1.x拥有同样的API，但是不再支持IE6、7、8。
推荐使用1.xversion，除非你确定IE6、7、8用户不再访问网站。
jquery1.11属于1.x版本，其兼容IE6、7、8，所以也支持IE9.
15.一般做手机页面切图有几种方式?
响应式布局，弹性布局display：
flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。
16.px/em/rem有什么区别？
为什么通常给font-size设置的字体为62.5%？
相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
rem是相对于浏览器进行缩放的。
1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，所以重置rem
body{font-size=62.5%}此时1rem=10px;若是12px则是1.2rem.
25.sass和scss有什么区别?
sass一般怎么样编译的
文件扩展名不同，Sass是以“.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名；语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（;），而SCSS的语法书写和我们的CSS语法书写方式非常类似。
17.如果对css进行优化如何处理？
压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证日后的维护。
18.如何对css文件进行压缩合并?
gulp?
使用gulp,首页全局安装gulp。
1、npminstall--globalgulp
2、其次局部安装gulp。
npminstallgulp--save-dev
3、在项目根目录下创建一个名为gulpfile.js的文件
vargulp=require（'gulp'）;
gulp.task（'default',function（）{
//将你的默认的任务代码放在这}）;
4、运行gulp。
（默认的名为default的任务（task）将会被运行，想要单独执行特定的任务（task），请输入gulp）
gulp
合并和压缩JS、CSS文件
压缩JS，CSS文件需要引用如下组件：
gulp-minify-css:
压缩css
19.组件?
模块化编程？
组件化编程:
将jscsshtml包装一起提供方法和效果；
模块化化:
将相同的功能抽取出来存放在一个位置进行编程
20.图片和文字在同一行显示?
1在css中给div添加上“vertical-align:
middle”属性。
2分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
3把图片设置为背景图片。
21.禁止事件冒泡
event.stopPropagation（）
22.禁止默认事件
event.preventDefault（）
23.a标签中activehoverlink
copyright@ 2008-2023 冰点文库 网站版权所有
经营许可证编号:鄂ICP备19020893号-2
升级会员 