1.行内元素，块级元素，行内块元素：

行级（display：inline）：a、span、small、strong、em、i、code <所有和文本相关的元素，不能自动换行 不能设置宽度等元素>

块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、section、arcitcle、pre、table、tbody、thead、th、tr  <会自动换行的元素，为一个整体块 能设置width等参数>

行内块（display：inline-block）：img、input  <可以设置高度，宽度，行高等，两个行内块元素在一行上会有空隙>

2.margin塌陷：

1.若两个盒子为一行内的元素，则两个盒子的距离为margin的和

2.若父，子的盒子重叠，两个盒子的距离为最大的那个margin，若给子盒子添加边距，则两个盒子一起移动。

解决方法：1）父盒子添加 overflow：hidden。 2）父盒子添加 padding。 3）父盒子添加 border。

3.子盒子浮动造成父盒子高度塌陷:

元素浮动会造成其他元素位置的变化。除此之外，浮动还有一种特殊情况，当子盒子全部浮动，如果父盒子没有指定高度，则父盒子高度将会塌陷为 0。

例子：若将ul不设置高度，高度由li撑起来，在设置浮动时，则父盒子的高度会变为0。

解决方法：1）在父元素中添加一个新的元素，为新元素设置 clear:both 。2）为父元素添加 overflow: hidden 属性。3）为父元素添加伪类：after，对伪类设置 clear:both。

4.粘性定位：

sticky定位是fix和relative和fixed的结合，一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。 在设置的参数基础上改变定位方式

特点：1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效