文章目录
2020-11-14 closure、setTimeout(宏任务)
它由两部分组成。执行上下文(代号A)，以及在该执行上下文中创建的函数（代号B）。
当B执行时，如果访问了A中变量对象中的值，那么闭包就会产生。
- 高阶函数是利用了闭包？
//利用了闭包，闭包为fun
let fun =(a)=>{
return function (b){
if(b)
console.log(a*b);
}
}
let fo = fun(2);
fo(3); // => 6
//没有闭包
let fun =(a)=>{
return function (b){
if(b)
console.log(a*b);
}
}
fun(2)(3); // => 6
如果有多个setimeout进入microtast，那么依次执行后，还要考虑每个的延迟执行时间。可能有的优先执行，但延迟执行是件比较久，导致最后才输出。例如：
setTimeout(function () {
console.log(a);
}, 0);
var a = 10;
console.log(b);
console.log(fn);
var b = 20;
function fn() {
setTimeout(function () {
console.log('setTImeout 10ms.');
}, 10);
}
fn.toString = function () {
return 30;
}
console.log(fn);
setTimeout(function () {
console.log('setTimeout 20ms.');
}, 20);
fn();
执行结果：
优先执行了console.log('setTimeout 20ms.');然后才是console.log('setTimeout 10ms.');，由于console.log('setTimeout 20ms.');执行时间长，最后才输出。
节流与防抖
参考文章
CSS
BFC
形成bfc的常见条件：
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex inline-bllock等
以下取自文章：
BFC就是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 100%;
box-sizing: border-box;
}
.top {
background-color: yellow;
height: 100px;
width: 100%;
}
.left {
width: 100px;
height: calc(100% - 200px);
float: left;
background: rgb(139, 214, 78);
}
.right {
overflow: hidden;
height: calc(100% - 200px);
background: rgb(170, 54, 236);
}
</style>
<body>
<div class="top">LEFT</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<div class="top">LEFT</div>
</body>
</html>
flex
常用的三个属性：
flex-direction 对齐方向
flex-direction: row | row-reverse | column | column-reverse;
justify-content 在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items 在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
stretch 拉伸
baseline 项目的第一行文字的基线对齐。
flex-wrap 换行
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
flex-flow: <flex-direction> || <flex-wrap>; /* 默认值为row nowrap */
以下为设置在项目上的属性：
order - 排列顺序
flex-grow - 放大比例
flex-shrink - 缩小比例
flex-basis - 在分配多余空间之前，项目占据的主轴空间
flex - 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self -
align-self 子元素对齐
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
margin负值问题
- margin-top和margin-left负值，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响
margin纵向重叠问题
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的也会重叠
box-sizing: border-box;
最后计算出的width宽度包含border的宽度，高度包含border的高度。
line-height继承
- line-height: 2; //直接继承line-height: 2
- line-height: 20px; //直接继承line-height: 20px
- line-height: 200%: //继承的是计算之后的值！！！
/* 例1 */
.container{
font-size: 20px;
line-height: 2;
}
.sub{
font-size: 16px;
//此时.sub继承的line-height为36 = 16px * 2
}
/* 例2 */
.container{
font-size: 20px;
line-height: 200%;
}
.sub{
font-size: 16px;
//此时.sub继承的line-height为父盒子计算后的值
//即40px = 20px * 200%
}
CSS响应式
rem是什么？是一个长度单位
- px是绝对长度单位
- em是相对长度单位，相对于父元素，不常用
- rem是相对长度单位，相对于根元素，常用于响应式
html {
font-size: 100px;
}
div {
fonts-size: 0.16rem;
}
响应式布局的常见方案
- media-query 根据不同屏幕的宽度设置跟元素font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
@media only screen and(max-width: 374px) {
/* iphone5 或更小尺寸，以iphone5比例320px设置font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iPhone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p或更大 */
html {
font-size: 110px;
}
}
div{
font-size: 0.16rem;
}
</style>
</head>
<body>
<div class="container">
<div class="a">11111</div>
</div>
</body>
</html>
rem弊端
- 具有阶梯性，变化不是渐进的、平缓的
网页视口尺寸
- window.screen.height //屏幕高度，电脑/手机屏幕高度
- window.innerHeight //网页视口高度，浏览器高度
- document.body.clientHeight //body高度，网页不同高度不同
vw/vh
- vh网页视口高度的1/100
- wh网页视口高度的1/100
- vmax：(vh和vw两者取最大值)
- vmin：(vh和vw两者取最小值)
- window.innerHeight === 100vh
- window.innerWidth === 100vw
块状元素 vs 内联元素
- display: block/table; 有div h1 h2 table ul ol p等
- display: inline/inline-block; 有span img input button等
盒模型宽度计算
- offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
- box-sizing: border-box
圣杯布局 vs 双飞翼布局
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding(圣杯)一个用margin（双飞翼 ）
手写clearfix
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom: 1; /* 兼容IE低版本 */
}
居中对齐的实现方式
水平居中
- inline元素：text:-align: center;
- block元素：margin: auto;
- absolute元素：left: 50% + margin-left负值;
垂直居中：
- inline元素：line-height
- absolute元素：top:50% + margin-top负值
- absolute元素：transform(-50%, 50%)
- absolute元素：top,left,bottom,right = 0 + maargin:auto; 不知道元素宽度时
2001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
