关于圣杯布局的实现原理剖析
关于圣杯布局的实现原理剖析
参加了[全栈开发者] 【WEB前端全栈成长计划】,听了课程中老师讲布局案例时提到过圣杯布局,事后百度了一下,可能很多同学们和我一样刚第一次接触到“拥有姓名”的经典布局。仔细研究了一下各两种布局最终都是实现一个左中右的布局,左和右固定宽度,中间宽度100%自适应(如图1)。剖析一下圣杯布局的实现原理巩固学习效果。
图1
一、实现圣杯布局的步骤
第1步:定义主体<div class=”main-body”>,设定主体div的padding左右边距,这里的边距是为左侧和右侧两个DIV预留的宽度(如图2)。
第2步:主体DIV内分别定义中间、左侧、右侧三个DIV(如图1)。
第3步:定义CSS样式
1、定义左侧<div class=”main-body-padding-left”>的margin-left:-100%使其与主体<div>同一行,然后设定left:-300px与主体<div>左侧宽度重叠(如图3)。
2、定义右侧<div class=”main-body-padding-right”>的margin-left:-300使其与主体<div>同一行,然后right:-300px使其与主体<div>右侧宽度重叠(如图4)。
图2
图3
图4
二、实现圣杯布局的代码部份
HTML框架
<div class="main-body"> <div class="main-body-center">中间</div> <div class="main-body-padding-left">左侧</div> <div class="main-body-padding-right">右侧</div> </div>
CSS样式
<style> body{ margin:0px; padding:0px; color:deeppink; } .main-body{ margin:auto 40px; margin-top:10px; padding:0 300px 0 300px; background:red; overflow:hidden; } .main-body-center{ float:left; width:100%; background-color:gray; } .main-body-padding-left{ float:left; width:300px; margin-left:-100%; position:relative; left:-300px; background-color:yellow; } .main-body-padding-right{ float:left; width:300px; margin-left:-300px; position:relative; right:-300px; background-color:blue; } </style>
三、知识点总结
圣杯布局是利用负margin属性,margin-left: -100%,这里说的-100%是相对于父元素宽度而言,子元素margin-left: -100%就像向父元素移动,可以理解为两行,第一行宽度100%,第二行margin-left: -100%后即和第一行完全重叠,通过z-index的设置可以将第一行显示。
通过浏览器调试可以发现,当左侧div设定 z-index:1时,主体<div>定义的padding-left宽度就被显示出来了(如图5),当左侧取消z-index属性,布局恢复正常(如图6)。
图5
图6
- 点赞
- 收藏
- 关注作者
评论(0)