前言：作者是内推面试，所以问的比较水，简单的基础问题，但也不可忽视，从基础看你的技术，这是国企面试的通病，不会问些难的问题。所以简单的总结一下成都橙视传媒（系成都市广播电视台新媒体子公司）面试的流程和问题。

一、智联招聘投简历

笔者是内推，所以很快就收到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 mapproductionSourceMap: 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, // 代理的WebSocketschangeOrigin: true, // 允许websockets跨域pathRewrite: {'^/cp': '/cp'}},'/mfs': {target: imgBaseUrl, //图片代理ws: false, // 需要websocket 开启pathRewrite: {'^/mfs': '/mfs'}},'/': {target: apiUrl,ws: false, // 代理的WebSocketschangeOrigin: true, // 允许websockets跨域pathRewrite: {'^/': '/'}}},}
}

成都国企前端基础面试题2021/7/7相关推荐

前端基础面试题(HTML + CSS)
前端基础面试题(HTML + CSS) 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变 ...
前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
2023前端基础面试题
第一章面试题基础篇 1.1 HTML面试题面试题:行内元素有哪些?块级元素有哪些? 空(void)元素有哪些? 行内元素:span.img.input... 块级元素:div.footer ...
h5前端基础面试题(微信小程序)
微信小程序基础面试题 1.微信小程序的优劣势? 优势: ①容易上手,基础组件库比较全,基本上不需要考虑兼容问题: ②开发文档比较完善,开发社区比较活跃,支持插件式开发: ③良好的用户体验:无需下载,通 ...
2021年web前端基础面试题
全方面面试总结 1.javascript JS面试题 JS面试题手写无敌JS 原始类型(基础类型) boolean null undefined number string symbol null不 ...
前端基础面试题大全-极乐科技（一）-JS部分
2019独角兽企业重金招聘Python工程师标准>>> #JS部分 ###1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined. ...
web前端基础面试题
目前在从事前端工作,特别总结写面试题知识供大家学习,需要前端面试题答案的同学,可以加我创建的前端群 937268047 一.选择题 HTTP是() (A)文件传输协议 (B)超文本传输协议 (C)可扩 ...
css手型指针_前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
2022常见前端基础面试题
-CSS/HTML部分- 这部分可能会先问你css和html5都增加了那些新元素,然后扩展着问 0.css布局方式 1.table布局(现在少用) 2.flex布局 3.float布局 4.响应式布局 ...

成都国企前端基础面试题2021/7/7