一 div居中
#container { margin:0 auto; }
margin:1px 2px 3px 4px;其中四个值分别代表上右下左(顺时针)
margin:1px 2px;其中1px代表分别距浏览器上边和下边的距离，2px代表分别距左右的距离。
margin:0 auto; 0 代表距上下的距离，auto代表距左右的距离。当左右距离为auto的时候，浏览器自动测算时左右距离一致。
二 绝对定位
当某个div被设定为position:absolute，它本质上已经和其它对象分离开了，它的定位模式不影响其它对象，也不被其它对象影响。
#sample{
postion:absolute;
left:0;
}
表示距左边距离为0px
例子:
#left{
position:absolute;
left:0;
width:200px;
}
#center{
margin-left:200px;
margin-right:200px;
height:100px
}
#right{
position:absolute;
right:0;
width:200px;
}
这样左右两边是宽度固定的两个div，中间的div距浏览器左右两边分别为200px，正好留出了左右div宽度的位置，并且中间div的宽度自适应。
三 高度自适应
有的人觉得很简单，直接设置height:100%即可，但是仅仅这样做是不够的。
必须明白的一点是：一个对象的高度能否自适应，取决于它的父对象是否高度自适应。
例子一:
<html>
<body>
<div id="content"></div>
</body>
</html>
要想让content的div高度自适应，必须这样设置
html,body{ height:100%; }
#content{ height:100%; }
例子二:
<html>
<body>
<div id="content">
<div id="left"></div>
</div>
</body>
</html>
要想让left的div高度自适应，必须这样设置
html,body{ height:100%; }
#content{ height:100%; }
#left{ height:100%; }
也就是说要设置left的高度自适应，必须设该对象的父对象content高度自适应。
要设content高度自适应，也要设置其父对象的高度自适应。
- 3楼maoyuanjun201昨天 23:46
- 我知道博主错在哪里了，postion写错了，应该是position，少了个i,呵呵，不过博主那样还是达不到效果的，帮楼主改了下，如下：n[code=html]nbody,html{n padding: 0px;n margin: 0px;n }n #left{n position:absolute;n left:0;n width:200px;n height: 100px;n border: 1px solid red;n }n #center{n margin-left:200px;n margin-right:200px;n height: 100px;n border: 1px solid blue;n }n #right{n position:absolute;n top: 0px;n right:0;n width:200px;n height: 100px;n border: 1px solid green;n }n[/code]
- Re: woshixuye2小时前
- 回复maoyuanjun201n嗯，把center设一个高度，我修改一下
- 2楼lt594610341昨天 09:15
- 绝对定位那有问题吧，right不和center、left在一行？
- Re: woshixuye昨天 23:38
- 回复lt594610341n是的，三个在一行
- 1楼maoyuanjun201昨天 09:12
- 博主，你那绝对定位有问题吧？DIV是块状元素占一行的，三个DIV就相当于占了三行，应该不可能像你所说那样的，我是这样定义三个DIV的：n[code=html]n<!DOCTYPE html>n<html>n <head>n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">n <title>test</title>n <style>n #left{n postion:absolute;n left:0;n width:200px;n height: 100px;n border: 1px solid red;n }n #center{n margin-left:200px;n margin-right:200px;n width:200px;n height: 100px;n border: 1px solid blue;n }n #right{n postion:absolute;n right:0;n width:200px;n height: 100px;n border: 1px solid green;n }n </style>n </head>n <body>n <div id="left"></div>n <div id="center"></div>n <div id="right"></div>n </body>n</html>n[/code]