CSS中常见的布局

一、css中常见的布局有哪些？

（1）两列布局

（2）三列布局

（3）弹性布局

（4）圣杯布局

（5）双飞翼布局

二、具体实现

（1）两列布局

https://www.cnblogs.com/qing-5/p/11442906.html

（2）三列布局

https://www.cnblogs.com/qing-5/p/11338819.html

（3）圣杯布局和双飞翼布局

相同点：

　　a、三列布局，中间宽度自适应，两边定宽；

　　b、中间栏要在浏览器中优先展示渲染；
　　c、允许任意列的高度最高；
　　d、要求只用一个额外的DIV标签；
　　e、要求用最简单的CSS、最少的HACK语句；
　　

不同点：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的：

 也就是三栏全部浮动，左右两栏加上负margin，让其跟中间栏div并排。

 不同在于解决 “中间栏div内容不被遮挡” 问题的思路不一样。

(4)、圣杯布局

<style>
        .container {
            padding: 0 100px 0 200px;
        }
        .left {
            width: 200px;
            background: red;
            /* 关键点：会让元素沿文档流向左移动，负数值比较大的话会一直移动到上一行 */
            margin-left: -100%;
            left: -200px;
        }
        .right {
            width: 100px;
            background: blue;

            margin-left: -100px;
            right: -100px;
        }
        .main {
            background: yellow;
            width: 100%;
        }
        .left, .main, .right{
            float: left;
            min-height: 200px;
            position: relative;
        }

    </style>

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

(5)、双飞翼布局

<style type="text/css">
        .left, .main, .right {
            float: left;
            min-height: 130px;
            text-align: center;
        }
        .left {
            margin-left: -100%;
            background: green;
            width: 200px;
        }
        .right {
            margin-left: -300px;
            background-color: red;
            width: 300px;
        }
        .main {
            background-color: blue;
            width: 100%;
        }
        .content{
            /* 关键点：用margin把div挤到中间正常展示*/
            margin: 0 300px 0 200px;
        }
    </style>

<div class="container">
    　   <div class="main">
    　　 <div class="content">main</div>
</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>

(6)、弹性布局（Flexbox）

　　CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
　　Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

参考链接：https://www.jianshu.com/p/81ef7e7094e8

猜你喜欢