HTML5 & CSS3

关于html5

如何理解HTML语义化
- 让人更容易读懂（增加代码可读性）。
- 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）
- 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。
script 标签中 defer 和 async 的区别？
- script：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
- async script: 解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
- defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。
暂定

关于css3

盒模型介绍
css3主要有两种盒模型： 标准盒模型， IE（替代）盒模型；
两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
- 标准盒模型：只包含 content 。
- IE（替代）盒模型：content + padding + border 。
可以通过 box-sizing 来改变元素的盒模型：
- box-sizing: content-box ：标准盒模型（默认值）。
- box-sizing: border-box ：IE（替代）盒模型。

css选择器

2.1 选择器有哪些？

name	type
类型选择器	h1 { }
通配选择器	* { }
类选择器	.box { }
ID 选择器	#unique { }
标签属性选择器	a[title] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }
后代选择	article p
子代选择器	article > p
相邻兄弟选择器	h1 + p
通用兄弟选择器	h1 ~ p

2.2 选择器优先级的计算规则（内联 > ID选择器 > 类选择器 > 标签选择器）
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器出现的次数;
C 的值等于类选择器和属性选择器和伪类出现的总次数;
D 的值等于标签选择器和伪元素出现的总次数。
也可以看下这篇文章：深入理解css选择器优先级

重排（reflow）和重绘（repaint）
- 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
- 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
如何减少重排和重绘？
- 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 (.class或cssText)
- 批量操作DOM，比如读取某元素offsetWidth属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际的DOM中。
- 使用absolute或者fixed使元素脱离文档流，
- 开启GPU加速，利用css属性transform，will-change等，比如改变元素的位置，我们使用translate会比使用绝对定位改变其left，top等来的高效，因为它不会触发重排和重绘，transform使浏览器为元素创建一个GPU图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没必要进行重绘。
对BFC的理解
BFC即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。
推荐一篇大佬关于BFC区域的详细解析：可能是最好的bfc解析了

哪些方式可以构建出BFC区域
- 绝对定位元素（position为absolute或者fixed）
- 行内块元素（display：inlineblock）
- overFlow的值不为visible
BFC具有的一些特性
- 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
- 在BFC中上下相邻两个容器的margin会重叠，创建新的BFC可以避免外边距重叠。可避免margin重叠的问题
- 计算BFC的高度的时候，需要计算浮动元素的高度（可避免高度塌陷），每个元素的左margin值和容器的左border相接触。（可以实现三栏（或两栏）的自适应布局）
- BFC区域不会与浮动的容器发生重叠。
- BFC是独立的容器，容器内部元素不会影响外部元素。

实现两栏布局（左侧固定+右侧自适应布局）

DOM结构：

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

利用浮动，左边元素宽度固定，设置向左浮动。将右边元素的 margin-left 设为固定宽度。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}

同样利用浮动，左边元素宽度固定，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.outer {
    height: 100px;
  }
  .left {
    float: left;
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    overflow: auto;
    height: 100%;
    background: lightseagreen;
  }

利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 。

.outer {
    display: flex;
    height: 100px;
  }
  .left {
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    flex: 1;
    height: 100%;
    background: lightseagreen;
  }

利用绝对定位，父级元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。

.outer {
    position: relative;
    height: 100px;
  }
  .left {
    position: absolute;
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    margin-left: 200px;
    height: 100%;
    background: lightseagreen;
  }

利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute 定位， left 为宽度大小，其余方向定位为 0 。

.outer {
    position: relative;
    height: 100px;
  }
  .left {
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    position: absolute;
    left: 200px;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: lightseagreen;
  }

实现圣杯布局和双飞翼布局（经典三分栏布局）

圣杯布局：
HTML：

<div id="container" class="clearfix">
  <p class="center">我是中间</p>
  <p class="left">我是左边</p>
  <p class="right">我是右边</p>
</div>

CSS:

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: blue;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

双飞翼布局：
html:

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

css:

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}

tips: 上述代码中margin-left: -100% 相对的是父元素的 content 宽度，即不包含 paddig 、 border 的宽度。

两种布局在使用的时候注意：
- 使用 float 布局。
- 两侧使用 margin 负值，以便和中间内容横向重叠。
- 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

多种实现方式实现水平居中
- 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  .father {
  position: relative;
  }
  .son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }
- 利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  .father {
  position: relative;
  }
  .son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
  }
- 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  .father {
  position: relative;
  }
  .son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  }
- 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。
  1
  2
  3
  4
  5
  .father {
  display: flex;
  justify-content: center;
  align-items: center;
  }
  此外，也可以看看大佬这篇文章：多种方式实现水平垂直居中布局
关于flex布局的思考
很多时候我们会用到 flex: 1 ，去查询了一下资料具体包含了以下的含义：
- ***flex-grow: 1 ***：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
- flex-shrink: 1：该属性默认为 1 ，如果空间不足，元素缩小。
- flex-basis: 0% : 1：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项目本身大小。设置为 0% 之后，因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis 设为 auto 的话，其本身大小将会是 0 。
相关文章：flex布局教程
line-height 继承性？
- 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。
- 父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。
- 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值。

关于html5

如何理解HTML语义化

script 标签中 defer 和 async 的区别？

暂定

关于css3

盒模型介绍

css选择器

重排（reflow）和重绘（repaint）

对BFC的理解

实现两栏布局（左侧固定+右侧自适应布局）

实现圣杯布局和双飞翼布局（经典三分栏布局）

多种实现方式实现水平居中

关于flex布局的思考

line-height 继承性？