疑问解答

重要：

如果有浮动，那么父元素必须清除浮动
有inline-block，需要注意两个inline-block元素之间的间隙，可通过设置他们父元素的font-size:0 来清除
有绝对定位的时候，那么必须为其找一个参考点，该参考点的position为relative或static
当position:relative时，该元素原来所占的空间仍保留（注意理解这句话，也就是说虽然它定位到其他地方了，但是其原来所占的空间仍然保留在页面上）

box-sizing: content-box; 默认值
表示设置的width 为content的宽，整个盒模型的
width = margin-left + padding-left + content + padding-right + margin-right;
box-sizing: border-box
表示设置的width为整个盒模型的宽，而不是content的宽
代码：

//  html:

// 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----------

      ABC
      张杰

//------css-----------
.wrap{
  font-size: 0;
}
span{
  font-size: 12px;
  background: pink;
}

使用inline-block后，两个元素之间会有间隙
解决方法与行内元素之间的间隙的解决方法类似，在父元素上设置
font-sizing: 0
vertical-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的顺序，那对其下载和执行有什么影响？