前端入门小菜鸟---盒模型应用

1.左边固定，右边自适应

        .div{    display:flex;/*父元素display为flex，变为弹性盒模型，则子元素横向排列*/
        }
       .div1{
           width:500px;
           height:300px;
           background-color:yellowgreen;  
       }
       .div2{
           width:100px;
           height:300px;
           background-color:brown;
           flex-grow:1;/*平分除了固定元素之外的空间，占剩余空间一份，他可以自适应*/
       }


<!--左边固定，右边自适应-->
<div class='div'>
<div class='div1'></div>
<div class='div2'></div>
</div>

关键用法：
display:flex;/*父元素display为flex，变为弹性盒模型，则子元素横向排列*/
flex-grow:1;/*平分除了固定元素之外的空间，占剩余空间一份，他可以自适应*/

2.左右两端固定，中间自适应

.parent{
        display:flex;
        height: 500px;
    }
    .left{
           width:200px;
           height:200px;
           background-color:blue;  
    }
    .center{
          
           height:200px;
           background-color: brown;
            flex-grow:1; 
    }
    .right{
          width:100px;
           height:200px;
           background-color: red;
    }
   


    <div class='parent'> 
            <div class='left'></div>
            <div class='center'></div>
            <div class='right'></div>
    </div>
    
    解析：此处用法与上面的用法相同

3.上下两端固定，中间自适应

html{
    width:100%;
    height: 100%;
}
body{
    width:100%;
    height: 100%;
    position: relative;
}

    .top{
          width:100%;
           height:100px;
           background-color:blue;  
           position: absolute;
           top:0;
           left:0;
    }
    .center{
           width:100%;
        
           background-color: brown;
            
            position: absolute;
            left:0;
            right: 0;
            top:100px;
            bottom: 100px;
    }
    .bottom{
           width:100%;
           height:100px;
           background-color: red;
           position: absolute;
           bottom: 0px;
           left:0;
           right: 0;
    }

   
            <div class='top'></div>
            <div class='center'></div>
            <div class='bottom'></div>

注解：此处用了绝对定位和相对定位，注意 position: absolute; top:0; left:0; 这几个必须连起来一起用