css相关
1.BFC及其应用
BFC: 块级格式化上下文,一种css渲染模式,BFC 内部元素和外部元素互不影响
创建BFC:
- html根元素
- float定位元素
- overflow属性不是visible的元素
- 绝对定位元素
- display为inline-block、表格布局或者弹性布局
BFC的主要作用:
- 清除浮动
- 同一BFC中的元素垂直方向外边距会重叠,为防止重叠,可将元素放入不同的BFC
2.怎样让一个div垂直水平居中
<div class="parent">
<div class="child"></div>
</div>
- flex布局
.parent {
display: flex;
justify-content: center;
align-item: center;
}
- 定位 + transform/margin
<!--不定宽高-->
.parent {
position: relative
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!--给定宽高-->
.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
margin-top: -5px;
margin-left: -25px;
}
<!--或-->
.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
- 栅格布局
.parent {
display: grid;
}
.child {
justify-self: center;
align-self: center;
}
- 在张鑫旭的《CSS世界》里面第一次看到,原理就是(基于我个人的理解):设置inline-block和vertical-align:middle后,里面的元素会基于中间的文字准线居中对齐(学生时代的英语本子里面写字母,都是4条线形成三个空白区域,文字的对齐就是根据这几条线的)vertical-align更多信息可以看看张鑫旭博文; 然后,由于伪类是position:static(默认)的,那么伪类撑开了父元素的基准线(高度是100%),使得此时文字的基准线就是整个div.parent的中心了,另外vertical-align只影响inline或者inline-block的,所以div.child设置vertical-align就能居中了。 以上是我个人的理解,有很多表达不清楚的地方,更详细的内容还是推荐张鑫旭的博文。
div.parent {
font-size: 0;
text-align: center;
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
div.child{
display: inline-block;
vertical-align: middle;
}
3.分析比较opticy:0,display:none和visibility:hidden的优劣及适用场景
- opticy: 0, 渲染元素继续占据空间,只是不可见,可以点击,非继承,子元素不可通过改变该属性来显示, 引起重绘
- visibility:hidden,占据空间,不可点击,继承,子元素可设置visible来显示,引起重绘
- display:none, 元素从渲染树消失,不占据空间,不可点击,非继承,引起回流
js基础
1. ['1', '2','3'].map(parseInt) what&why
parseInt(string, radix),该函数返回值类型为十进制。
string | radix |
---|---|
必须参数,为需要解析的字符串 | 可选参数,转换基数,为2-36之间的数字 如果radix为0或不存在,转换规则如下 1. string 以"0x"或者"0X"开头, 则基数是16 (16进制). 2. string 以"0"开头, 基数是8(八进制)或者10(十进制),那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出radix参数的值。 string 以其他值开头,则基数为10 |
map()方法调用一个函数,处理数组中的每一项,返回一个新数组
let new_array = arr.map(function callback(currentValue[,index[,arr]) {
return elment process
}[,thisArg])
其中,thisArg 为传递给callback 的this 值
题目
['1', '2','3'].map(parseInt)
等价于
`['1', '2','3'].map( (item, index) => {
return parseInt(item, index)
})
parseInt('1', 0) -> 1 parseInt('2', 1) -> NaN 因为1进制中没有2 parseInt('2', 1) -> NaN 所以结果为['1',NaN,NaN ]
2. 什么是防抖和节流
- 防抖:动作触发n秒后执行函数,n秒内动作重复触发,则重新计算时间
funtion debounce(fn) {
let timeout = null
return function() {
clearTimeOut(timeout)
timeout = setTimeout( () => {
fn.apply(this,arguments)
},500)
}
}
function sayHi() {
console.log('防抖成功')
}
let inp = document.getElementById('inp')
inp.addEventListener('input', debounce(sayHi))
- 节流: n秒内,不管动作触发多少次,都只执行一次函数
function throttle(fn) {
let canRun = true
return function() {
if(!canRun) {
return
}
canRun = false
setTimeout(() => {
canRun = true
fn.apply(this, arguments)
}, 500)
}
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
3. 介绍下Set, Map, WeakSet和WeakMap的区别
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存
Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构
- 集合(Set)
ES6一种新增的数据结构,类似于数组,但成员是无序和唯一的
Set本身是一个构造函数,example:
const s = new Set()
[1,2,3,4,3,2,1].forEach( item => {
s.add(item)
})
for(let i of s) {
console.log(i) // 1,2,3,4
}
// 数组去重
let arr = [1,2,3,4,3,2,1]
[...new Set(arr)] // 1,2,3,4