css入门---三栏布局的七种方式

最新推荐文章于 2024-04-23 11:10:17 发布

Reilyyy

最新推荐文章于 2024-04-23 11:10:17 发布

阅读量127

点赞数 2

分类专栏： css 文章标签： css 三栏布局

本文链接：https://blog.csdn.net/Reilyyy/article/details/100507629

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

双飞翼布局

html：
中间元素最先渲染，然后左元素，右元素
css：
三个子元素统一左浮动，中间元素宽度100%，左元素margin-left：-100%，右元素margin-left 负的自己宽度
ps：记得给父元素清除浮动

<!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>Document</title>
    <!-- 左右定宽  中间自适应 -->
    <style>
        *{
           margin:0;
           padding:0;
        }
        .left{
           width: 300px;
           height: 500px;
           background-color: aqua;
           float: left;
           margin-left: -100%;
        }
        .main{
            width: 100%;
            height: 500px;
            float: left;
            background-color:chartreuse;
        }
        .right{
            width: 100px;
            height: 500px;
            background-color: cadetblue;
            float: left;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

圣杯布局

html：
中间元素首先渲染，然后左元素、右元素
css：
三个元素都设置左浮动和相对定位（position：relative）
左元素margin-left：-100%
右元素margin-left：-（左元素宽度+右元素宽度）right：-自己宽度
中间元素宽度为100%
ps：利用浮动和相对定位可以先渲染中间元素，但是实现较复杂

<!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>Document</title>
    <style>
        /* .box{
            margin-left: 100px;
            margin-right: 100px;
        } */
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            width: 100px;
            height: 500px;
            position: relative;
            margin-left: -100%;
            background-color: aqua;
        }
        .right{
            float: left;
            width: 100px;
            height: 500px;
            margin-left: -200px;
            position: relative;
            right: -100px;
            background-color: blueviolet;
        }
        .main{
            float: left;
            width: 100%;
            height: 500px;
            position: relative;
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

table布局

html：
按照左中右的顺序渲染元素
css：
父元素display： table；
子元素display： table-cell；
左右定宽，中间不设宽
ps：不能设置栏与栏之间的距离

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: table;
            width: 100%;
            height: 500px;
        }
        .left,.right,.main{
            display: table-cell;
            height: 100%;
        }
        .left{
            width: 200px;
            background-color: aquamarine;
        }
        .right{
            width: 300px;
            background-color: cadetblue;
        }
        .main{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

定位式布局

html：
按照左中右的顺序渲染
css：
左右元素定宽，中间元素不设宽
左元素left为0 右元素right为0 中间元素left为左元素宽度 right为右元素宽度
ps：父元素相对定位，子元素绝对定位

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
        }
        .box div{
            position: absolute;
        }
        .left{
            width: 200px;
            height: 500px;
            left: 0;
            background-color: coral;
        }
        .right{
            width: 200px;
            height: 500px;
            right: 0;
            background-color: cyan;
        }
        .center{
            left: 200px;
            right: 200px;
            height: 500px;
            background-color: darkgoldenrod;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

flex布局

html：
按照左中右渲染元素
css：
父元素display为flex
中间元素的flex为1，不设宽度
左右元素定宽
ps：主要原理是flex-grow（项目放大比例）设为1，flex-shrink（项目缩小比例）设为1，flex-basis（项目占据主轴空间）设为0%

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            display: flex;
            width: 100%;
            height: 500px;
            background-color: greenyellow;
        }
        .main{
            flex: 1;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left" style="width: 200px; background-color: grey">左</div>
        <div class="main">中</div>
        <div class="right" style="width: 200px; background-color: pink">右</div>
    </div>
</body>
</html>

流体布局

html：
先渲染左右元素，再渲染中间元素
css：
中间不设宽度，左右定宽
左右元素分别向左右浮动
中间元素设左右margin（margin值分别与左右元素宽度相同）

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 500px;
            float: left;
            background-color: coral;
        }
        .right{
            width: 200px;
            height: 500px;
            float: right;
            background-color: blue;
        }
        .main{
            margin-left: 100px;
            margin-right: 200px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

BFC布局

html：
先渲染左右元素，再渲染中间元素
css：
中间元素不设宽，overflow：hidden
左右元素定宽，分别向左右浮动
ps：利用bfc区域不会和浮动元素重合这一特性实现三栏布局

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 100px;
            height: 500px;
            float: left;
            background-color: coral;
        }
        .right{
            width: 200px;
            height: 500px;
            float: right;
            background-color: blue;
        }
        .main{
            overflow: hidden;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

Reilyyy

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css入门---三栏布局的七种方式

双飞翼布局html：中间元素最先渲染，然后左元素，右元素css：三个子元素统一左浮动，中间元素宽度100%，左元素margin-left：-100%，右元素margin-left 负的自己宽度ps：记得给父元素清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫