芜湖网站建设优化,杭州设计制作网站,91永久海外地域网名,东莞产品网站建设目录
前言
一、css3实现布局的方式有哪些#xff1f;
1.flex布局
2.grid布局
二、jquery的扩展机制#xff1f;
三、jquery动画和css实现动画的本质区别#xff1f;
四、不使用css的动画#xff0c;如何实现盒子从左到右移动#xff1f;
五、使用过的框架#xf…目录
前言
一、css3实现布局的方式有哪些
1.flex布局
2.grid布局
二、jquery的扩展机制
三、jquery动画和css实现动画的本质区别
四、不使用css的动画如何实现盒子从左到右移动
五、使用过的框架
六、vue能否兼容ie8、ie9?
七、如何实现富文本
八、如何实现响应式布局
1.媒体查询
2.百分比
3.vh/vw
4.rem
5.flex
九、加快网站速度 十、F12和查看源码有什么不一样
十一、如何提升vue应用首屏加载速度
十二、设计一个响应式网站要考虑什么
十四、交互效果存在的目的是什么
总结 前言
这是去一家公司面的公司主要是作PC端使用的jquery和js比较多所以问的技术大多偏向于基础记录一下把~ 一、css3实现布局的方式有哪些
我比较常用的是flex布局、grid布局、float布局、绝对布局
1.flex布局
一维布局适用于局部例如导航布局
是比较常用的布局兼容性比较好适用于绝大多数浏览器。
再父盒子上设置diaplsyflex确定要进行flex布局
再设置布局方向flex-direction可选row(默认) 或者colunm
在设置主轴对齐方式justify-content可以指定space-between两端对齐间距均分 或space-around每一项左右间距都相同等。
可设置超出是否换行flex-warp:可选warp或nowarp
可是设置每一项子元素的位置align-item可选flex-end 、flex-start 、center等
可设置指定子元素的位置align-self,可以设置flex-end 、flex-start 、center等。
2.grid布局
二维布局适用于大型布局、整个页面布局
首先设置父盒子display:grid
再设置行或列的大小grid-template-rows/columns 这里可以直接设置px值有几个就设置几个也可以使用一些函数
如果你需要声明相同的值可以使用repeat函数例repeat(3,50px) 等价于 50px 50px 50px如果你需要让他自适应浏览器可以使用autofill,如 repeat(autofill200px)表示列宽为200px ,适应浏览器grid还提供了一个单位 fr表示剩余空间等分例200px 1fr 2fr 表示除去200px后剩余的那部分分为3等份分别占1/3、 2/3如果你需要指定最大值和最小值可以使用minmaxmin,max表示这一项再着之间如果你需要自适应浏览器可以使用auto如200px auto 200px表示左右固定中间自适应
如果我们设置grid-template-rows/columns的时候只设置了三项但实际中我们有六项那多出来的三项我们称之为隐式网格我们可以通过grid-auto-rows/columns设置隐式行或列的值用法和grid-template-rows/columns一样
可以通过grid-gap:row column 设置每一项的之间的间隔也可以通过grid-row(columu)-gap分别设置
可以通过grid-template-areas指定网格区域如 注. 表示空白
以下代码表示有三行 三列第一行第二个项为空白内容第三行第一项为空白内容 header . header content content content . footer footer
grid-template-areas需要搭配grid-area使用使用方如下
以下代码表示content这个类指定了content这个区域 .content{ grid-area:content } 我们还可以设置列或行上是否自动grid-auto-flow :row/column 表示先行后列或先列后行
可以通过设置dense打乱顺序用合适的项填充空白区域例如grid-auto-flow :row dense
和flex布局类似grid也有内容和项的布局之分如果要设置内容的布局使用justify-content设置内容再区域内横向位置align-conten设置纵向位置他们的值都有start、center、end、space-around左右间距相等边框一份、space-between两端对齐中间间距相等 、space-eveny等分
除了内容布局每一项也有布局使用justify-item设置每一项的横向位置使用align-item设置每一项的纵向位置他们都有以下值start、center 、end、stretch(铺满容器)
我们还可以设置每一项的其实位置grid-column-start/end设置这一项的起始位置网格线位置如果有层级问题可以用z-index设置层级
最后我们还可以单独设置每一项的位置justify-slef设置横向位置、align-self设置纵向位置它的可选值和justify-item一样为start、center、end、stretch
最后grid布局使用于ie10之后的浏览器之前的兼容性不太友好。
这里参考啦这篇文章一文搞懂Grid 布局写得非常好想详细了解得可以看看。
二、jquery的扩展机制
jquery我们都知道它很强大他提供了很多方法让我们可以直接的去操作dom但是它的强大之处并不局限于此还有它的扩展机制。
jquery.extend和jquery.fn.extend就是扩展机制的核心他们的区别在于jquery.extend提供的式静态扩展我们可以通过$.ajax()方法名来调用就类似于定义了一个方法需要调用才会执行jquery.fn.extend是为jquery类添加成员函数可以理解为再jquery原型上添加了这个方法所有的元素都能调用我们可以用$(‘li’).css()调用
注自己写的函数如果不在最后retrun this 那将不能进行链式编程
三、jquery动画和css实现动画的本质区别
jquery其实就是改变css的现实隐藏等等本质上还是操纵css知识jquery将它封装得更简单我们直接调用方法就可以啦
四、不使用css的动画如何实现盒子从左到右移动
我们都知道最开始css是没有annimation tarnsition这类的动画的那我们最开是的jquery是如何实现动画的呢。
使用定时器固定时间为它的left增加值从而实现简单动画效果
五、使用过的框架
bootstrap是基于html/css/js的前端框架实现布局
vue是基于js的渐进式的构建框架用它实现组件化
jquery是可以直接对dom进行操作的一个js库
六、vue能否兼容ie8、ie9?
vue2官方指出兼容ie9,这是因为vue2中的主要运用了object.defintProroty()这个函数来实现双向绑定但是ie9及以下的并不支持这个方法所以不兼容。
vue3官方指出不支持ie。
七、如何实现富文本
这篇不错可以去看看利用 javascript 实现富文本编辑器
八、如何实现响应式布局
首先有很多中方法可以实现响应式布局
1.媒体查询
使用媒体查询实现写多套代码不同设备下加载不同的代码。所以缺点很明显代码量大影响加载速度。
2.百分比
使用百分比来代替px所以需要我们换算也很麻烦。不太建议用
3.vh/vw
css3新增的单位根据屏幕宽高来可以配合计算模式calc(100vw-20px)来使用这个非常好用。
4.rem
相对单位相对于根字体。所以我们可以监听设备修改根字体大小即可。
5.flex
弹性布局这个不用多说但是需要设置具体的值。 九、加快网站速度 1.合并js.css模块见晒代码体积
2.使用spries 雪碧精灵图减少图片资源体积
3.引入的js使用cdn加快加载速度
4.压缩js和css文件在请求头上设置Accept-Encodinggzip/* 十、F12和查看源码有什么不一样
这个需要对浏览器加载页面的步骤很熟悉。
浏览器加载步骤如下
输入地址按下enter解析url解析DNS域名客户端向服务端发起请求‘服务端接收请求并返回数据客户端解析数据并渲染至页面
查看源码显示的是第五步接收到客户端返回的数据
F12是第六步解析之后的代码
十一、如何提升vue应用首屏加载速度
使用路由懒加载在config/index.js中使用productionSourceMapfalse,避免生成map文件在index.html中引入cdn地址减少服务器压力请求头开启accept-encodinggzip压缩资源写代码的时候要合理运用v-if和v-show尽量少用全部变量、定时器记得清除、闭包记得最后指向null十二、设计一个响应式网站要考虑什么
需要考虑浏览器兼容性啊布局不能太复杂啊移动设备上要考虑手操作啊等。
十四、交互效果存在的目的是什么
开发式命题主要答用户体验感上就行 总结
以上就是今天要讲的内容这篇面试可能比较基础因为这个岗位还有设计方面的要求所以对前端要求也不是很高好啦今天就到这里啦拜拜~
