2025年web前端开发面试题,易莱胜web前端开发培训面试题 .pdfVIP

百学须先立志。——朱熹

web前端开发⾯试题,易莱胜web前端开发培训⾯试题

web前端开发⾯试题，易莱胜web前端开发培训⾯试题

热点：百读易莱胜官⽹

上海易莱胜

易莱胜

上海百读易莱胜

1.⾏内元素转化为块级元素?

⾏元素转换为块级元素⽅式：display：block；

2.将多个元素设置为同⼀⾏?清除浮动有⼏种⽅式?

将多个元素设置为同⼀⾏：position,float，inline-block

清除浮动的⽅式：⽅法⼀：添加新的元素、clear：both；

⽅法⼆：⽗级div定义overflow:hidden；

⽅法三：利⽤:after和:before来在元素内部插⼊两个元素块，从⾯达到清除浮动的效果。

.clear{zoom:1;}

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时，将采⽤标准模式解析计算；

当设置为box-sizing:border-box时，将采⽤怪异模式解析计算。

4.简述⼏个csshack?

(1)图⽚间隙

在div中插⼊图⽚，图⽚会将div下⽅撑⼤3px。

hack1：将

与写在同⼀⾏。

hack2：给添加display：block；

dtli中的图⽚间隙。

hack：给添加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作⽤是⼀样的。

6.如何让⼀个div上下左右居中?

答：有三种⽅法。

⽅法1：

.div1{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#99f;

position:absolute;left:50%;top:50%;

transform:translate(-50%,-50%);}

⽅法2：

.div2{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#99f;

position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}

⽅法3：

.div3{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#9f9;

position:absolute;left:50%;top:50%;

margin-left:-200px;

margin-top:-200px;}

7.css2.0和css3.0

答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了⼀些冗余的标签，在布局⽅⾯减少了代码量。以前⽐

较复杂的布局现在⼀个属性就搞定了（columns之类的属性）。在效果⽅⾯加⼊了更多的效果(圆⾓，动画之类的)，还有在盒

⼦模型和列表模块都进⾏了改进。不过CSS3兼容性不好，只有⼀些⾼级版本的浏览器⽀持。

以家为家，以乡为乡，以国为国，以天下为天下。——《管子》

8.弹性盒⼦模型?flex|box区别?

(1)引⼊弹性盒