【学习笔记19】两边定宽中间自适应的三种方法

方法1：利用flex盒

给父代设置display:flex;属性

对第一个和第三个盒子设置宽高和背景颜色；对第二个盒子设置：flex：1

body区域：

<div class="outer">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
</div>

css样式：

.outer{
     display:flex;
        }
.first,.third{
    width:300px;
    height:200px;
    background-color:red;
    }
.third{
    background-color:blue;
    }
.second{
    flex:1;
    background-color:yellow;
    }

方法2：利用浮动float

对第一个盒子设置左浮动，对第二个盒子设置右浮动，此时第一个和第二个盒子都脱离了文档流，不再占据位置，此时第三个盒子就占据了第一个和第二个盒子的位置，再对第三个盒子设置相应的margin值。

记得设置第一个和第二个盒子的宽高。

body内容同方法1，css样式如下所示：

.outer{
     overflow: hidden;
        }
.first{
     width:300px;
     height:100px;
     background-color: bisque;
     float:left;
        }
.second{
     width:300px;
     height:100px;
     background-color:cyan;
     float:right;
        }
.third{ 
     height:100px;
     background-color:burlywood;
     margin:0 300px;
        }

方法3：利用定位

首先给父元素设置position:relative;属性

再对第一个和第二个盒子设置position：absolute；属性，使第一个盒子和第二个盒子脱离文档流，并给它们设置宽高，再对第一个盒子设置left:0;对第二个盒子设置right:0;这样第一个盒子和第二个盒子就分居浏览器两端，而第三个盒子就占据了前两个盒子原来的位置，再对第三个位置设置相应的margin值。

body内容同上，css属性如下所示：

.outer{
    position: relative;
        }
.first{
    width:300px;
    height:100px;
    background-color: bisque;
    position: absolute;
    left:0;
        }
.third{
    height:100px;
    background-color:burlywood;
    margin:0 300px;
        }
.second{
    width:300px;
    height:100px;
    background-color:cyan;
    position: absolute;
    right:0;
        }