关于HTML

简述一下你对HTML语义化的理解？

在没有CSS的情况下，页面也能呈现出内容结构、代码结构
用户体验：例如title、alt用于解释名词
有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于项目的开发及维护，使HTML代码更具有可读性

href与src的区别

1.href：超文本引用

指向一些网络资源，建立和当前元素或本文档的链接关系。

在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。

常用在a、link等标签。

2.src：资源的引用

指向的内容会嵌入到当前标签所在的位置。

浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。

常用在script、img标签中

js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载

浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树和CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树和CSSOM树。（优先加载js文件的原因：防止DOM和CSSOM树加载完毕后受JS又要重新绘制一遍）

2.构建渲染树（Render Tree）。

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

什么是重绘和回流？

重绘：元素样式发生改变，但不影响该节点在页面当中的空间位置及大小。如一个div标签节点的背景颜色、字体颜色等等发生改变，不影响别的元素和整体布局，这个过程就叫做重绘（repaint）

回流：元素被增加、删除或修改元素的空间位置及大小（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致浏览器需要重新的去渲染整个DOM树。

缺点：消耗DOM和浏览器的性能

对比：回流比重绘更耗性能

注意：回流必会重绘，但重绘不一定会回流。（回流重新渲染DOM树和样式，重绘只绘制样式）

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：

添加或者删除可见的DOM元素；
元素位置改变——display、float、position、overflow等等；
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变——resize事件发生时；

关于CSS

CSS选择器优先级

!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器

CSS margin重叠问题

会有重叠现象
- 外间距均为正数，竖直方向上会选择最大的外边距作为间隔
- 一正一负，间距 = 正 - |负|
- 两个负，间距 = 0 - 绝对值最大的那个
不出现重叠现象
- 设置display: inline-block的盒子不
- position: absolute

网页布局有哪几种，有什么区别

静态布局：按照代码的布局来布置；
自适应布局：元素的位置会变而大小不会；
流式布局：元素的大小会变而位置不会变化——屏幕太大太小都会导致元素无法正常显示。
响应式布局：每个屏幕分辨率都会有一个布局样式，同时位置会变而且大小也会变。

position属性和值的含义

relative：生成相对定位的元素，相对于其正常位置进行定位。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值。没有定位，元素出现在正常的流中

display:inline-block 什么时候不会显示间隙？

将子元素放置在同一行
为父元素中设置font-size: 0，在子元素上重置正确的font-size
为inline-block元素添加样式float:left
设置子元素margin值为负数
设置父元素，display:table和word-spacing

你对BFC的理解?

块级格式化上下文，是一个独立的渲染区域.

创建BFC

body根元素
设置浮动,float的值是left或者right
设置定位

- position不是static或者relative
- 是absoulte或者fixed

display的值是inline-block
设置overflow

- overflow的值不是visible
- 是hidden，auto，scroll

表格单元格，table-cell
弹性布局，flex

利用BFC解决问题

解决外边距的塌陷问题(垂直塌陷)
利用BFC解决包含塌陷
清除浮动产生的影响
BFC可以阻止标准流元素被浮动元素覆盖

感谢momoko♥~~~

前端面试题（HTML & CSS）