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

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时,将采用怪异模式解析计算。
hack?
(1) 图片间隙 
在div中插入图片,图片会将div下方撑大3px。
hack1:将<div>与<img>写在同一行。
hack2:给<img>添加display:block;
dt li 中的图片间隙。
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:#CCC 1px solid;
background:#99f;
position:absolute; left:50%; top:50%;
transform: translate(-50%,-50%); }
<div class="div1"></div>
方法2:
.div2{ width:400px;
height:400px;
border:#CCC 1px solid;
background:#99f;
position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
<div class="div2"></div>
方法3:
.div3{ width:400px;
height:400px;
border:#CCC 1px solid;
background:#9f9;
position: absolute; left: 50%; top:50%;
margin-left:-200px;
margin-top: -200px; }
<div class="div3"></div>

答:css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(