文章目录
- 有一个200x200的div,如何让它在不同分辨率的屏幕上上下左右居中展示,写出CSS实方式。
- 有哪些清除浮动的方式请简述。
- h5有哪些新特性
- 语义化标签有什么作用
- 使用什么方法可以减少页面请求的加载时间?
- bootstrap的实现原理
- CSS的选择器有哪些?层级关系是什么样的
- px和em有什么区别
- 实现一个左中右居中布局,左右两端的盒子宽度为200,如何使中间的盒子自适应展示,请写出结构和样式。
- "5"+4的结果
- 简述一下前端项目的开发流程
- 如何使用axios封装请求
- promise有哪些状态
- 如果给定一个项目的开发流程时间,你达不到要求,你会怎么办?
- 说说你对原型链的理解
- 你是如何解决跨域问题的?
- 你在项目中遇到了什么问题?你是如何解决的?
- HTML+CSS如何使元素居中对齐?
- 如何理解CSS外边距的合并?
- label标签的作用?
- this在js中的作用
- em和rem的区别
- 给定一下数组,将数组进行随机排序
- 写一个闭包
有一个200x200的div,如何让它在不同分辨率的屏幕上上下左右居中展示,写出CSS实方式。
div{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: blueviolet;
transform: translate(-50%,-50%);
}
有哪些清除浮动的方式请简述。
h5有哪些新特性
- 新增video和audio
- 语义化标签
- 本地数据存储
- canves
- SVG
- Geolocation地理位置的获取,获取用户位置信息
语义化标签有什么作用
- 更方便开发和维护
- 便于SEO,搜索引擎可以更方便的识别页面的每个部分。
- 方便其他的设备解析(移动设备,盲人阅读器)
- header section nav aside article footer 等新元素
使用什么方法可以减少页面请求的加载时间?
- 合并请求 减少请求数量
- 压缩js和css文件
- 图片按需加载 压缩图片
bootstrap的实现原理
运用媒体查询 在不同屏幕的屏幕使用不同的容器宽度
CSS的选择器有哪些?层级关系是什么样的
从高到低排列
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel=“external”])
9.伪类选择器(a:hover, li:nth-child)
px和em有什么区别
px
相对于长度单位,像素px是相对于显示器屏幕分辨率而言的
特点
- IE无法调整使用px为单位的字体大小
em
em是相对当前对象内文本的字体尺寸,比如当前行内文本没有设置大小,则相对于浏览器的默认字体尺寸
特点
- em的并不是固定的
- em会继承父级元素的字体大小
实现一个左中右居中布局,左右两端的盒子宽度为200,如何使中间的盒子自适应展示,请写出结构和样式。
flex 盒子实现方法
.box {
display: flex;
justify-content: space-around;
text-align: center;
}
.box div:first-child,
.box div:last-child {
width: 200px;
height: 200px;
background-color: cadetblue;
}
.box div:nth-child(2) {
flex: 1;
background-color: cornflowerblue;
}
gird布局方式
.box {
display: grid;
grid-template-columns: 200px auto 200px;
text-align: center;
}
.box div:first-child,
.box div:last-child {
background-color: cadetblue;
height: 200px;
}
.box div:nth-child(2) {
height: 200px;
background-color: cornflowerblue;
}
样式结构
<div class="box">
<div>
我是左边
</div>
<div>
我是中间
</div>
<div>
我是右边
</div>
</div>
“5”+4的结果
字符串加任何数字都等于拼接
54
隐式转换做加法
+“5”+4 等于 9
-“5”+4 等于 -1
简述一下前端项目的开发流程
如何使用axios封装请求
promise有哪些状态
三种状态
- 初始化 pending
- 成功状态 resolve
- 失败状态 reject
- 同一时间只可以存在一种状态 一旦发生变化就不会再改变
一个简单的promise例子
var p = new Promise((resolve, reject) => {
// 要处理的请求
resolve("成功")
// 请求失败返回
reject('失败')
})
p.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
如果给定一个项目的开发流程时间,你达不到要求,你会怎么办?
开放性题目
说说你对原型链的理解
你是如何解决跨域问题的?
你在项目中遇到了什么问题?你是如何解决的?
HTML+CSS如何使元素居中对齐?
如何理解CSS外边距的合并?
label标签的作用?
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
this在js中的作用
- 在全局变量中,this指向window
- 普通函数中,this指向该普通函数
- 在箭头函数中,调用者指向谁,this就指向谁
- 另一篇笔记
em和rem的区别
相同点:
- 都是相对长度单位
em:
- 相对于当前对象内文本的字体尺寸,如果当前文本字体没有设置。则相对于浏览器的默认字体尺寸。
- 值并不是固定的
- 会继承父元素的字体大小
rem:
- 相对的是HTML(网页)的根元素
给定一下数组,将数组进行随机排序
const arr=[1,2,3,4,5,6,7,8,9,10,11,12]
随机排序
function randomSort(a,b){
return Math.random()>0.5?-1:1
}
从小到大
function randomSort(a, b) {
return a-b;
}
从大到小
从大到小排序
function randomSort(a, b) {
return b-a;
}
写一个闭包
var lastName="zzhangsan"
var init=(function(){
var lastName="lisi"
function fun1(){
console.log(lastName)
}
return fun1
})()
init() lisi 不污染全局变量