百分比做单位时的参照物
padding，margin的百分比按照父元素的宽度计算- 定位元素
top，right，bottom，left按父元素的高度计算
H5新增标签
<article>元素： 可以单独发布、重用；可以是一篇帖子、一篇文章、一则用户评论、一个可交互的widget<section>元素： 按主题将内容分组，通常会有标题；并非语义化的div；但你希望这个元素的内容体现在文档的提纲中时使用<nav>元素： 导航栏专属，有利于SEO，可以包裹在ul、li外<aside>元素： 通常表现为侧边栏内容<header>元素： HTML文档的头部，代替div class='header'<footer>元素： 作用同<header><address>元素： 代表与最近父级<article>或整个文档关联的联系人信息<hr>元素： HTML5中重新定义为不同主题内容间的分隔符；区块内容间不需要<hr><blockquote>元素： 引用来自其他来源的内容；cite属性表示该来源的URL<figure>元素： 比较独立的，被主要内容引用的部分；插图\图表\照片\代码；通常有个标题<figcaption><main>元素： 文档的主要内容，应用的核心功能；唯一<em>元素： 表示侧重点的强调<strong>元素： 表示内容的重要性<i>元素： 表示另一种叙述方式；画外音/分类学名词/外来语片段<b>元素： 表示某种需要引起注意，却又没有其他额外语义的内容；摘要中的关键词/评论中的产品名称<small>元素： 免责声明/许可证声明/注意事项<s>元素： 表示不再准确或不再相关的内容<s>原价￥80</s><u>元素： 表示用非文本进行标注的内容；中文专名/拼写检查的错误内容<cite>元素： 引述的作品标题；书/论文/散文/电影/歌曲<abbr>元素： 其title属性的含义为缩写的全称<p title='why the face'>WTF</p><dfn>元素： 用来展现一个术语的定义实例<img>元素- 有src属性且alt属性为空字符： 代表装饰用图
- 有src属性且alt属性为非空字符： 代表图为文档内容的一部分
有src属性但无alt属性： 代表图为内容的一部分，但无等价的文本内容
参考资料
position
- static：默认的position属性，无法设置top/right/bottom/left
- relative： 相对于元素本身在普通流中的初始位置；元素未脱离普通流，显性设置
top等属性后，原来的位置仍保留 - absolute： 相对于距离最近的已定位祖先元素（position值为非static），如果不存在则相对于原始容器；元素脱离普通流
- fixed： 页面滚动时，元素一直出现在屏幕固定位置；元素脱离普通流
- sticky： 实验属性，通俗点说是相对定位和固定定位的结合体，设置了该属性的元素：
- 不会脱离普通流，并保留元素在文档流中占位的大小
- 若元素在普通流中的的位置超出了容器的可视区域，则元素固定在容器内的指定位置
- 当祖先元素整体超出了容器的可视区域后，position由
fixed转为relative - 激活条件：至少设置top，bottom，left，right中的一个
- 一种应用场景——单词字母表。比如字母B下有3个单词boy、body、beauty，然后是字母C，依次下去。当B字母下的单词还在显示屏上的时候，字母B的position属性为fixed固定显示在屏幕上，当以B开头的单词在屏幕上消失后，字母B的position属性变为relative
- 在线demo 用firefox打开
参考资料
BFC
块级格式化上下文（block formatting context） 是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。
如何创建BFC
- 浮动 (元素的 float 不为 none)
- 绝对定位元素 (元素的 position 为 absolute 或 fixed)
- 行内块 inline-blocks (元素的 display: inline-block)
- 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
- overflow 的值不为 visible的元素
- 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
- 根元素或其它包含它的元素