display：none 与 visibility：hidden 的区别？
元素
隐藏和显示最常用的为 display:none 和 visibility:hidden
dispaly:none设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden设置该元素后，元素虽然不可见了，但是依然占据空间的位置
区别:
1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，
则子元 素会显示
2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为
transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以
提高用户体验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
position 的值有哪些? 分别有哪些作用?
静态定位：static 默认值不脱离文档流，top，right，bottom，left 等属性不生效
绝对定位：absolute
绝对定位的关键是找对参照物：找到最近的一级带有带定位的父级元素进行位置移动
如果找不到，那么相对于浏览器窗口进行定位
注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左
右 margin 为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置
相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。
固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；
当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位
的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动
如何解决 margin“塌陷”？
外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给
margin-top，那么他们两个的间距会重叠，以大的那个计算。
解决这种情况 的方法为：两个外边距不同时出现
第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生 上边距，父子元素会进行粘连。
解决方案：
1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成
透明：border：1px solid transparent）；
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给父元素的前面添加一个空元素