web前端开发面试题易莱胜web前端开发培训面试题.docx

1、web前端开发面试题易莱胜web前端开发培训面试题web前端开发面试题，易莱胜web前端开发培训面试题热点：百读易莱胜官网 上海易莱胜 易莱胜 上海百读易莱胜1.行内元素转化为块级元素?行元素转换为块级元素方式：display：block；2.将多个元素设置为同一行?清除浮动有几种方式?将多个元素设置为同一行：position,float，inline-block清除浮动的方式：方法一：添加新的元素 、 clear：both；方法二：父级div定义 overflow: hidden；方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。.clearzoom

2、: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;box-si

3、zing有两个值一个是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-size：0；h

4、ack2：声明：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，单冒号和双冒号的写法:before作用是一样

5、的。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; bottom: 0;

6、 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:box不会

9、。 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)user-sc

10、alable:是否允许用户进行缩放，值为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文档中，根元素始终是。:root

12、选择器等同于元素。: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.createElement(input), placeholder=function(i