display:none和visibility:none和opacity:0的区别
-
display:none元素不可见。这个属性会让元素完全消失，不会占有原来的空间，会被下一个元素占用。 -
visibility:hidden也表示元素不可见。但是这个元素还是会占有自己的空间，不会让下一个元素填充。 -
opacity:0opacity表示元素的透明度，当透明度为0 的时候元素就消失了，空间还是会被自己占有。
查看demo
细节：
display:none由于元素已经不存在了，是不能设置任何动画的。visibility:hidden也不能设置动画，元素不可见，点击不了。
opacity:0元素可以设置动画。在通过visibility控制元素不让用户点击
查看demo
绝对定位position: absolute到底相对于父元素的内容的哪个位置
position:absolute 子元素相对于父元素的定位，在父元素的border里面，不包括border。
不包括border部分
如果想对齐父元素的左下角，给子元素的
left设置为父元素的border负值
查看demo
vertical-align:middle的简单运用
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
-
对于表单元素的垂直局中,设置到单元格中控制内部元素。(无论是行内元素还是块级元素
对于表格的垂直局中
)
- 用于块级元素中的行内元素的垂直局中
通过float,vertical的实现同一个效果。
查看demo
