重要：
- 如果有浮动，那么父元素必须清除浮动
- 有inline-block，需要注意两个inline-block元素之间的间隙，可通过设置他们父元素的font-size:0 来清除
- 有绝对定位的时候，那么必须为其找一个参考点，该参考点的position为relative或static
- 当position:relative时，该元素原来所占的空间仍保留（注意理解这句话， 也就是说虽然它定位到其他地方了，但是其原来所占的空间仍然保留在页面上）
-
box-sizing属性
主要用于计算盒模型时width和height值的确定
可用常用的值：
-
box-sizing: content-box;默认值
表示设置的width 为content的宽，整个盒模型的
width = margin-left + padding-left + content + padding-right + margin-right; -
box-sizing: border-box
表示设置的width为整个盒模型的宽，而不是content的宽
代码：
// html:
<div class="wrap"></div>
// css
.wrap{
width: 100px;
height: 100px;
background-color: pink;
border: 20px solid ;
/* box-sizing: border-box; */
}
如上： 默认情况下（不添加box-sizing:border-box），wrap盒模型的总宽度为：100px + 20px * 2 = 140px;
如果添加上box-sizing:border-box; 那么wrap盒模型的总宽度为100px；
- **行内元素之间的间隔 **
因为写HTML代码时，总是将一个标签占用一行的位置，因此两个行内元素之间在页面显示上会有一个空格，这个主要是由于写html时的换行符导致的，可以给行内元素的父元素添加font-size:0；
如：
//------html----------
<div class="wrap">
<span class="word1">ABC</span>
<span class="word2">张杰</span>
</div>
//------css-----------
.wrap{
font-size: 0;
}
span{
font-size: 12px;
background: pink;
}
使用inline-block后，两个元素之间会有间隙
解决方法与行内元素之间的间隙的解决方法类似，在父元素上设置
font-sizing: 0vertical-align的使用
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/BFC
其主要作用是相当于一个隔离框，生成一个边界，可以解决外边距合并问题，因此其也用于清除浮动，具体还得查看详细资料，以便确定其作用z-index的使用
参考：关于z-index 那些你不知道的事clear:right 和 clear: left的含义
clear: right；指不允许右侧有浮动
clear: left； 指不允许左侧有浮动
记住：float是魔鬼，会影响相邻元素；clear是小白，只对自身有影响，对相邻元素不会造成影响
参考：准确理解CSS clear:left/right的含义及实际用途行内元素设置宽高、内边距、外边距和边框
行内元素需要分成两类来进行说明，行内非替换元素和行内替换元素。
-
行内替换元素
设置宽高、内边距、外边距和边框，均有效，也就是能够在文档中占有一席之地——对上下文有影响 -
行内非替换元素
为行内非替换元素设置水平内边距、水平外边距、水平边框均是有效的，可以改变其宽度。
为行内元素非替换元素设置宽、高、垂直内边距、垂直外边距、垂直边框均不会影响行内框的高度（行高），也就是说设置这些属性后，它们在文档中所占用的位置也不会增加。
这里面需要注意：为行内非替换元素设置垂直内边距，然后再设置背景，可以发现背景延伸到了内边距，虽然产生这样的效果，但是这个内边距对它垂直方向的元素无影响，也就是对行高没有影响。
增加行内非替换元素高度的方法：添加行高
对于float布局和flex布局的选择
因为flex布局在IE11以上才能使用，可能存在兼容性问题，如果产品时移动端的，则优先使用flex布局，如果大部分情况下载PC上使用，则使用float布局，兼容性要好一些浏览器是在什么时候下载js文件的？又是在什么时候执行js文件的？整个流程是怎样的？如果使用defer、async或者调整js的顺序，那对其下载和执行有什么影响？
