流式佈局思想
# 儘可能不去使用固定屬性值
# 通過父級來獲取相應的屬性值
# /*view-width view-height*/
# width: 80vw;
#        height: 60vh;
#        background: orange;
#        /*流式佈局限制條件*/
#        /*流式佈局下寬度最大放大到800px,最小隻能縮小到600px*/

# span {
#        /*em=?px 父級字型的大小*/
#        font-size: 2em;
#        display: block;
#        /*寬高em在自身設定字型大小後,值又會更改為相應大小*/
#        /*eg:body:100px => 設定自身字型時em=100px*/
#        /*自身設定字型大小為2em,自身字型大小為200px => width=2em的 em=200px*/
#        /*結果自身寬度是400px*/
#        width: 2em;
#        /*rem= html字型的 大小*/
#        height: 2em;
#        /*自身非設定字型時使用em單位,em取值自身字型大小*/
#        background: red;

# .sup {
#        width: 200px;
#        height: 200px;
#        background: red;
#        /*padding: 50px;*/
#     }
#     .sub {
#        /*父級的content是提供給子級盒子利用的*/
#        margin: 0 5px;
#        border: 5px solid black;
#        padding: 5px;
#        /*auto<=100%*/
#        width: auto;
#        /*width:100%*/
#        height: 50px;
#        background: orange;
#     }