HashMap 数据结构 JDK动态代理 centos7安装 图像处理 canal安装 自动化部署 caching Pure CSS 网站后台管理模板 ai视频教程下载 jquery遍历元素 oracle重命名表名 python的range java开发 java开发学习 java时间转换 java中long javalist转数组 黑帮之地修改器 lol设置 mac画图软件 tar解压 js动态添加元素 保卫萝卜沙漠7攻略 抖音APP下载 桌面系统 Linux进程查看 ps平面设计基础教程 只狼月隐糖 101图集电子版 Ivideo 英语口语学习软件 ap天赋 lol无法连接服务器请检查网络连接 2015刷手机端排名 21天学通C语言 PS去色 SQL基础教程 小程序生命周期
当前位置: 首页 > 学习教程  > 编程语言

主流布局--双飞翼布局

2021/1/13 20:35:45 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

主流布局–双飞翼布局 什么是双飞翼布局&#xff1f; 双飞翼布局最早是淘宝团队提出的&#xff0c;是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。 HTML <div class"parent"><div class"center"><div class"…

主流布局–双飞翼布局

什么是双飞翼布局?
双飞翼布局最早是淘宝团队提出的,是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。
HTML

<div class="parent">
    <div class="center">
        <div class="inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

   .parent{
            height: 300px;
        }
        .left,
        .right,
        .center{
            height: 300px;
            float: left;
        }
        .left,
        .right{
            width: 300px;
        }
        .left{
            background-color: brown;
            margin-left: -100%;

        }
        .center{
            width: 100%;
            background-color: darkgoldenrod;

        }
        .right{
            background-color:purple;
            margin-left: -300px;
          }
        .inner{
            height: 300px;
            background-color: skyblue;
            margin-left: 300px;
            margin-right: 300px;
        }

在这里插入图片描述
圣杯布局相比于双飞翼布局,只是在center元素里面添加了一个inner子级元素,解决了,center元素被left和right元素覆盖的内容。
因此,给inner元素添加一个margin-left和margin-right就可以将内容显示在中间,而不会被左右元素覆盖部分内容。

等分布局

什么是等分布局?
等分布局就是指一行被分为若干列,每一列宽度是相同的值。
1、使用float属性来实现等分布局的效果
2、display属性的值有关table实现等分布局效果

第一种解决方案

在这里插入图片描述
HTML

<div class="parent">
   <div class="column1"></div>
   <div class="column2"></div>
   <div class="column3"></div>
   <div class="column4"></div>
</div>

CSS

 .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

在这里插入图片描述

第二种解决方案

CSS

  .parent{
            width: 100%;
            display: table;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            height: 300px;
            display: table-cell;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

这里我们使用的是parent元素display属性设置为table,如果不设置高度,将默认由子级元素撑起来,那么高度为300px,此时的宽度没有设置,为0px。当设置父级元素宽度为100%的时候就可以正常显示了。在这里插入图片描述

等分布局存在间距的情况

在这里插入图片描述

HTML代码变化

空白间距的实现用margin或者padding
HTML

<div class="parent-fix">
    <div class="parent">
        <div class="column1"></div>
        <div class="column2"></div>
        <div class="column3"></div>
        <div class="column4"></div>
    </div>
</div>

CSS

  .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
            padding-left: 10px;
        }
     .column1{
         background-color: blue;
     }
    .column2{
        background-color: yellow;
    }
    .column3{
        background-color: yellowgreen;
    }
    .column4{
        background-color: lightsalmon;
    }

如果这时候加padding的话,由于宽度为100%加上10px就会导致元素换行。在这里插入图片描述
此时我们需要用到一个属性,box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。 也就是说,每一行的宽度不变还是25%,但是padding-left被定义到里面去了
CSS

 .parent-fix{
            margin-left: -10px;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            width: 25%;
            height: 300px;
            float: left;
            box-sizing: border-box;
            padding-left: 10px;
        }
        .inner{
            height: 300px;
        }
     .column1 .inner{
         background-color: blue;
     }
    .column2 .inner{
        background-color: yellow;
    }
    .column3 .inner{
        background-color: yellowgreen;
    }
    .column4 .inner{
        background-color: lightsalmon;
    }

HTML

<div class="parent-fix">
    <div class="parent">
        <div class="column1"><div class="inner"></div></div>
        <div class="column2"><div class="inner"></div></div>
        <div class="column3"><div class="inner"></div></div>
        <div class="column4"><div class="inner"></div></div>
    </div>
</div>

在这里插入图片描述

等分布局的第二种解决方案修改

CSS

 .parent-fix{
            overflow: hidden;
        }
        .parent{
            width: 1529px;
            display: table;
            margin-left: -10px;
        }
        .column1,
        .column2,
        .column3,
        .column4{
            display: table-cell;
            box-sizing: border-box;
            padding-left: 10px;
        }
        .inner{
            height: 300px;
        }
     .column1 .inner{
         background-color: blue;
     }
    .column2 .inner{
        background-color: yellow;
    }
    .column3 .inner{
        background-color: yellowgreen;
    }
    .column4 .inner{
        background-color: lightsalmon;
    }

在添加边框的时候可能会出现两边会多出10px,以上代码是通过设置空白间距后进行调试处理的。(可能只有自己看的懂,视频老师是这样讲解的,实际过程中还是需要自己去分析调试)
在这里插入图片描述

等高布局

什么是等高布局?
等高布局就是一行被划分成为若干的列,每一列的高度值都是相等的。

等高布局的实现方式

dispaly属性的有关table实现等高布局效果
padding+margin属性实现等高布局的效果

第一种解决方案

在这里插入图片描述
HTML

<div class="parent">
    <div class="left">dd</div>
    <div class="right">vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</div>
</div>

CSS

 .parent{
            height: 100%;
            display: table;
        }
        .left,
        .right{
            width: 300px;
            display: table-cell;
        }
        .left{
            background-color: yellowgreen ;
        }
        .right{
            background-color: lightsalmon;
        }

表格单元格默认是等高的。
在这里插入图片描述

第二种解决方案

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_600367.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?