圣杯布局的原理

圣杯布局的原理圣杯布局的起源InSearchoftheHolyGrail圣杯布局解决的问题两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。圣杯布局的原理HTML代码<divclass="content"><divclass="centercol"></div><divclass="leftcol"></div>

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

圣杯布局的起源

In Search of the Holy Grail

圣杯布局解决的问题

两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。

圣杯布局的原理

HTML代码

<div class="content">
    <div class="center col">
    </div>
    <div class="left col">
    </div>
    <div class="right col">
    </div>
</div>

CSS代码

第一步:定义容器content的样式padding: 0 100px,以及center,left,right的公共样式,同时定义每个容器的颜色和宽度,左右固定一百,中间100%;

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; }
.right{ background-color: green; }
.center{ width: 100%; background-color: pink; }

效果图:
基础样式效果图

第二步:采用负边距将left和right放到左右两边
1. 当左右设置不同方向负边距margin-left和margin-right

.left{ 
   margin-left:-100%;}
.right{ 
   margin-right:-100px;}
  1. 当左右设置同方向负边距margin-left
.left{ 
   margin-left:-100%;}
.right{ 
   margin-left:-100px;}

效果图:
采用负边距定位效果图

此时我们可以清晰的看到center的左右两边都被left和center遮挡,此时圣杯布局如何处理呢?
第三步:用相对定位来解决
1. 当左右设置不同方向负边距margin-left和margin-right

.left{ 
   right:100px;}
  1. 当左右设置同方向负边距margin-left
.left{ 
   right:100px;}
.right{ 
   left:100px;}

最终效果和CSS代码

效果图:
相对定位后的效果图
1. 当左右设置不同方向负边距margin-left和margin-right

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-right: -100px; }
.center{ width: 100%; background-color: pink; }
  1. 当左右设置同方向负边距margin-left
.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-left: -100px; left:100px; }
.center{ width: 100%; background-color: pink; }

优点:

  • 兼容所有浏览器
  • 不用JS计算中间容器宽度就能自适应

缺点:

  • 采用了相对定位,既然用了相对定位(position:relative;),何不使用绝对定位(position:absolute;),更加简单、直接、易懂!

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

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

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

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

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

(0)
blank

相关推荐

发表回复

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

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