1.优势
表现和内容相分离；代码简洁，提高页面浏览速度；易于维护和改版；提高搜索引擎对网页的索引效率
<span>和<div>标签是没有语义的，是应用样式，所以当样式表失效时它就没有任何的作用
2.盒模型层次
第1层：盒子的边框(border)
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)
3.水平居中和垂直居中
水平居中
垂直居中：
https://www.jianshu.com/p/733d90f5b1cc
4.定位
绝对定位：absolute 相对于最近的具有定位属性的父包含块，若没有则对body
相对定位：relative 相对于以前的位置移动（偏移前的位置保留不动）
固定定位：相对于浏览器窗口
5.浮动布局
文档流：浏览器根据元素在html文档中出现的顺序，从左向右，从上到下依次排列。
设置元素的浮动，该元素将脱离文档流，向左或向右移动直到它的外边距碰到父元素的边框或另一个浮动元素的边框为止
行内元素：行内元素的表现形式主要在于填充内容，它默认是没有上下外边距的，只可以左右，不能设置宽和高
6.清除浮动
浮动溢出，容器没有包围浮动元素，clear 只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行。与浮动框互不干扰，需要对该框应用。
浮动元素后使用一个空元素clear:both;
浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1；
使用CSS的:after伪元素，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动，兼容IE触发 hasLayout。
