Skip to content

Latest commit

 

History

History
320 lines (299 loc) · 8.63 KB

实现三栏布局.md

File metadata and controls

320 lines (299 loc) · 8.63 KB

实现三栏布局

三栏布局在开发十分常见,即两边固定宽度,中间自适应宽度的布局。

Flex

使用CSS3flex布局实现三栏布局,Flex布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持,此处主要是利用flex容器成员默认按照主轴排列,以及利用flex属性即flex-growflex-shrinkflex-basis的简写形式将间的块自适应撑起。

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
        .container{
            display: flex;
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            flex: 1;
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Calc

通过CSScalc可以动态计算中间部分的长度从而做到自适应,calc可以配合inline-block行内块级元素实现三栏布局,注意使用行内块级元素的时候如果编写HTML时换行,这个空白的换行也会作为元素解析从而会产生空白间隙,所以在编写时此处不要换行,此外calc通过与float配合实现也是可行的。

<!DOCTYPE html>
<html>
<head>
    <title>Calc</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            display: inline-block;
            height: 100%;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            width: calc(100% - 400px);
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div><div class="main">main</div><div class="right">right</div>
    </div>
</body>
</html>

BFC

BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境,在这里利用BFC区域不会与浮动元素重叠的特性实现三栏布局。

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            display: flex; /* BFC可触发条件之一:弹性元素,display为flex或inline-flex元素的直接子元素。 */
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Margin

这个方法是使使左右模块各自向左右浮动,并设置中间模块的margin值使中间模块宽度自适应。

<!DOCTYPE html>
<html>
<head>
    <title>Margin</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Float

使用Float配合margin实现三栏布局,主要是margin的负值的应用。

<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: #19be6b;
        }
        .container > .main-container{
            float: left;
            width: 100%;
        }
        .container > .main-container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            margin-left: -200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-container">
            <div class="main">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Table

利用table布局即表格的样式,实现三栏布局。

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style type="text/css">
        .container{
            display: table;
            height: 200px;
            width: 100%;
            border: 1px solid #eee;
        }
        .container > div{
            display: table-cell;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Grid

目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。

<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <style type="text/css">
        .container{
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/25070186
https://juejin.cn/post/6844903686758465550
https://juejin.cn/post/6844904062224171021