CSS简单实现圣杯布局和双飞翼布局

一、你能学到什么？

①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性

css变量设置(两个布局都有的部分)

:root{
    
    
    /* 左边栏宽度 */
    --lw:300px;
    /*负左边栏宽度*/
    --lwf:-300px;
    /* 右边栏宽度 */
    --rw:400px;
    /*负左边栏宽度*/
    --rwf:-400px;
    /* 高度 */
    --height:300px;
}

二、圣杯布局的html和css代码

• html部分

  <div class="holyGrail">
    <div class="hg_main">main</div>
    <div class="hg_left">left</div>
    <div class="hg_right">right</div>
  </div>

• css 实现对应的四个class

.holyGrail {
    
    
    height: var(--height);
    /* 留出左右两栏的布局 为了字体不被覆盖*/
    padding-left: var(--lw);
    padding-right: var(--rw);
}
.hg_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.hg_left{
    
    
    position: relative;
    left: var(--lwf);
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.hg_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    height: var(--height);
    background-color: brown;
}

三、双飞翼布局的html和css代码

• html部分

<div class="doubleWing">
    <div class="dw_main">
      <div class="dw_con">main</div>
    </div>
    <div class="dw_left">left</div>
    <div class="dw_right">right</div>
  </div>

• css 实现对应的五个class

.doubleWing{
    
    
    padding-right: var(--rw);
}
.dw_left{
    
    
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.dw_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.dw_con {
    
    
margin-left: var(--lw);
}
.dw_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    background-color: brown;
    height: var(--height); 
}

四、学会两个布局的注意点

圣杯布局

• 在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)
• 中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%
• 左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;
  left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）
• 右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）

双飞翼布局

• 在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动
• 最外层的div可以不用预留左栏的位置了

五、两个布局的对比的优缺点

布局	优点	缺点
圣杯	无多余dom	当中间的宽度小于左右的宽度时，结构混乱
双飞翼	可以支持各种宽度，通用性强较强	需要多加一层dom

代码下载地址

记得一定要自己去实现一下

感谢

如果感觉对您的学习工作有帮助，请将它分享给需要的人，或者点赞鼓励一下，感谢支持
你可以加个收藏，我还会不断更新。。。