css易混淆知识点

背景图片和定位的图片

第一种情况，图片超出了盒子的范围，背景图片没法做，只能用定位。
第二种情况，既可以使用定位，也可以使用背景图片。
其次，背景图片往往被"压住"，而定位的图片往往"压住"别人。

visibility和display

设置了visibility: hidden的元素本质上还是占有文档流的位置，仍然具有宽高。
而设置了display: none的元素本质上不占有文档流的位置，不具有宽高。

实例

下拉菜单往往脱离标准流，在鼠标经过的时候展示全貌。展示全貌的时候可能会 遮住 底下标准流中的元素内容。但是我们希望只有在鼠标经过时，才遮住底下内容，在鼠标不经过时不遮住底下的内容。
因此常常使用display: none来控制下拉菜单隐藏时的样式，此时下拉菜单 不占有位置 ，内容填充为空白，即使下拉菜单下面有内容，也不会被遮住。
但是如果使用visibility: hidden，说明下拉菜单 一直占有位置，势必会遮住下拉菜单底下的内容。