css和css3弹性盒模型实现元素宽度（高度）自适应

一、css实现左侧宽度固定右侧宽度自适应

1、定位

    
    
    
 *{
     padding: 0;
     margin: 0;
 }
 .left{
     background: red;
     width: 200px;
     height: 200px;
     position: absolute;
     left: 0;
     top:0;
 }
 .right{
     background: blue;
     height: 200px;
     margin-left: 210px;
 }
    


    
 定宽
    
    
 自适应

2、浮动

    
    
    
 *{
     padding: 0;
     margin: 0;
 }
 .left{
     background: red;
     width: 200px;
     height: 200px;
     float: left;
 }
 .right{
     background: blue;
     height: 200px;
     margin-left: 210px;
 }
    


    
 定宽
    
    
 自适应

3、margin

    
    
    
 *{
     padding: 0;
     margin: 0;
 }
 .left{
     background: red;
     width: 200px;
     height: 200px;
 }
 .right{
     background: blue;
     height: 200px;
     margin-top: -200px;
     margin-left: 210px;
 }
    


    
 定宽
    
    
 自适应

二、css3弹性盒模型实现自适应

1、上下高度固定中间高度自适应

    
    
    
 *{
     margin: 0;
     padding: 0;
 }
 body,html{
     height: 100%;
 }
 #contain{
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 #top{
    height: 200px;
     background: red;
 }
 #center {
     flex: 1;
     background: blue;
 }
 #bottom{
     height: 100px;
     background: green;
 }
    
 



    你好
    你好
    你也好

2、左侧宽度固定右侧宽度自适应
 

    
    
    
 * {
     margin: 0;
     padding: 0;
 }
 
 #contain {
     display: flex; 
 }
 
 #left {
     width: 100px;
     height: 200px;
     background: #fff8a8;
     margin-right: 10px;
 }
 
 #right {
     flex: 1; 
     height: 200px;
     background: #ff9bad;
 }
    



    
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。