文档介绍：--------------------------校验:_____________-----------------------日期:_____________web前端开发面试题-易莱胜web前端开发培训面试题web前端开发面试题,易莱胜web前端开发培训面试题热点:?行元素转换为块级元素方式:display:block;?清除浮动有几种方式?将多个元素设置为同一行: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;}-sizing?弹性盒模型|盒布局?在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的。盒子总宽度/高度=width/height+margin=内容区宽度/高度+padding+border+margin;box-sizing有两个值一个是content-box,另一个是border-box。当设置为box-sizing:content-box时,将采用标准模式解析计算;当设置为box-sizing:border-box时,将采用怪异模式解析计算。?(1)图片间隙 在div中插入图片,图片会将div下方撑大3px。hack1:将<div>与<img>写在同一行。hack2:给<img>添加display:block;dtli中的图片间隙。hack:给<img>添加display:block;(2)默认高度,IE6以下版本中,部分块元素,拥有默认高度(低于18px)hack1:给元素添加:font-size: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,单冒号和双冒号的写法::before作用是一样的。?答:有三种方法。方法1:.div1{width:400px;height:400px;border:#CCC1pxsolid;background:#99f;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}<divclass="div1"></div>方法2:.div2{width:400px;height:400px;border:#CCC1pxsolid;background:#99f;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}<divclass="div2"></div>方法3:.div3{width:400px;height:400px;border:#CCC1pxsolid;background:#9f9;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-200px;}<divclass="div3"></div>答:css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属性)。在效果方面加入了更多的效果(圆角,动画之类的),还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好,只有一些高级版本的浏览器支持。?flex|box区别?(1)引入弹性盒布局模型的目的是提供一种更加有效的方式来对