学习笔记之传说中的圣杯布局
2012-09-20 22:01
99 查看
有时觉得看那些国外教程感觉还挺好的,英文不多,大部分都是代码多,了解个思路就好的了。然而最难啃的是那些学术性的论文呢,里面专业名词多,难懂,代码又少,最主要我这个先天英文差,死啃烂啃才把六级啃过的人,看到一大堆英文免不了还是一阵发晕。言归正传,圣杯布局我听就听了很久很久啦,而且每次看到圣杯布局总会离不开一篇文章,那就是a list apart里面的In Search of the Holy Grail 。随着现在H5,CSS3的发展,IE6,IE7的逐渐退出舞台,或许现在工程师也没那么纠结了(或许而已,移动的大肆发展,还是出现了更多要兼容的东西,但是现在也逐渐不用再纠结那个IE6了吧,起码做移动端的就可以不用)。这篇文章06发布的,或许将来有一天人人的浏览器都支持CSS3的盒布局了,那浮动布局,绝对定位布局就可以退出舞台咯。
圣杯布局它的目标是左右两栏定宽,中间那一行流式。首先是html代码(为了简便处理这里就用位置命名ID,实际操作上还是使用语义化的词命名ID):
一、圣杯布局需要比较多的数学计算,这里我设left的宽度为X,right的宽度为Y。这里先不考虑padding和margin。
第一步,设置container的padding-left为left的宽度,padding-right为right的宽度。(图片来自 a list apart,假设了left宽为200px,right宽为150px)
![](http://pic002.cnblogs.com/images/2012/307484/2012092020444465.gif)
第二步,将每一列都设定好宽度。
![](http://pic002.cnblogs.com/images/2012/307484/2012092020513989.gif)
第四步,把left放到应该到的位置上,就是center的左边。
![](http://pic002.cnblogs.com/images/2012/307484/2012092021000324.gif)
接着设置left层移到padding-left的位置那边,使用相对定位,跟它自己的位置相距离它的宽。
![](http://pic002.cnblogs.com/images/2012/307484/2012092021124056.gif)
第五步,把right层移到padding-right的那个位置上
![](http://pic002.cnblogs.com/images/2012/307484/2012092021180136.gif)
最后一步,可用性的修改。由于中间center层是流式的,当窗口大小缩小到X+Y的时候,center就没有了,所以应该给#container设置一个最小宽度
接着就是修改IE6以下的bug了,margin负值在IE6上会失效把left层弄到很远的地方,需要把它拉回来
至于为什么用right层的宽度,文中没有给出解析,要我们去尝试或者直接把它当成护身符。
二、带有padding的圣杯布局,假设left层的左右padding为x,center层的padding为y,right层的padding为z.
圣杯布局是一个经典,或许在IE6还有点点问题,但是随着IE6的退出舞台,技术的快速发展,或者过多几年,这个技术也可能没人在用了,但是经典是不会被遗忘的。
圣杯布局它的目标是左右两栏定宽,中间那一行流式。首先是html代码(为了简便处理这里就用位置命名ID,实际操作上还是使用语义化的词命名ID):
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
一、圣杯布局需要比较多的数学计算,这里我设left的宽度为X,right的宽度为Y。这里先不考虑padding和margin。
第一步,设置container的padding-left为left的宽度,padding-right为right的宽度。(图片来自 a list apart,假设了left宽为200px,right宽为150px)
![](http://pic002.cnblogs.com/images/2012/307484/2012092020444465.gif)
#container{ padding-left:Xpx; padding-right:Ypx; }
第二步,将每一列都设定好宽度。
#container .column{ float:left; } #center{ width:100%; } #left{ width:Xpx; } #right{ width:Ypx; } #footer{ clear:both; }
![](http://pic002.cnblogs.com/images/2012/307484/2012092020513989.gif)
第四步,把left放到应该到的位置上,就是center的左边。
#left{ width:Xpx; margin-left:100%; }
![](http://pic002.cnblogs.com/images/2012/307484/2012092021000324.gif)
接着设置left层移到padding-left的位置那边,使用相对定位,跟它自己的位置相距离它的宽。
#container .column{ float:left; position:relative; } #left{ width:Xpx; margin-left:-100%; right:Xpx; }
![](http://pic002.cnblogs.com/images/2012/307484/2012092021124056.gif)
第五步,把right层移到padding-right的那个位置上
#right{ width:Ypx; margin-right:-Ypx; }
![](http://pic002.cnblogs.com/images/2012/307484/2012092021180136.gif)
最后一步,可用性的修改。由于中间center层是流式的,当窗口大小缩小到X+Y的时候,center就没有了,所以应该给#container设置一个最小宽度
body{ min-width:(2X+Y)px; }
接着就是修改IE6以下的bug了,margin负值在IE6上会失效把left层弄到很远的地方,需要把它拉回来
* html #left { left: Ypx; }
至于为什么用right层的宽度,文中没有给出解析,要我们去尝试或者直接把它当成护身符。
二、带有padding的圣杯布局,假设left层的左右padding为x,center层的padding为y,right层的padding为z.
body { min-width: 2(2x+X+2y)+(2z+Y)px; } #container { padding-left: (2x+X)px; padding-right: (2z+Y+2y)px; } #container .column { position: relative; float: left; } #center { padding: 0 ypx; width: 100%; } #left { width: Xpx; padding: 0 xpx; right: (X+2x+y)px; margin-left: -100%; } #right { width: Ypx; padding: 0 zpx; margin-right:(Y+2z+y)px; } #footer { clear: both; } /*** IE Fix ***/ * html #left { left: (2z+Y)px; }
圣杯布局是一个经典,或许在IE6还有点点问题,但是随着IE6的退出舞台,技术的快速发展,或者过多几年,这个技术也可能没人在用了,但是经典是不会被遗忘的。
相关文章推荐
- ExtJS的布局--学习笔记
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- kshon学习笔记之android相对布局
- 安卓学习笔记之———五大布局
- PhoneGap/Cordova学习笔记--4.使用HTML5进行页面布局
- 学习笔记4/5(相对布局 布局文件顺序问题
- 学习笔记_JFame中的JTable和布局(2)
- Android用户界面设计——关于布局的学习笔记
- 学习笔记之静态、自适应、流式、响应式四种网页布局区别
- XHTML学习笔记(3)之布局实例
- 自学Android系列 笔记2 Android 学习之浅谈Android五大布局
- Android应用开发学习笔记之相对布局
- ConstraintLayout布局学习笔记
- Flex 布局教程:语法篇--学习笔记
- Stoned Bootkit v2学习笔记之infector(友情赠送SBv2磁盘布局介绍)
- Bootstrap布局之栅格系统学习笔记
- 前端学习笔记--HTML/CSS--网页布局
- 学习笔记:iOS布局库—MyLayout库之框架布局MyFrameLayout
- 慕课:网页布局基础课程——学习笔记
- iOS学习笔记 Masonry自动布局