常见的css布局

走向WEB开发

2019-07-01

实现两边定宽，中间自适应

1.圣杯布局

首先html结构如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
</head>
<body>
    <div class="content">
        <div class="middle">2111111111111</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

css部分

<style>
       *{
            margin: 0;
            padding: 0;
        }
        
        .middle{
            background: pink;
            width: 100%;
        }
        .left{
            background: blueviolet;
            width: 200px;
            
        }
        .right{
            background: blanchedalmond;
            width: 200px;
            
        }
        .middle,.left,.right{
            
            height: 100px;
        }
</style>

效果如下图，现在我们要让left,和right悬浮在middle两侧

常见的css布局

我们给middle、left、right都设置float：left,left让它悬浮在左侧设置margin-left:-100%(负的中间元素的宽度),right让它悬浮在右侧设置margin-right:-200px(负的自身的宽度)现在效果如下：

常见的css布局

.left{
    margin-left:-100%;
    }
.right{
    margin-left:-200px;
    }
.left,right,.middle{
    float:left;
    }

现在要解决的是中间部分被left遮挡住了

给.content设置padding左右两边的.left、.right宽度, .left、.right设置相对定位

.content{
    padding:0 200px;
    }
.left,.right{
    position:relative;
    }
 .left{
    left:-200px;
    }
 .right{
    right:-200px;
    }

这样可以实现两边定宽，中间自适应完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            padding: 0 200px;
        }
        .middle{
            background: pink;
            width: 100%;

        }
        .left{
            background: blueviolet;
            width: 200px;
            margin-left: -100%;
            left: -200px;
        }
        .right{
            background: blanchedalmond;
            width: 200px;
            margin-left: -200px;
            right: -200px;
        }
        .middle,.left,.right{
            height: 100px;
            float: left;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="middle">2111111111111</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

效果图如下:
常见的css布局

2.双飞翼布局

html结构如下

<div class="content">
        <div class="middle"><div>211111111</div></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

css

.middle{
     width: 100%;
    background: paleturquoise;
    height: 200px;
    float: left;
    
}
.middle div{/*就是在middle里面添加div设置margin值实现中间自适应*/
    margin-left: 200px;
    margin-right: 200px;
}
.left{
    background: palevioletred;
    width: 200px;
    height: 200px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin-left:-100%;
}
.right{
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 40px;
    float: left;
    color: #fff;
    margin-left:-200px;
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .middle {
        width: 100%;
        background: paleturquoise;
        height: 200px;
        float: left;

    }

    .middle div {
        margin-left: 200px;
        margin-right: 200px;
    }

    .left {
        background: palevioletred;
        width: 200px;
        height: 200px;
        float: left;
        font-size: 40px;
        color: #fff;
        margin-left: -100%;
    }

    .right {
        width: 200px;
        height: 200px;
        background: purple;
        font-size: 40px;
        float: left;
        color: #fff;
        margin-left: -200px;
    }
    </style>
</head>

<body>
    <div class="content">
        <div class="middle">
            <div>211111111</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

圣杯布局，双飞翼布局的区别

都是两边定宽，中间自适应中间部分放在文档流前面，全部都是设置float:left，区别在于中间部分不被遮挡。双飞翼布局middle里面添加div设置左右的margin值

弹性盒布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            
            display: flex;
            width: 100%;
        }
        .content{
            display: flex;
            height: 200px;
            width: 100%;
        }
        .left{
            background: blueviolet;
            height: 200px;
        }
        .middle{
            background: yellow;
            flex: 1;
            
        }
        .right{
            background: orange;
            height: 200px;
        }
        .left,.right{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="middle">11111111</div>
        <div class="right"></div>
    </div>
</body>
</html>

css