布局是web页面开发中常用到的一种方法,而CSS布局以众多的优点逐渐成为主流,table布局悄然淡出。最近在重新学习CSS,首先从布局的方向开始,逐渐深入。从网上的各种教程及博客搜集资料整理。通过整理博客的过程中加以理解,也不失为一个学习的方法。
三栏布局基本框架:
Left 和right 部分为固定宽度,Main部分为自适应
HTML的文档流必须是从Main开始,然后才是到两侧的渲染。对应的HTML结构如下:
1:
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
而常规的做法采用
自身浮动法是Left 和 Right 部分分别左右浮动,中间部分使用边距。这种方法对应的布局结构就会发生改变。如下:
2:
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
缺点就是在网速慢的时候,main部分内容会在最后才显示出来,而且如果Main部分存在clear:both属性,会清除浮动,导致不能正常布局,应避免clear样式。
如果采用第一个布局,就会造成以下情况:
====================================================================解决办法如下:------>>>>>
三栏布局-使用绝对定位方法
方法1:main部分采用绝对定位,自适应宽度,两侧固定宽度然后左右浮动。
HTML Content
<body>
<div id="main">
<p style="height:999px; background:#fffaba; ">content</p>
</div>
<div id="left">
<p style="height:999px;background:#8fc41f;">left</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right</p>
</div>
</body>
CSS Content
*{
margin:0;
padding:0;
}
#main{position:absolute;left:200px;right:200px;}
#left,#right{width:200px;}
#left{float:left;}
#right{float:right}
==============================
方法2:Left 和Right部分
采用绝对定位,分别固定于页面的左右两侧,Main的主体栏用左右margin值撑开距离
Html Content
<body>
<div id="main">
<p style="height:999px; background:#fffaba; ">content</p>
</div>
<div id="left">
<p style="height:999px;background:#8fc41f;">left</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right</p>
</div>
</body>
*{
margin:0;
padding:0;
}
#main{margin:0 200px}
#left,#right{position:absolute;top:0;width:200px;}
#left{left:0}
#right{right:0}
页面效果:
三栏布局-使用margin负值方法
首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动,内层div为真正的主体内容,含有左右200像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
Html Content
<div id="wrap">
<div id="main">
<p style="height:999px; background:#fffaba; ">content</p>
</div>
</div>
<div id="left">
<p style="height:999px;background:#8fc41f;">left</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right</p>
</div>
CSS Content
*{ margin:0;padding:0;}
#wrap{width:100%;height:100%;float:left;}
#main{margin:0 200px;}
#left,#right{width:200px;float:left;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
页面效果:
参考: