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:
第一種實現垂直居中的方法：

第二種實現垂直居中的方法：