流式布局思想

Posted 2021-01-27 yanhui1995

流式布局思想
# 尽可能不去使用固定属性值
# 通过父级来获取相应的属性值
# /*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;
#     }