前端collection

1、mouseover和mouseenter的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2、CSS display:none和visibility:hidden的区别

使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

3、下面一段代码中两个div的间距是20px。

<div style="100px; height:30px; background:#ccc; margin-bottom:20px;"></div>
<div style="100px; height:30px; background:#ccc; margin-top:10px;"></div>

4、有两个盒子 A、B，B 在 A 盒子中，它们的 css定义如下： 如何实现 B 在 A 中水平方向和垂直方向居中

<div class="box_a">
    <div class="box_b">hello world</div>
</div>

给定的样式如下：

box_a{
 position:relative;
 width:500px;
 height: 500px;
 background-color:green;
 } 
box_b{
position:absolute;
max-width:300px;
max-height:300px;
background-color:blue;
}

解决办法：

.box_b{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;}

 很遗憾的是，以上的这种写发会有兼容性问题。

5、一个标签可以定义多个class，代码样式如下：div背景显示为f00;

<div class="one two"></div>

.one{width:200px;background:#666;}
.two{border:10px solid #F00; background:#f00;}