圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。要求:允许增加额外的DOM节点,但不能修改现有节点顺序。<divclass="container">  <divclass="main">main</div>  <divclass="

大家好,又见面了,我是你们的朋友全栈君。

题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。
要求:允许增加额外的DOM节点,但不能修改现有节点顺序。

<div class="container">
  <div class="main">main</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

   圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师(传说是玉伯)改进并传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

  • 三列布局,中间宽度自适应,两边定宽;

  • 中间栏要在浏览器中优先展示渲染;

  • 允许任意列的高度最高;

可以看出我们题目的要求跟圣杯布局和双飞翼布局要求一样。

下面我们看看具体的实现方法。

方法一:圣杯布局

1.设置基本样式

/*3.圣杯布局法*/
.left, .main, .right { min-height: 130px; }
.left { background: green; width: 200px; }
.main { background-color: blue; }
.right { background-color: red; width: 300px; }

为了高度保持一致给left main right都加上min-height:130px。

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
2.圣杯布局是一种相对布局,首先设置父元素container的位置:
 

.container { padding: 0 300px 0 200px; }

实现效果是左右分别空出200px和300px区域,效果如图:

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

3.将主体部分的三个子元素都设置左浮动

.left, .main, .right { min-height: 130px; float: left; }

出现了如下情况,怎么办,别着急慢慢来:

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

4.设置main宽度为width:100%,让其单独占满一行

.main { background-color: blue; width: 100%; }

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

5.设置left和right 负的外边距

  我们的目标是让left、main、right依次并排,但是上图中left和right都是位于下一行,这里的技巧就是使用负的margin-left:

.left { margin-left: -100%; background-color: green; width: 200px; }
.right { margin-left: -300px; background-color: red; width: 300px; }

  负的margin-left会让元素沿文档流向左移动,如果负的数值比较大就会一直移动到上一行。关于负的margin的应用也是博大精深,这里肯定是不能详细介绍了。
  设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度,由于left左边是父元素的边框,所以left继续跳到上一行左移,一直移动到上一行的开头,并覆盖了main部分(仔细观察下图,你会发现main里面的字“main”不见了,因为被left遮住了),left上移过后,right就会处于上一行的开头位置,这时再设置right部分margin-left为负的宽度,right就会左移到上一行的末尾。
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

.left, .main, .right { position: relative; min-height: 130px; float: left; }
.left { left: -200px; margin-left: -100%; background: green; width: 200px; }
.right { right: -300px; margin-left: -300px; background-color: red; width: 300px; }

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

至此,我们完成了三列中间自适应的布局,也就是传说中的圣杯布局。完整的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css"> .container { padding: 0 300px 0 200px; } .left, .main, .right { position: relative; min-height: 130px; float: left; } .left { left: -200px; margin-left: -100%; background: green; width: 200px; } .right { right: -300px; margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } </style>
</head>
<body>
<div class="container"> 
  <div class="main">main</div> 
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>
</body>
</html>

方法二:双飞翼布局

  圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。
  他的HTML结构发生了变化:

<div class="container"> 
  <div class="main">
      <div class="content">main</div> 
    </div>
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>

直接贴出代码,读者可以自行参透他们的异同:

<!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%; background: green; width: 200px; } .right { margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } .content{ margin: 0 300px 0 200px; } </style>
</head>
<body>
<div class="container"> 
  <div class="main">
      <div class="content">main</div> 
    </div>
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>
</body>
</html>

  双飞翼布局比圣杯布局多使用了1个div,少用大致4个css属性(圣杯布局container的 padding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,;而双飞翼布局子div里用margin-left和margin-right共2个属性,比圣杯布局思路更直接和简洁一点。简单说起来就是:双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了

想知道更多关于圣杯布局和双飞翼布局,请参考:

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

方法三:Flex布局

  Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
  任何一个容器都可以指定为 Flex 布局,所以Flex 布局将成为未来布局的首选方案。

  对于Flex布局的一些具体语法实现,可参见阮一峰大神的Flex 布局教程:语法篇;网友 JailBreak 为Flex布局制作了 Demo,可以参考。

  想了解Flex布局的具体实例可参见阮一峰大神的Flex 布局教程:实例篇;想直接查看Flex布局实例,你可以到直接到codepen查看Demo。
  
接下来讲一下此实例的具体实现:
1.首先将container块设置为一个Flex容器

.container{ display: flex; min-height: 130px; }

  那么container下属的main、left和right这三个子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。
  
2.对这三个项目做初始设置

.main{ background-color: blue; }
.left{ background-color: green; }
.right{ background-color: red; }

项目根据内容进行弹性布局

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
3.通过order属性设置排列顺序

  可以看出三个项目的排序方式不一样了,main排在了第一个,要让main在中间,left在左边,可以通过Flex容器下的项目的属性“order”属性来设置:

.left{ order: -1; background-color: green; }

对于order属性:定义项目的排列顺序,越小越靠前,默认为0

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

4.通过项目属性flex-grow设置main的放大比例,将空余的空间用main来填充,使三个项目不满一整行;默认为0,也就是对剩余空间不做处理。

.main{ flex-grow:1; background-color: blue; }

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

5.通过项目属性flex-basis 设置left和right的固定宽度

.left{ order: -1; flex-basis: 200px; background-color: green; }
    .right{ flex-basis: 300px; background-color: red; }

这样就实现了我们的目标,是不是很简单?这就是flex布局的魅力。。。

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

6.最后,完整的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之Flex布局</title>
    <style type="text/css"> .container{ display: flex; min-height: 130px; } .main{ flex-grow: 1; background-color: blue; } .left{ order: -1; flex-basis: 200px; background-color: green; } .right{ flex-basis: 300px; background-color: red; } </style>
</head>
<body>
<div class="container"> 
  <div class="main">main</div> 
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>
</body>
</html>

方法四:绝对定位布局

  绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
  
  提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

言归正传:
  绝对定位,就相当于万金油一样的存在,不论什么样的布局,使用绝对定位都能实现,所以对于具体的实现过程就不赘述,下面直接上代码,不懂的call我:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之绝对定位布局</title>
    <style type="text/css"> .container{ position: relative; } .main,.right,.left{ top: 0; height: 130px; } .main{ margin: 0 300px 0 200px; background-color: blue; } .right{ position: absolute; width: 300px; right: 0; background-color: red; } .left{ position: absolute; width: 200px; background-color: green; left: 0; } </style>
</head>
<body>
<div class="container"> 
  <div class="main">main</div> 
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>
</body>
</html>

实现结果当然是一样的啦!

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

(完)
  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147745.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 基于粒子群优化算法的函数寻优算法研究_matlab粒子群优化算法

    基于粒子群优化算法的函数寻优算法研究_matlab粒子群优化算法一、理论基础粒子群算法(particleswarmoptimization,PSO)是计算智能领域一种群体智能的优化算法。该算法最早由Kennedy和Eberhart在1995年提出的。PSO算法源于对鸟类捕食行为的研究,鸟类捕食时,找到食物最简单有效的策略就是搜寻当前距离食物最近的鸟的周围区域。PSO算法就是从这种生物种群行为特征中得到启发并用于求解优化问题的,算法中每个粒子都代表问题的一个潜在解,每个粒子对应一个由适应度函数决定的适应度值。粒子的速度决定了粒子移动的方向和距离,速度随自身及其他粒子

    2022年10月11日
  • QQ好友界面_qq怎么群发消息给好友列表

    QQ好友界面_qq怎么群发消息给好友列表效果如下:依次为图一图二图三图四主要实现效果:点击主标题显示下拉好友,再点击收起下拉好友;鼠标移到好友上背景颜色改变;选中的好友背景颜色也要改变;代码如下:<!DOCTYPEht

  • 编程思想_编程有必要给孩子学吗?

    编程思想_编程有必要给孩子学吗?编程思想

  • 常用字体颜色_常用字体大全

    常用字体颜色_常用字体大全1白色#FFFFFF2红色#FF00003绿色#00FF004蓝色#0000FF5牡丹红#FF00FF6青色#00FFFF7黄色#FFFF008黑色#0000009海蓝

  • idea激活码永久2021最新【2021最新】

    (idea激活码永久2021最新)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1STL5S9V8F-eyJsaWNlb…

  • ubuntu安装pycharm快捷图标_pycharm快捷方式找不到了

    ubuntu安装pycharm快捷图标_pycharm快捷方式找不到了1、首先下载pycharm安装包,从官网下载,选择专业版。2、解压到一个文件夹,打开bin文件夹,命令行下运行pycharm.sh文件。sh./pycharm.sh3、然后出现安装过程,一步一步走下去就行,如果中间问是否需要加载以前的设置(如果以前安装过),可以加也可以不加。4、激活码选择企业版,可以输入:http://idea.imsxm.com/5、完成安装。但是这样每次打开pycharm,需

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号