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