Html1、如何理解html语义化{/* 未语义化的写法 */} div div标题/div div内容/div div按钮/div /div {/* 语义化的写法 */} div h1标题/h1 p内容/p button按钮/button /div让人更容易读懂让机器更容易读懂2、块元素和内联元素块元素display:block/table有div、h1、h2、table、ul、p等大部分不通过css控制的情况下独占一行的元素内联元素display:inline/inline-block;有span、img、input、button等大部分不通过css控制的情况下不会独占一行的元素放一起可能会一行挨着摆放的元素css1、盒子模型宽度如何计算template !-- 如下代码div的offsetWidth为多少 -- div iddiv/div /template style langscss #div { width: 100px; padding: 10px; border: 1px solid #000; margin: 10px; } /styleoffsetWidth内容宽度内边距边框无外边距offsetWidth 10010*21*2答案为122px2、如果想让上题的offsetWidth100px怎么做注意在样式里面加一个box-sizing: border-box;template !-- 如下代码div的offsetWidth为多少 -- div iddiv/div /template style langscss #div { width: 100%; padding: 10px; border: 1px solid #000; margin: 10px; box-sizing: border-box; } /style3、margin纵向重叠template !-- p123到456的距离为多少 -- p123/p p/p p/p p/p p456/p /template style langscss p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } /style相邻元素的margin-top和margin-bottom会发生重叠空白内容的p/p也会发生重叠答案15px4、margin负值margin-top和margin-left负值、元素自身向上或者向左移动margin-right负值元素自身不动右侧元素向左移动margin-bottom负值元素自身不动下方元素向上移动5、BFC理解与应用块级格式化上下文一块独立的渲染区域内部元素的渲染不会影响到边界以外的元素形成BFC的常见条件float不是noneposition是absolute或fixedoverflow不是visibledisplay是fiex inline-block等BFC的常见应用清除浮动7、float布局1、实现圣杯布局和双飞翼布局三栏布局中间一栏最先加载和渲染内容最重要两侧内容固定中间内容随着宽度自适应一般用于pc网页圣杯布局和双飞翼布局的技术总结使用float布局两侧使用margin负值以便和中间内容横向重叠防止中间内容被两侧覆盖一个用padding一个用margin圣杯template div idheaderheader/div div idcontainer div idcenter classcolumn中间/div div idleft classcolumn左边/div div idright classcolumn右边/div /div div idfooterfooter/div /template style langscss #header{ text-align: center; background: palegoldenrod; } #center{ background: palegreen; width: 100%; } #left{ background: palevioletred; width: 200px; margin-left: -100%; position: relative; right: 200px; } #right{ background: peru; width: 150px; margin-right: -150px; } #footer{ text-align: center; background: pink; clear: both; } .column{ float: left; } #container{ padding: 0 150px 0 200px; } /style双飞翼template view idmain classcol view idmain-wrap 中间 /view /view view idleft classcol 左边 /view view idright classcol 右边 /view /template style langscss #main{ height: 100px; background: palegoldenrod; width: 100%; } .col{ float: left; } #main-wrap{ margin: 0 200px 0 250px; } #left{ height: 100px; background: palegreen; width: 250px; margin-left: -100%; } #right{ height: 100px; background: palevioletred; width: 200px; margin-left: -200px; } /style8、手写clearfix清除浮动1. 额外标签法隔墙法在浮动子元素的最后面添加一个空块级标签设置clear: both;template div classbor浮动/div div classbor浮动/div div classclear/div /template style langscss .bor{ float: left; } .clear{ clear: both; } /style注意缺点添加无意义的HTML标签增加代码混乱不易阅读2、overflow:hidden /auto.clear{ overflow: hidden; }优点代码少缺点超出容器内容会被隐藏部分情况不可用3、::after 伪元素清除浮动template div classbox clearfix div classleft左/div div classright右/div /div div classout4444/div /template style langscss .clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; } .box { background: #ccc; /* 不写height看父盒子会不会自动撑开 */ } /* 子元素浮动 */ .left { width: 100px; height: 100px; background: skyblue; float: left; } .right { width: 100px; height: 100px; background: orange; float: left; } .out{ width: 200px; height: 200px; background: pink; } /style如果没有清除浮动会底部的样式会顶上去就像是上面这层是浮动在上层的。注意不增加 html 标签性能好企业最常用9、flex布局1、display:flex;给最外层添加display:flex;样式就可以写flex样式display:flex;2、flex-direction 设置主轴方向rowrow-reversecolumncolumn-reverse例子代码template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; flex-direction: column-reverse; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style3、justify-content 设置主轴上的子元素排列方式flex-startflex-endcenterspace-betweenspace-around例子代码template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; justify-content:space-around; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style4、flex-wrap 设置子元素是否换行nowrap默认值 不换行wrap换行wrap-reverse规定灵活的项目在必要的时候拆行或拆列但是以相反的顺序。5、align-items 设置侧轴上的子元素排列单行stretchcenterflex-startflex-endbaseline代码例子template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; align-items:baseline; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style6、flex属性属性定义子项目分配剩余空间用flex来表示占多少份数如果子元素没有宽度则按份数均分父元素的宽度例子代码template div classflex-box div classflex-item1/div div classflex-item big2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; align-items:baseline; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } .big{ flex: 1; background: palegreen; } /style10、absolute和relativerelative依据自身定位absolute根据最近一层定位元素定位定位元素absolute、relative、fixedbody11、水平居中inline元素text-align: centerblock元素margin: 0 autoabsoluteleft: 50%margin-left: -pxflex元素justify-content:centerinline元素text-align: centertemplate p classcenter居中对齐/p /template style langscss .center{ width: 500px; background: palegreen; color: #000; text-align: center; } /styleblock元素margin: 0 autotemplate div classbox div classcenter居中对齐/div /div /template style langscss .box { width: 500px; background: palegoldenrod; } .center { width: 100px; background: palegreen; color: #000; margin: 0 auto; } /styleabsoluteleft: 50%margin-left: -pxtemplate div classcenter居中对齐/div /template style langscss .center { width: 100px; background: palegreen; color: #000; position: absolute; left: 50%; margin-left: -50px; } /style12、垂直居中inline元素line-height的值等于height的高度absolute元素top:50% margin-top负值absolute元素transform: transform(-50%, -50%);absolute元素top、left、right、bottom、margin: auto;flex元素align-items:center13、css图文样式line-height如何继承写具体的数值如30px则直接继承改数值写比例如2/1.5则继承该比例写百分比如200%则继承计算出来的值14、css响应式rem是什么px绝对长度单位em相对长度单位相对于父元素rem相对长度单位相对于根元素常用于响应式布局vw和vhvw网页视口高度的1/100vh网页视口宽度的1/100JS1、event loop事件循环JS是单线程运行的异步需要基于回调来实现event loop就是异步回调的实现原理js如何执行从前到后一行一行执行如果某一行报错则停止下面代码的执行先把同步代码执行完再执行异步event loop过程同步代码一行行放在call stack执行遇到异步会先记录下来等待时机时机到了就移动到callback Queue如果call stack为空即同步代码执行完成Event Loop开始工作轮巡查找Callback Queue如有则移动到Call stack执行然后继续轮巡查找永动机一样2、Promise三种状态pending、resolved、rejectedpending -- resolved或者pending -- rejected变化不可逆转const p1 new Promise((resolve, reject) { setTimeout(() { resolve(p1) }, 1000) }) const p2 new Promise((resolve, reject) { setTimeout(() { // reject(p2) }, 2000) }) console.log(p1, p1); console.log(p2, p2); setTimeout(() { console.log(p1, p1); console.log(p2, p2); }, 3000)状态表现pending状态不会触发then和catchresolved状态会触发后续then回调函数rejected状态会触发后续catch回调函数const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) const p2 new Promise((resolve, reject) { setTimeout(() { reject(失败) }, 2000) }) p1.then(res { console.log(p1,res); }) p2.then(res { console.log(p2,res); }).catch(err { console.log(p2,err); })then和catch改变状态then正常返回resolved里面有报错则返回rejectedcatch正常返回resolved里面有报错则返回rejected题目1const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); throw new Error(error) }).catch(err { console.log(2); }).then(res { console.log(3); })题目2const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); }).catch(err { console.log(2); }).then(res { console.log(3); })题目3const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); throw new Error(error) }).catch(err { console.log(2); }).catch(err { console.log(3); })
Html1、如何理解html语义化{/* 未语义化的写法 */} div div标题/div div内容/div div按钮/div /div {/* 语义化的写法 */} div h1标题/h1 p内容/p button按钮/button /div让人更容易读懂让机器更容易读懂2、块元素和内联元素块元素display:block/table有div、h1、h2、table、ul、p等大部分不通过css控制的情况下独占一行的元素内联元素display:inline/inline-block;有span、img、input、button等大部分不通过css控制的情况下不会独占一行的元素放一起可能会一行挨着摆放的元素css1、盒子模型宽度如何计算template !-- 如下代码div的offsetWidth为多少 -- div iddiv/div /template style langscss #div { width: 100px; padding: 10px; border: 1px solid #000; margin: 10px; } /styleoffsetWidth内容宽度内边距边框无外边距offsetWidth 10010*21*2答案为122px2、如果想让上题的offsetWidth100px怎么做注意在样式里面加一个box-sizing: border-box;template !-- 如下代码div的offsetWidth为多少 -- div iddiv/div /template style langscss #div { width: 100%; padding: 10px; border: 1px solid #000; margin: 10px; box-sizing: border-box; } /style3、margin纵向重叠template !-- p123到456的距离为多少 -- p123/p p/p p/p p/p p456/p /template style langscss p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } /style相邻元素的margin-top和margin-bottom会发生重叠空白内容的p/p也会发生重叠答案15px4、margin负值margin-top和margin-left负值、元素自身向上或者向左移动margin-right负值元素自身不动右侧元素向左移动margin-bottom负值元素自身不动下方元素向上移动5、BFC理解与应用块级格式化上下文一块独立的渲染区域内部元素的渲染不会影响到边界以外的元素形成BFC的常见条件float不是noneposition是absolute或fixedoverflow不是visibledisplay是fiex inline-block等BFC的常见应用清除浮动7、float布局1、实现圣杯布局和双飞翼布局三栏布局中间一栏最先加载和渲染内容最重要两侧内容固定中间内容随着宽度自适应一般用于pc网页圣杯布局和双飞翼布局的技术总结使用float布局两侧使用margin负值以便和中间内容横向重叠防止中间内容被两侧覆盖一个用padding一个用margin圣杯template div idheaderheader/div div idcontainer div idcenter classcolumn中间/div div idleft classcolumn左边/div div idright classcolumn右边/div /div div idfooterfooter/div /template style langscss #header{ text-align: center; background: palegoldenrod; } #center{ background: palegreen; width: 100%; } #left{ background: palevioletred; width: 200px; margin-left: -100%; position: relative; right: 200px; } #right{ background: peru; width: 150px; margin-right: -150px; } #footer{ text-align: center; background: pink; clear: both; } .column{ float: left; } #container{ padding: 0 150px 0 200px; } /style双飞翼template view idmain classcol view idmain-wrap 中间 /view /view view idleft classcol 左边 /view view idright classcol 右边 /view /template style langscss #main{ height: 100px; background: palegoldenrod; width: 100%; } .col{ float: left; } #main-wrap{ margin: 0 200px 0 250px; } #left{ height: 100px; background: palegreen; width: 250px; margin-left: -100%; } #right{ height: 100px; background: palevioletred; width: 200px; margin-left: -200px; } /style8、手写clearfix清除浮动1. 额外标签法隔墙法在浮动子元素的最后面添加一个空块级标签设置clear: both;template div classbor浮动/div div classbor浮动/div div classclear/div /template style langscss .bor{ float: left; } .clear{ clear: both; } /style注意缺点添加无意义的HTML标签增加代码混乱不易阅读2、overflow:hidden /auto.clear{ overflow: hidden; }优点代码少缺点超出容器内容会被隐藏部分情况不可用3、::after 伪元素清除浮动template div classbox clearfix div classleft左/div div classright右/div /div div classout4444/div /template style langscss .clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; } .box { background: #ccc; /* 不写height看父盒子会不会自动撑开 */ } /* 子元素浮动 */ .left { width: 100px; height: 100px; background: skyblue; float: left; } .right { width: 100px; height: 100px; background: orange; float: left; } .out{ width: 200px; height: 200px; background: pink; } /style如果没有清除浮动会底部的样式会顶上去就像是上面这层是浮动在上层的。注意不增加 html 标签性能好企业最常用9、flex布局1、display:flex;给最外层添加display:flex;样式就可以写flex样式display:flex;2、flex-direction 设置主轴方向rowrow-reversecolumncolumn-reverse例子代码template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; flex-direction: column-reverse; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style3、justify-content 设置主轴上的子元素排列方式flex-startflex-endcenterspace-betweenspace-around例子代码template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; justify-content:space-around; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style4、flex-wrap 设置子元素是否换行nowrap默认值 不换行wrap换行wrap-reverse规定灵活的项目在必要的时候拆行或拆列但是以相反的顺序。5、align-items 设置侧轴上的子元素排列单行stretchcenterflex-startflex-endbaseline代码例子template div classflex-box div classflex-item1/div div classflex-item2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; align-items:baseline; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } /style6、flex属性属性定义子项目分配剩余空间用flex来表示占多少份数如果子元素没有宽度则按份数均分父元素的宽度例子代码template div classflex-box div classflex-item1/div div classflex-item big2/div div classflex-item3/div /div /template style langscss .flex-box { display: flex; align-items:baseline; width: 500px; height: 200px; background: palegoldenrod; } .flex-item { height: 100px; width: 100px; background: pink; border: 1px solid #000; } .big{ flex: 1; background: palegreen; } /style10、absolute和relativerelative依据自身定位absolute根据最近一层定位元素定位定位元素absolute、relative、fixedbody11、水平居中inline元素text-align: centerblock元素margin: 0 autoabsoluteleft: 50%margin-left: -pxflex元素justify-content:centerinline元素text-align: centertemplate p classcenter居中对齐/p /template style langscss .center{ width: 500px; background: palegreen; color: #000; text-align: center; } /styleblock元素margin: 0 autotemplate div classbox div classcenter居中对齐/div /div /template style langscss .box { width: 500px; background: palegoldenrod; } .center { width: 100px; background: palegreen; color: #000; margin: 0 auto; } /styleabsoluteleft: 50%margin-left: -pxtemplate div classcenter居中对齐/div /template style langscss .center { width: 100px; background: palegreen; color: #000; position: absolute; left: 50%; margin-left: -50px; } /style12、垂直居中inline元素line-height的值等于height的高度absolute元素top:50% margin-top负值absolute元素transform: transform(-50%, -50%);absolute元素top、left、right、bottom、margin: auto;flex元素align-items:center13、css图文样式line-height如何继承写具体的数值如30px则直接继承改数值写比例如2/1.5则继承该比例写百分比如200%则继承计算出来的值14、css响应式rem是什么px绝对长度单位em相对长度单位相对于父元素rem相对长度单位相对于根元素常用于响应式布局vw和vhvw网页视口高度的1/100vh网页视口宽度的1/100JS1、event loop事件循环JS是单线程运行的异步需要基于回调来实现event loop就是异步回调的实现原理js如何执行从前到后一行一行执行如果某一行报错则停止下面代码的执行先把同步代码执行完再执行异步event loop过程同步代码一行行放在call stack执行遇到异步会先记录下来等待时机时机到了就移动到callback Queue如果call stack为空即同步代码执行完成Event Loop开始工作轮巡查找Callback Queue如有则移动到Call stack执行然后继续轮巡查找永动机一样2、Promise三种状态pending、resolved、rejectedpending -- resolved或者pending -- rejected变化不可逆转const p1 new Promise((resolve, reject) { setTimeout(() { resolve(p1) }, 1000) }) const p2 new Promise((resolve, reject) { setTimeout(() { // reject(p2) }, 2000) }) console.log(p1, p1); console.log(p2, p2); setTimeout(() { console.log(p1, p1); console.log(p2, p2); }, 3000)状态表现pending状态不会触发then和catchresolved状态会触发后续then回调函数rejected状态会触发后续catch回调函数const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) const p2 new Promise((resolve, reject) { setTimeout(() { reject(失败) }, 2000) }) p1.then(res { console.log(p1,res); }) p2.then(res { console.log(p2,res); }).catch(err { console.log(p2,err); })then和catch改变状态then正常返回resolved里面有报错则返回rejectedcatch正常返回resolved里面有报错则返回rejected题目1const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); throw new Error(error) }).catch(err { console.log(2); }).then(res { console.log(3); })题目2const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); }).catch(err { console.log(2); }).then(res { console.log(3); })题目3const p1 new Promise((resolve, reject) { setTimeout(() { resolve(成功) }, 1000) }) p1.then(res { console.log(1); throw new Error(error) }).catch(err { console.log(2); }).catch(err { console.log(3); })
原理详解：从集成学习到实战调优)
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
