前言：作者是内推面试，所以问的比较水，简单的基础问题，但也不可忽视，从基础看你的技术，这是国企面试的通病，不会问些难的问题。所以简单的总结一下成都橙视传媒（系成都市广播电视台新媒体子公司）面试的流程和问题。
一、智联招聘投简历
笔者是内推，所以很快就收到hr电话约面试，提前半小时到面试地点，然后填一份基础信息的表格，然后四个人面（Hr,，技术总监，前端负责人，后端负责人），hr问的是为什么想离开这家公司，选择公司看中的是什么，基础信息表填的是吃苦耐劳，从哪些方面体现，如果录用到岗时间。技术总监主要是针对简历问了一些项目的问题，项目技术栈，什么类型的项目，如果公司项目技术栈与你想做的技术栈不一样会怎么做？然后问了一些大致简历上提到的技术框架的问题，没有细问技术，然后前端负责人问了一些技术上的知识点，div居中，我回答了四种方式，下面列出。然后问了如果不适用框架，用原生来写，会怎么样?因为笔者是想继续vue提升下，因为受成都前端市场的影响，除了大厂，基本都使用vue，所以听到这个问题，就按照自已意愿说了不考虑用其他框架，比如js+jq。最后是内推我的后端负责人，因为是认识的人，所以可能有刻意问了些简单的，get和post请求的区别，画0.5px的边框怎么画，pt，跨域怎么做，是否需要后端配合修改？没有笔试题，面试过程轻松，你不会的也不会深究
1、div居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=clientwidth, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1、使用postion:absolute实现 */
.box {
height: 100px;
width: 100px;
position: relative;
background: black;
}
.box .son {
width: 20px;
height: 20px;
background: aqua;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 20px;
}
/* 2、网格布局 */
.box{
width: 100px;
height: 100px;
display: grid;
place-items: center;
background: black;
}
.box .son{
width: 20px;
height: 20px;
background: aqua;
}
/* 3、flex布局 */
.box{
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.box .son{
width: 20px;
height: 20px;
background: aqua;
}
/* 4、表格布局vertical-align:middle */
.box{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
background: black;
}
.box .son{
width: 20px;
height: 20px;
background: aqua;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="son">12</div>
</div>
</body>
</html>
2、0.5px的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 1、border+border-image+线性渐变linear-gradient */
.border{
width: 200px;
height: 200px;
background:#cccccc;
margin: 0 auto;
border-bottom: 1px solid transparent;
border-image: linear-gradient(to bottom,transparent 50%,red 50%) 0 0 100%/1px 0;
}
/* 2、定位+伪元素+background+线性渐变linear-gradient */
.border{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
background:#cccccc;
}
.border::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-image: linear-gradient(to bottom,transparent 50%,red 50%);
}
/* 3、定位+伪元素+transform缩放(scale) */
.border{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
background:#cccccc;
}
.border::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: red;
transform: scaleY(0.5);
}
/* 4、对于四边0.5像素边框，定位+伪元素+transform缩放(scale) */
.border{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
background:#cccccc;
}
.border::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid red;
transform-origin: 0 0;
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="border">0.5像素边框</div>
</body>
</html>
3、get，post请求区别
1、一般来说GET是获取数据，POST是提交数据的。
2、GET传输数据的时候是在URL地址中的、对所有人都是是可见的、是不安全的、是有浏览器缓存记录的，POST传输的时候是放在HTTP的请求体之中的，并且是经过urlencode编码的所以是相对安全的。
3、HTTP协议并没有对GET和POST的长度做限制，其实是浏览器限制了他们传输大小，URL地址是有长度限制的，浏览器不同长度限制的具体数值也是不一样的，理论上来说POST的长度是没有限制的，但是受服务器的配置限制或者内存大小的限制，造成了实际开发中POST也是有数据长度的限制的。可以在PHP下修改php.conf中的postmaxsize值来设置POST的大小。
4、GET在浏览器回退时是无害的，而POST会再次提交请求。
5、GET参数通过URL传递，POST放在Request body中。
4、跨域
// 中台线上地址
const url = 'https://cp.madp.xyz'
// 企业微信api地址
const apiUrl = 'https://qyapi.weixin.qq.com';
//资源服务器地址，加载文件
const imgBaseUrl = 'http://mf.dev.pactera-fintech.com:7442';
module.exports = {
lintOnSave: false,
publicPath: './',
// 将构建好的文件输出到哪里
outputDir: 'dist/',
// 放置生成的静态资源(js、css、img、fonts)的目录。
assetsDir: 'static',
// 指定生成的 index.html 的输出路径
indexPath: 'index.html',
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
transpileDependencies: [],
// 生产环境关闭 source map
productionSourceMap: false,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 换算的基数
selectorBlackList: [], // 忽略转换正则匹配项
propList: ['*'],
}),
]
}
}
},
devServer: {
host: '0.0.0.0',
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
// 配置多个代理
proxy: {
'/cp': {
target: url,
ws: false, // 代理的WebSockets
changeOrigin: true, // 允许websockets跨域
pathRewrite: {
'^/cp': '/cp'
}
},
'/mfs': {
target: imgBaseUrl, //图片代理
ws: false, // 需要websocket 开启
pathRewrite: {
'^/mfs': '/mfs'
}
},
'/': {
target: apiUrl,
ws: false, // 代理的WebSockets
changeOrigin: true, // 允许websockets跨域
pathRewrite: {
'^/': '/'
}
}
},
}
}
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
