全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  应聘面试  >  html5面试题

2022年大厂前端面试题汇总(一)

发布时间:2022-07-14 14:24:00
发布人:syq

  1、boder如何实现0.5像素?

  实现方法:CSS3有缩放的属性,我们可以利用这个属性,缩小50%的1px的边框,来实现这个功能代码如下:

大厂前端面试题

```html

<div class="border3">

    <div class="content">伪类设置的边框</div>

</div>  

<style>

*{

     margin:0;padding:0

}

.border3{

     position: relative;         

}

.border3:before{

    content: '';

    position: absolute;

    width: 200%;

    height: 200%;

    border: 1px solid red;

    transform-origin: 0 0;

    transform: scale(0.5, 0.5);

    box-sizing: border-box;

 }

</style>

```

  2、css引入的方式有哪些,link和@import的区别是什么?

  - 区别1:link属于XHTML标签,而@import完全是CSS提供的一种方式。

  - 区别2:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

  - 区别3:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

  - 区别4:使用dom(document object model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.

  3、FireFox中标签的居中问题的解决办法

```html

<div id="a" style="width:200px;border:1px solid red;text-align:center;">

    <div id="b" style="background-color:blue;width:30px;margin:0 auto"> </div>

</div>

<!--以上面结构为例,在a中设置text-align属性为center之后,还需要设置b的横向margin为auto。设置添加b的CSS样式为:margin: 0 auto;-->

  4、flex:0 1 100px什么意思?flex两个参数,三个参数什么意思?表示三个参数,flex-grow、flex-shrink、flex-basis分别是啥意思?

  · flex属性是弹性布局添加给项目(子元素)的属性,

  o flex属性是flex-grow(放大)、flex-shrink(缩小)、flex-basis(宽度)的简写属性。

  o flex-grow默认值为0,当值大于0时,当父元素有剩余空间时当前元素放大,父元素没有剩余空间时,该元素不放大。

  o flex-shrnk默认值为1,父元素有剩余空间时,该元素不缩小,父元素没有剩余空间时,该元素缩小。

  o flex-basis相当于width属性。

  · flex:0 1 100px;表示父元素有剩余空间当前元素不放大,父元没有剩余空间当前元素会缩小。flex有很多中赋值方式,可以写一个值,两个值或者三个值。

  o 举例:1.flex:1 解析为 flex:1 1 0%。2.flex:auto解析为 flex:1 1 auto。3.flex:none解析为flex:0 0auto。4.flex:解析为flex:0 0 auto。4.flex:0 auto解析为flex:0 1 auto。

  更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

相关文章

前端公司面试题——jquery移除class

2023-08-07

前端JavaScript面试题——js时间戳转换时间的方法

2023-08-04

前端中JavaScript常见的面试题——js年月日转为时间戳

2023-08-02

前端jquery面试题——jquery字符串包含哪些?

2023-08-01

前端JavaScript面试题——js如何创建函数?

2023-07-31

前端程序员面试题——jquery发送get请求的步骤

2023-07-28
在线咨询 免费试学 教程领取