2022年大厂前端面试题汇总（一）

　　1、boder如何实现0.5像素？

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

```html

<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>

　　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。

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