元素转换，动画鼠标放上去的效果，固定定位

1、很重要：
display:inline把块级元素转化为行内元素
display:block把行内元素转化为块级元素
display:inline-block

vetical-align:top
共同体

2.鼠标移上去自己变化，鼠标移上去别人变化：
最简单的显示隐藏效果。
p必须在div里面。不支持动画效果

第一种方法：不支持动画效果

div:hover{
color:red}
p{display:none}
div:hover p{
display:block}

<div>我本来就在
       <p>哈哈哈，我出来了<p>
<div>

 

第二种方法，两种方法不能串，支持动画效果。

p{
width:100px;
height:100px;
bg-color:red;
height:0;
overflow:hiddn;
transition:1s}
div:hover p{
height:100px}

 

3.固定定位（不占位置）
position:fixed让盒子固定在游览器中
position:fixed(辅助位置属性)
right:1px(辅助位置属性)
bottom:1px(如果出现负数那么盒子就在游览器外
面）
用了定位一定要写宽度，

 

一定要写top:0
一定要写margin-top:
第一种实现垂直居中的方法：

第二种实现垂直居中的方法：