CSS中的圣杯布局与双飞翼布局

 一,圣杯布局

  1,什么是圣杯布局?

   所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局

  2,构建圣杯布局的步骤:

    2.1,添加一个容器,在这个容器中添加放三个盒子(左、中、右);

    2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定;

    2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键;

    2.4,设置容器的padding-leftpadding-right属性,属性值分别为左盒子的宽度和右盒子的宽度;

    2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都设置向左浮动;

    2.6,设置左盒子的margin-left属性为-100%

    2.7,通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域;

    2.8,设置右边盒子的margin-left属性为负的自身的宽度;

    2.9,同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域;

    2.10,最后一步就是给容器设置一个最小宽度min-width属性,防止它缩小后变形。

  3,具体示例如下

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box{
            padding: 0 200px;
            min-width: 400px;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<body>
    <div class="box">
        <div class="center">圣杯布局圣杯布局圣杯布圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局
            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局
            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 

 二,双飞翼布局

  1,什么是双飞翼布局  

   和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异    

  2,构建双飞翼布局的步骤

    2.1,添加一个容器,在这个容器中添加三个盒子(左、中、右);

    2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定;

    2.3,设置中间盒子的宽度为100%,这也是双飞翼布局中中间盒子宽度自适应的关键;

    2.4,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都设置向左浮动;

    2.5,再给中间的盒子添加一个子盒子;

    2.6,设置子盒子margin-leftmargin-right属性,属性值分别为左盒子的宽度和右盒子的宽度;

    2.7,设置左盒子的margin-left属性为-100%;

    2.8,设置右边盒子的margin-left属性为负的自身的宽度;

  3,具体示例如下

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: brown;
            float: left;
        }
        .center>.center_in{
            margin: 0 200px;
            height: 200px;
            background-color: yellow;
        }
        .box{
            overflow: hidden;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="center_in">双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
                双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
                双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/TomHe789/p/12360915.html

时间: 2024-10-10 08:41:52

CSS中的圣杯布局与双飞翼布局的相关文章

CSS中的圣杯布局,以及圣杯布局与双飞翼布局的区别

为了解决中间宽度自适应,左右列固定宽度,最早出现的是圣杯布局,双飞翼布局是对圣杯布局的改良,同样这种 布局的优势在于在中间列中的文档可以优先渲染. 1.什么是圣杯布局 其实对于圣杯布局,前面一部分与双飞翼布局完全相同 <style>   .column{ float:left } .container{ width:100% } .column{ height:300px; }   #center_panel{ width:100%;  background-color:red; } #rig

css布局之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局 今天看了很多圣杯布局和双飞翼布局的技术博客,通过自己的理解总结一下吧. 1.二者相同点: 实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果是一样的. 2.不同点: 圣杯布局知识点:浮动,负边距,相对定位,不需要添加额外标签. 双飞翼:只用到浮动,负边距,不需要使用相对定位,需要添加一个额外的标签. 注意:html结构中中间部分要写在左右布局之前,为了优先渲染. 下面就先来看一下圣杯布局的实现过程吧: 先写出基本DOM结构:

css两栏布局、圣杯布局、双飞翼布局

最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .left { float: left; width: 100px; height: 100px; background-color: red; } .box1 .right { margin-left: 100px; height: 100px; background-color: green; }

css布局--圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是经典的三栏式布局.两种布局达到效果上基本相同,都是两边两栏宽度固定,中间栏宽度自适应.(这两种布局都比较老) 在HTML结构上中间栏在最前面保证了最先渲染中间提升性能,并且兼容性良好.两种布局的实现方法前半部分相同,后半部分的实现各有利弊,下面会简单介绍两者的区别. 布局效果: 注意点: 1. .middle元素位于最前面,保证最先渲染middle部分 2. 三个元素都浮动,使元素保持在一行上 3. .middle元素宽度设为100%,独占一行 4. .left元素设置ma

圣杯布局和双飞翼布局的理解和区别

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

圣杯布局,双飞翼布局详解

圣杯布局和双飞翼布局解决的问题是一样的,都是用来解决左右定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染. 圣杯布局和双飞翼布局:三栏全部加上float:left,左右两栏加上负margin,以形成三栏布局. 圣杯布局:大的div设置padding-left和padding-right,左右两个div用相对布局position: relative,加上right和left属性.双飞翼布局:中间div内加一层标签,在设置内层标签的margin html圣杯布局: <div class=

圣杯布局和双飞翼布局的作用和区别

圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局. 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relativ

认识圣杯布局和双飞翼布局

各种各样的布局,无非就是用了浮动 float,负边距,相对定位,通过这三者的巧妙组合跟拼凑来实现的.用好这些,布局就会很简单. 还没学会布局时,就听到有圣杯布局和双飞翼布局,这布局都有这么风骚的名字,就觉得很酷,事实也如此,了解了圣杯布局和双飞翼布局,才发现挺深奥的. 传统的布局中,当我们需要改变两栏的互换,就会很麻烦.因为还要涉及到 HTML 代码的修改,不能完全从 CSS 上更改,这叫 HTML 和 CSS 的耦合.而圣杯布局跟双飞翼布局就是能够不考虑主体的位置,能够只通过 CSS 代码就改

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

圣杯布局与双飞翼布局

圣杯布局和双飞翼布局的目的都是:左右两栏固定宽度,中间部分自适应: 圣杯布局 圣杯布局HTML: <div class="wrap"> <div class="main"> 我是主要 </div> <div class="left"> 我是左边 </div> <div class="right"> 我是右边 </div> </div>