CSS自适应布局

今天小编介绍自适应布局实现方法的demo，
1）左侧固定宽度，右侧自适应，随着窗口的宽度而变化；
2）右侧固定宽度，左侧自适应；
3）中间自适应，两边定宽
1、左定宽
用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%
效果如下：

left.png

代码如下：

.head{
            display: block;
            text-align: center; 
            line-height: 50px;
            height: 40px;
            background-color: yellow;
            color: purple;
        }
        .body{
            display: block;
            height: 400px;
            width: 100%;
        }
        .left{
            float: left;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-right: -100px;
        }
        .right{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
            margin-left: 100px;
        }
        .foot{
            display: block;
            width: 100%;
            height: 40px;
            background-color: yellow;
            text-align: center;

        }

细节解释：line-height等于height可以使文本上下居中，如果line-height超过height，以height为准
2、右定宽
仍然采用margin方法，但这里有一个瑕疵，左侧的部分会被遮挡

right.png

.right{
            float: right;
            width: 100px;
            height: 100%;
            background-color: pink;
            margin-left: -100px;
        }
        .left{
            height: 100%;
            width: 100%;
            color: white;
            background-color: lightblue;
            float: left;
        }

3、中间自适应
实现方法是，左右两边浮动，且在html中先写左右标签，后写中间标签，利用浏览器从上到下解析html标签的特点

middle.png

.body{
            display: block;
            height: 400px;
            width: 100%;
        }
        
        .left{
            height: 100%;
            float: left;
            width: 100px;
            background-color: pink;
        }
        .middle{
            background-color: lightblue;
            height: 100%;
        }
        .right{
            height: 100%;
            float: right;
            width: 100px;
            background-color: lightgreen;
        }