2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)
3.flex
4.绝对定位的top,left,bottom,right都设置为0,然后通过margin:auto实现水平垂直居中
5.display:table-cellvertical-align:middletext-align:center
6.calc函数计算实现
1. DOM结构 :元素不会渲染
2. 事件监听 :不能监听DOM事件
3. 继承 :子元素不会继承
4. 性能 :改变此属性会重排,性能较差
1. DOM结构 :元素会渲染
2. 事件监听 :能监听DOM事件
3. 继承 :子元素会继承,可以通过visibility:visible来取消继承
4. 性能 :改变此属性会重绘,性能较好
1. DOM结构 :元素会渲染
2. 事件监听 :能监听DOM事件
3. 继承 :子元素会继承,而且不能通过opcity:1来取消隐藏
4. 性能 :改变此属性会重绘,性能较好
window.divicePixelRatio=2(默认)
意思是:我们css中1px相当于实际移动端设备2px
1.border-width:0.5px
2.box-shadow内阴影模拟边框,
box-shadow:inset 0px -1px 1px 1px red
3.通过viewport设置rem的基准值,就可以直接写rem了,较好的解决方案
4.伪类+transform
通过:after或:before设置border,结合定位
两侧宽度固定,中间宽度自适应
所以我们要尽量少使用以上属性和方法
在面试前端的过程中,有些问题是经常会被提问到的一、基础篇
1. 在不使用第三个变量的情况下,如何调换a与b的值?
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时,使用link和@import有什么区别?
5. 简述一下事件代理
二、HTML常见题目
01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
02、HTML5为什么只需要写?
03、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
04、页面导入样式时,使用link和@import有什么区别?
05、介绍一下你对浏览器内核的理解?
06、常见的浏览器内核有哪些?
07、html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?
08、如何区分HTML和HTML5?
09、简述一下你对HTML语义化的理解?
10、HTML5的离线储存怎么使用,工作原理能不能解释一下?
三、CSS类的题目
01、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
02、CSS选择符有哪些?哪些属性可以继承?
03、CSS优先级算法如何计算?
04、CSS3新增伪类有哪些?
05、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
06、display有哪些值?说明他们的作用。
07、position的值relative和absolute定位原点是?
08、CSS3有哪些新特性?
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
10、用纯CSS创建一个三角形的原理是什么?
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure),如何使用它,为什么要使用它?
04、.call 和.apply的区别是什么?
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别?
06、请指出以下代码的区别:function Person(){}、var person = Person()、var person = new Person()?
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”? 使用它的好处和坏处分别是什么?
09、什么是事件循环 (event loop)?
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题?
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法?
05、前端开发中,如何优化图像?图像格式的区别?
06、浏览器是如何渲染页面的?
07、页面重构怎么操作?
08、什么叫优雅降级和渐进增强?
09、前端需要注意哪些SEO?如何做SEO优化?
10、平时如何管理你的项目?