欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-28 08:04:17
...

一、你能学到什么?

①如何使用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

代码下载地址

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

感谢

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

相关标签: css学习