三栏布局的五种办法（双飞翼布局,圣杯布局,flex弹性盒子布局等）

最新推荐文章于 2024-07-04 01:22:11 发布

志若鸿鹄，尺步寸微

最新推荐文章于 2024-07-04 01:22:11 发布

阅读量824

点赞数 2

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

本文链接：https://blog.csdn.net/qq_41363062/article/details/86116007

版权

本文详细介绍了三栏布局的五种实现方式，包括双飞翼布局、圣杯布局、flex弹性盒子布局、绝对定位布局和table布局。重点讨论了每种布局的核心思想，如利用浮动、负margin、定位和flexbox特性来实现左右定宽、中间自适应的布局效果，并分析了各种布局的优势和适用场景。

摘要由CSDN通过智能技术生成

面试题目：假设高度一定，请写出三栏布局，左右宽度300px,中间宽度自适应，中间栏要放在文档流前面优先渲染；

先说一下我的想法，三栏布局，三栏就是三个栏目板块放在一行，最开始我看见的是左右定宽，中间自适应，最先想到的是是外面放一个大div，让他们直接inline-block，一个左浮动一个右浮动，中间100%宽度，这显然是一个贼蠢又错误的想法，这道题核心是中间栏放在文档流前面优先渲染， 所以遵循浏览器自上而下加载代码的原则，应该把这个div盒子放在最前面，所以我的想法是先创建一个大div盒子叫min100%放在最前面，left和right左右俩个盒子放在后面，然后利用margin-left的负值将left和right移动上一行也就是这个min盒子左右边，然后在这个min的div盒子里面放一个小盒子不设宽度，叫他自适应，同时也优先渲染，虽然说的有点乱，但应该就是双飞翼布局

一、双飞翼布局

双飞翼布局据说是玉伯大大提出来的，始于淘宝UED，双飞翼布局用来诠释三栏布局就是把三栏布局比作一个大鸟，中间自适应那栏是鸟的身体，left和right那俩个栏是他们的翅膀；
其中的margin-left负值我也不太明白，最开始他们都是float：left，所以最开始margin-left是0；负的margin-left会让元素沿文档流向左移动，如果负的值较大，比如说-100%，相当于直接向左移动出100%一整行的距离，因为left左边是父元素边框，所以直接跳到上一行左移，移动100%距离相当于直接从上一行的末尾开始左移，移到上一行的开头，right在上一行末尾是因为负值300px,刚好是right的宽度，所以他从上一行的末尾开始向左移移动了300px;如果加大right的负值，他会继续向左移

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        .left, .main, .right /*并集标签选择器将共同属性写在一起，减少代码冗余*/{
            float: left;
            min-height: 130px;
            text-align: center;
        }
        .left {
            margin-left:-100%;/*设置margin-left-100%是为了让left向左移动一整行的位置*/
            background:orange ;
            width: 300px;
        }

        .right {
            margin-left: -300px;/*让right移动到上一行的末尾*/
            background-color: olive;
            width: 300px;
        }
        .main {
            background-color: #ccc;
            width: 100%;/*宽度占一整行*/
        }