面试可能会遇到的问题（一）

基于前端面试整理了一些自己复习到的知识，留作总结。
参考链接已附，侵删。

---

1、说一说对HTML语义化的理解。

语义化就是让文本内容来结构化，选择与语义相符合的标签，使代码语义化，不仅便于开发者阅读，也能维护和写出更优雅的代码，还能够让搜索引擎和浏览器等工具更好的解析。
1.尽可能少的使用div和span这些无语义的标签；
2.不要为了实现样式而使用纯样式的标签，比如b、i、font等，改用css样式来设置；
3.需要强调的文本，可以用strong和em标签来表示，strong是加粗，em是斜体；
4.使用表格时，标题、表头、主体部分和尾部都要用对应的标签；
5.在即可以使用div，又可以使用p使，尽量使用p标签；
6.表单域要用fieldset包起来，使用legend标签说明表单的用途；
7.input标签的说明文本需要用label标签，指定label标签的for属性使其与input关联；

HTML5新增的结构标签：article/section/header/footer/nav/aside/main/figure/figcaption
各标签适用：
article:一篇独立的文档内容，内部可以嵌套header/footer/section/article
section:对页面内容进行分块，内部可以包含一个标题，嵌套section/article
header:包含复杂内容的标题时，使用header来组织
nav:定义页面上的导航条，配合ul、li和a标签使用
aside:页面或者文章的附属信息，通常使用css渲染成侧边栏
main:一个页面最多包含一个main标签，包含导航条、LOGO、版权信息等之外的主体内容
figure:用于表示独立的"图片区域"
figcaption:放在figure内容，定义图片区域的标题

HTML5新增的语义元素：mark/time/details/summary/wbr/bdi
wbr:指定文本在何处适合添加换行
bdi:将一段文本从上下文中隔离出来

2、如何实现三栏布局
https://blog.csdn.net/mrchengzp/article/details/78573208
https://kmknkk.xin/2018/03/02/CSS三栏布局/

1.浮动布局
浮动的元素脱离文档流，要清除浮动，否则会引起父元素高度塌陷等。浮动布局比较简单，兼容性比较好。
基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，DOM结构为左-右-中，否则右侧会沉在中间内容的下侧。
float布局主要内容无法最先加载。中间内容没有设置margin的情况下，避免出现文字环绕，可以为该块创建BFC。
2.绝对定位布局
绝对定位也是脱离文档流的，意味着里面所有的子元素都是脱离文档流的。
主要内容可以优先加载，无需考虑顺序问题。
3.flex布局
flexbox布局是css3新的布局方案，ie10开始支持，但是IE10的是-ms形式的，是目前移动端常用的布局。
flex布局的demo顺序要按左-中-右来排序。
4.表格布局
表格布局的兼容性很好，但是当其中一个单元格高度超出时，另外两个单元格也会跟着变高。
左中右的模块间无法设置间隔，对SEO不够友好。
5.网格布局
也是CSS3新出的一种布局方式，但也有浏览器兼容性问题
高度需已知
6.圣杯布局
布局顺序为中左右。父元素设置margin为左右腾出空间。
看起来复杂，后期不好维护
7.双飞翼布局
圣杯布局的一种优化，结构简单，易维护，但三栏之间难以插入空挡

3、理解CSS盒模型
https://www.cnblogs.com/chengzp/p/cssbox.html

1.基本概念：
每一个HTML元素都会占据页面的一个区域，由里向外分别由内容区、内填充区、边框区和外边距区组成。盒模型有两种标准，标准模型和IE模型(IE 5.5)。
标准模型中的width和height指的是内容区的宽高。IE模型的宽高指的是内容+填充+边框的总和。
用CSS3中的box-sizing属性可以切换两种模型。box-sizing:content-box;(标准模型) box-sizing:border-box;(IE模型) 浏览器默认的方式是content-box。
2.用JS获取盒模型对应的宽高，有几种方式
①dom.style.width/height
这种方法只能获取内联样式所设置的宽高
②dom.currentStyle.width/height
获取的是页面渲染完成后的结果，无论样式设置的方式是什么都能够获取到。但是只有IE才支持
③window.getComputedStyle(dom).width/height
同②。兼容Firefox和chrome浏览器，IE9及以上，可以与②一起使用
④dom.getBoundingClientRect().width/height
根据元素在视窗中的绝对位置来获取宽高，相对于视口的位置（IE9及以上）
⑤dom.offsetWidth/offsetHeight
兼容最好的(content+padding+border)
3.边距重叠的问题。
子元素设置margin-top，会体现在父元素上
可以用BFC来解决边距重叠的问题；或者也可以在父元素上面加一个border

4、理解BFC
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

1.BFC的概念
块级格式化上下文
2.BFC的原理
·BFC元素在垂直方向上的margin会发生重叠
·BFC的区域不会与浮动元素的box重叠
·BFC在页面上是一个独立的容器，外面不会影响里面，里面也不会影响外面
·计算BFC的高度时，浮动元素也会参与计算
3.BFC如何创建
·float值不为none
·position不是static或relative
·display是table相关的
·overflow不为visible
·根元素html
4.BFC的应用场景
·防止垂直方向的margin重叠
·清除浮动（float也参与高度计算）
·自适应两栏布局（BFC不与浮动元素重叠）

5、DOM事件
https://blog.csdn.net/water_v/article/details/78309468

1.DOM事件的级别
·DOM0 element.οnclick=function(){}
·DOM2 element.addEventListener(‘click’, function(){}, false)(IE中用attachEvent)
·DOM3 在DOM2的基础上增加了很多事件类型
2.DOM事件模型
事件捕获（从上到下）、事件冒泡（从下到上）
3.DOM事件流
浏览器与页面交互过程中的事件如何到达页面及页面如何响应。事件流分三个阶段：捕获阶段-》目标阶段-》冒泡阶段
4.DOM事件捕获的具体流程
window–>document–>html(document.documentElement)–>body(document.body)–>…–>目标元素；
冒泡的具体流程与捕获流程相反。
5.Event对象的常见应用
event.preventDefault(): 阻止事件默认行为;
event.stopPropagation():阻止事件冒泡；
event.stopImmediatePropagation():阻止当前节点的后续事件及事件链上的所有节点绑定的事件；
event.currentTarget:代理中的父元素（当前绑定事件的dom）；
event.target:当前被点击的元素； IE中用srcElement； 这个地方需要理解事件委托
6.自定义事件
var eve = new Event('custom'); dom.addEventListener('custom', function() { console.log('custom') }); dom.dispatchEvent(eve);
CustomEvent对象用法同Event对象，CustomEvent多一个可选的 eventInitDict 参数，可以用来指定触发事件的参数。

6、理解事件委托
https://www.cnblogs.com/liugang-vip/p/5616484.html

事件委托也叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，即子级委托父级来代为执行事件。
·使用事件委托的原因
①添加到页面上的事件处理程序，由于需要与dom不断交互，程序越多引起浏览器重排与重绘的次数就越多，会影响页面的性能。事件委托可以减少dom操作，优化性能。
②事件处理函数越多，占用的内存就会越多，性能就会变差。
③使用事件委托，新添加的子节点也有事件冒泡。
·事件委托的实现
利用event.target|event.srcElement来获取事件目标节点，判断事件作用的目标元素。
若子元素占满父元素，可以用while循环不断寻找ev.target的parentNode。
·相关事件
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
特别注意：mouseover和mouseout虽然也有事件冒泡，因为需要经常计算它们的位置，处理起来不太容易。
不合适用事件委托：mousemove，每次都要计算它的位置，非常不好把控；focus，blur之类，本身就没用冒泡的特性，自然就不能用事件委托了。