CSS布局学习笔记

来源：互联网发布：des算法详解ppt 编辑：程序博客网时间：2024/04/29 08:10

布局是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}

页面效果：

http://codepen.io/anon/pen/pDcgt

==============================

方法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>

CSS Content

*{  margin:0;  padding:0;}#main{margin:0 200px}#left,#right{position:absolute;top:0;width:200px;}#left{left:0}#right{right:0}

页面效果：

http://codepen.io/anon/pen/lwFry

三栏布局-使用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;}

页面效果：

http://codepen.io/anon/pen/tuqJp

参考：

我熟知的三种三栏网页宽度自适应布局方法

http://www.planeart.cn/?p=446

0 0