在【大后台私房菜】公众号回复【面试宝典】,即可获得为您整理的107页后端面试题。
有句话说得好,面试打造快船,工作驱动螺丝。 有过职场经历的朋友都知道,对于平时的工作需要,并不需要太低级的技术。 但往往在笔试过程中,会进行所谓的深入技术交流。 因此,换工作和复习面试问题很重要。 是每个小伙伴都要做的事情。 下面,小编为大家总结了一些常见的企业级面试问题。 如有bug,还请见谅。
1.如何实现0.5px边框线
这是考察小伙伴们对css掌握的深度。 如果你仔细尝试一下,你会发现因为兼容性问题,0.5像素的边框不会生效。 和设置1px没有什么区别。 这也是比较常见的一种情况。 问题,不多说了,直接提供两种兼容性比较高的形式。
1.在2D变换中使用缩放:transform:scale(0.5);
注意:即使使用缩放,也无法直接操作原始包。 需要重新定义一个bag并为新的bag设置边框缩放
例子:
原来的盒子:
.old{
width:200px;
height:200px;
}
新盒子:
.new{
width:400px;
height:400px;
border:1px solid;
transform: scale(0.5);
position: absolute;
top: 0;
left: 0;
}
优化:使用伪元素选择器代替实体标签
.old::before{
width:400px;
height:400px;
border:1px solid;
transform: scale(0.5);
position: absolute;
top: 0;
left: 0;
}
2.通过css3渐变属性
例子:
.box{
width: 200px;
height: 1px;
background: linear-gradient(#000 50%, transparent 50%);
}
当然,朋友们也可以根据自己的看法调整代码结构,灵活运用。
2. opacity:0; 之间有什么区别? 可见性:隐藏; 显示:无;
解析:
1、opacity: 0;
让元素透明,顾名思义,只是透明,我们看不见,但是元素还在原来的位置,
通过检查可以调试出元素的位置。
2、visibility:hidden;
让元素不可见,不过还是占据网页空间滴,考察的点就在于,虽然占据空间,
但是我们不能通过检查给调试出元素的位置,那也就实现不了事件绑定操作。
3、display:none;
直接让元素在页面中消失,不占据空间,检查也获取不到。
3、标准盒子模型和怪异盒子模型(即盒子模型)有什么区别
问题很简单,但是很多同学都会答非所问,要注意了。
首先,要了解盒模型组成:
无论是标准还是怪异组成上都是一样的
由:margin + border + padding + content组成
所以不可能问组成方式,主要是width上的区别
1、标准盒模型的 width = content
2、怪异盒模型的 width = border + padding + content
最后还要知道怎么重新设置盒模型的尺寸:
通过:box-sizing:border-box;
4.变换会改变固定定位的疗效
这个问题,出现的频率并不高,但可以作为一个情景题扩充一下知识面。
问题说明:
transform会让固定定位变成绝对定位,也会形成独立的包含块。
例:
我们么平时给元素设置固定定位,该元素并不会跟随滚动条滚动。
1、如:
.box{
width: 500px;
height: 500px;
border: 1px solid;
background-color: red;
transform:scale(1)
}
.son{
width: 200px;
height: 200px;
background-color: orange;
position: fixed;
top: 0;
left: 0;
}
此时:son元素就不再是固定定位,而是绝对定位。
2、如:
.box{
width: 500px;
height: 500px;
border: 1px solid;
background-color: red;
position: relative;
margin-left: 300px;
}
.one{
width: 400px;
height: 400px;
background-color: pink;
transform: scale(1);
}
.son{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}
此时,son元素的参照物将是one元素,不再是box
5. ::before 和 :after 中的双引号和单引号有什么区别?
首先要掌握,二者都是伪元素选择器,可以简单理解为:
before是在被选元素内容的最前面添加一个虚拟的行内元素,类似span
after是在被选元素内容的最后面添加一个虚拟的行内元素,类似span
单冒号还是双冒号,功能上没有什么区别,
单冒号是css2推出的规范,双冒号是css3推出的规范
之所以语法更新有一个点是为了区分伪类和伪元素,
当然,使用上面还是因人而异。
6. px、rpx、em、rem、vw/vh 和百分比之间有什么区别?
px:网页运用最频繁的单位之一,属于固定单位。
em:相对单位,相对于自己的字体大小,默认情况下,1em = 16px,会有小伙伴对参照物有疑问,因为很多文章上写的都是父元素之类的,要注意,如果元素设置了字体大小,那肯定的自己,如果没设置,父元素设置了,但是最终还是要继承给自己,所有,我们这样说针对自己,是为了让大家理解性记忆。
rpx:微信小程序独有的、解决屏幕自适应的尺寸单位
rem:相对单位,相对根标签html的字体大小来计算,rem布局的本质是等比缩放,一般是基于宽度,这也是为什么我们书写移动端偏向使用rem布局的原因,可以根据设备屏幕,等比例放大缩小页面。
vw/vh:viewpoint width / viewpoint height,vw 相对于视窗的宽度,vh 相对于视窗的高度,1vw等于视窗宽度的1%,1vh等于视口高度的1%。
7. CSS3过渡不支持CSS3渐变解决方案
对于之前的开发,我们可以使用图片的形式来代替颜色渐变,但后来发现这种方式扩展性较差,影响性能。 所以css3引入了线性渐变的方法,写渐变色。
语法:
背景图像:线性渐变(红色,蓝色);
如果新属性不支持转换,这是正常的。 如果非要实现颜色渐变过渡,还可以使用其他方法,参见代码。
方式一、通过背景图尺寸实现渐变色
.div1{
margin: 100px auto 0;
width: 300px;
height: 300px;
background: linear-gradient(to right,red, purple);
background-size: 200%;
transition: background-size 2s;
}
.div1:hover {
background-size: 100%;
}
注意,本质上并不是过渡的渐变,而是过渡的背景图像规范。 我们首先将背景图像规格设置为 200%,这样就只能听到一种颜色。 当然,我们可以根据包的规格继续缩小背景图片的规格,最后进行skip时,让背景图片的规格变成长度的100%
方式二、使用背景颜色
实现紫色到红色的渐变,背景图显示在背景颜色之上,左边的渐变给的透明,滑过自动添加紫色
body {
background-color: #ccccff;
}
.div1{
width: 300px;
height: 300px;
background: yellow linear-gradient(to right, rgba(0,0,0,0), rgba(249, 24, 3, 0));
transition: all .5s;
}
.div1:hover {
background: yellow linear-gradient(to right, rgba(0,0,0,0), rgba(249, 24, 3, 1));
background-color: purple;
}
8.如何在输入框添加放大镜作为提示文字
当然,很多移动端的收入盒只显示疗效。 当您单击“搜索”时,您将被手动重定向到搜索页面。
我们的形式是使用传统的阿里图标字体库。
使用unicode方法导入图标。 注意必须添加类名 iconfont 类名
9. flex:1 1 0 和 flex:1 1 auto 有什么区别?
首先我们要知道flex是三个属性的属性,分别是:flex-grow、flex-shrink和flex-basis简写。
默认值为flex:0 1 auto;
首先我们需要分析第一个:flex: 1 1 0,可以放大缩小,且宽度或高度为0,
其次我们要分析第二个:flex: 1 1 auto,可以放大缩小,宽度或高度遵循自己设置的宽高,会被内容拉伸,突出手动的意义,
图1:3旁边还有一点空间html选择框,为3设置flex: 1 1 0; 注意此时主轴是从左到右的,所以3没有长度,但是有内容,所以会被内容拉伸一点空间,此时的效果如图2。4将上升并占据空间。 3 有多少空间取决于垂直父元素中剩余多少空间。 现在4的空间是200px来显示全部html选择框,3的空间是50px。 如果你给 4 设置长度为 250px,那么 4 将不会到达第一行,因为它无法容纳。 如图3所示,剩余空间为3。
回到原来的状态
如图1:3旁边还有一点空间,为3设置flex: 1 1 auto; 需要注意的是,此时主轴是从左到右的。 效果图直接如图3所示。3的底长为200px,所以剩余空间为3。但是需要注意的是,拉伸后的空间并不是固定的,内容在拉伸时仍然会扩展元素。含量减少。
10.元素水平和垂直居中的方法
这基本上是一个必须问的问题。 这里为您总结一下。 至少要掌握其中三个。
方法一:flex布局
.one {
width: 400px;
height: 400px;
background-color: pink;
display: flex;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
}
.two {
width: 200px;
height: 200px;
background-color: red;
}
方法二、定位 + margin: auto
.one {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.two {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三、定位 + margin负值
.one {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.two {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
/* 子元素宽度的一半 */
margin-left: -100px;
/* 子元素高度的一半 */
margin-top: -100px;
}
方法四、定位 + calc()
.one {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.two {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left:calc(50% - 100px);
top:calc(50% - 100px);
}
方法五、定位 + transform负值
.one {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.two {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法六:grid布局
.one {
width: 400px;
height: 400px;
background-color: pink;
display: grid;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.two {
width: 200px;
height: 200px;
background-color: red;
}
方法七:flex + margin:auto
.one {
width: 400px;
height: 400px;
background-color: pink;
display: flex;
}
.two {
width: 200px;
height: 200px;
background-color: red;
margin:auto
}
以上七种中间形式足以应付笔试,可以有针对性地记忆。
11.单选添加文字
为达到上述效果:
主要考察伪元素和伪类选择器的使用。
使用 :checked{} 选择器匹配选中的单选 使用 ::after{} 选择器在所选元素内容的末尾添加内容
<style>
input:checked+span::after{
content: "(我被选中了)";
}
</style>
<body>
性别:
<input type="radio" name="sex"><span>男</span>
<input type="radio" name="sex"><span>女</span>
</body>
- 结尾 -
免费好课推荐:
HTML5大后端|Java开发|Python数据分析|Linux云计算|软件测试|大数据|物联网|网络安全|C++
Unity游戏|UI/UE设计|视频编辑|PMP项目管理|软测试|游戏原画|全媒体操作|计算机二级
代码如下所示:
页面跳转可以由用户点击链接、按钮等触发,也可以由系统手动形成。 WEB开发中经常使用页面手动跳转,可以根据需求采用不同的跳转形式,比如提示操作信息后延迟跳转等。本文总结了WEB开发中常见的几种页面跳转方式。
PHP header()函数跳转
PHP的header()函数非常强大,在页面url跳转方面调用也很简单。 使用header()直接跳转到指定url页面。 此时页面跳转为302重定向:
$url = "http://www.learnphp.cn/";
header( "Location: $url" );
我们可能会遇到特殊的重定向,比如网站改版中有一个页面地址需要进行301重定向。 当然,你可以通过web配置重写来实现html网页跳转,但是现在我想告诉你,你可以使用php的header()函数来做到这一点。 301重定向,代码如下:
//301跳转
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: $url" );
元设置跳转
html中的meta信息可以直接设置跳转,可以设置跳转延迟时间和跳转url,这个经常用到html网页跳转,比如告诉用户支付成功,支付完成后跳转到订单页面。 代码很简单,只需要添加一句话即可:
<meta http-equiv="refresh" content="5;url=http://www.learnphp.cn">
上面的代码表示5秒后页面将被手动重定向。
JavaScript跳转
Javascript跳转也很简单,直接一句话:
window.location.href="http://www.learnphp.cn";
注意,上述代码直接跳转后,在目标页面地址中无法获取referrer(也称源)。 从那里就可以得到要跳转的页面),这时候我们可以用javascript来模拟一次点击,然后进行跳转,满足客户的需求。
//有来路
var aa = document.createElement("a");
aa.setAttribute("href","http://www.learnphp.cn");
var bodys=document.getElementsByTagName("body")[0];
bodys.appendChild(aa);
aa.click();
当然,在实际开发中,我们可以将前两种方式集成到PHP中,方便各种跳转需求的应用。
本文来自: