原文地址:点击打开链接
一、两栏布局(左边固定宽度,右边自动适应)
方法1、左浮动其中一个DIV,使其脱离文档流,另一个DIV不设置浮动即可。注意:DIV的顺序不能改变
PS:设置浮动可以让元素脱离正常的文档流,使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置,而不能够影响前面的元素,也不能叠加在前面的元素上。 (view类样式只是为了层便于识别);
.view{ height: 200px; background: #ccc;}
#id1{float: left; width: 200px;}
#id2{background: #666; }
<body>
<div class="view" id="id1">侧边栏(float: left; width: 200px;)</div>
<div class="view" id="id2">内容栏(background: red;)</div></body>
方法2、使用绝对定位方法,是固定宽度的DIV固定在左侧,然后设置只适应的层的左边距
.view{ height: 200px; background: #ccc;}
#id2{margin-left: 200px; background: #666;}
#id1{position: absolute; left: 0;top:0; width: 200px;}
<div class="view" id="id2">内容栏要在前面利于SEO(margin-left: 200px; background: red;)</div><div class="view" id="id1">侧边栏:用了绝对定位(position: absolute; left: 0;top:0; width: 200px;)</div>
方法3、增加一个浮动层,设置宽度为100%,包裹中的自适应宽度层设置左边距,然后控制固定宽度的层的负外边距(不兼容IE6)
#warp{float: left;width: 100%}
#id2{margin-left: 200px; background: #666;}
#id1{float: left; margin-left: -100%; width: 200px;}
<div id="warp">
<div class="view" id="id2">
内容栏要在前面利于SEO,添加了一个外层WARP层,用于左浮动,
<br>warp层CSS(float: left;width: 100%)
<br>内容层CSS(margin-left: 200px; background: #666;)
</div></div><div class="view" id="id1">侧边栏:使用负外边距离(float: left; margin-left: -100%; width: 200px;)</div>
还有一种兼容IE6的
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>博客园</title></head><body><style>
.main{float:right;width:100%;margin-left:-220px;}
.content{margin-left:220px;}
.side{float:left;width:200px;}</style><div style="margin:auto;width: 1000px;overflow:hidden; clear:both">
<div class="main" style="background:#ccc">
<div class="content">主栏1内容区内容区内容区内容区内容区内容区</div>
</div>
<div class="side" style="background:#666">容区内容区内容区内容区内容区内容区内</div></div><br /><div style="float:left; width:300px; background:red">dkafjlsdkjfkladf</div><div style="float:left; width:300px; background:green">dkafjlsdkjfkladf</div></body></html>
二、三栏布局(左右宽度固定,中间自适应宽度)
方法1、设置浮动,使文档脱离文档流,注意层的顺序
.view{ height: 200px; background: #ccc;}
#id1{float:left; width:200px;}
#id2{float:right; width:200px;}
#id3{background:red;}
<body><div class="view" id="id1">1、{float:left; width:200px;}</div><div class="view" id="id2">2、{float:right; width:200px;}</div><div class="view" id="id3">3、{background:red;}</div></body>
方法2、同样通过负边距来实现,缺点是需要另外增加一个层
.view{ height: 200px; background: #ccc;}
.warp{float:left;width:100%;}
#id3{ background:red; margin-left:200px; margin-right:200px;}
#id1{float:left; position:relative; width:200px; margin-left:-100%;}
#id2{float:left; position:relative; width:200px; margin-left:-200px;}
<div class="warp">
<div class="view" id="id3">
外层包裹warpdiv,设置外层warp CSS{float:left;width:100%;}内容放最前面有利于SEO<br>
内层div控制左右两边的距离 #id3{ background:red; margin-left:200px; margin-right:200px;}
</div></div><div class="view" id="id1">左侧边负边距: #id1{float:left; position:relative; width:200px; margin-left:-100%;}</div><div class="view" id="id2">右侧边负边距:#id2{float:left; position:relative; width:200px; margin-left:-200px;}</div>
方法3、也可以通过绝对定位来实现
.view{ height: 200px; background: #ccc;}
#id3{margin-left:200px; margin-right:200px; background:red; min-width:200px;}
#id1{position:absolute; left:0; top:0; width:200px;}
#id2{float:right; width:200px; position:absolute; right:0; top:0;}
<div class="view" id="id3">顺序1、#id3{margin-left:200px; margin-right:200px; background:red;}</div><div class="view" id="id1">顺序2、使用绝对定位 #id1{position:absolute; left:0; top:0; width:200px;}</div><div class="view" id="id2">顺序3、使用绝对定位 #id2{float:right; width:200px; position:absolute; right:0; top:0;}</div>
三、三栏布局(左右自适应,中间宽度固定,这个有点变态,一般没这么布局的)
方法1、增加了多个DIV,负外边距+绝对定位 如下:
*{margin: 0;}
.warp1{float:left; width:50%;_margin-right:-3px;}
.warp2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;}
.view{ height: 200px; background: #ccc;}
#id1{ margin-right:100px;}
#id2{margin-left:100px;}
#id3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;}
<div class="warp1">
<div id="id1" class="view">.warp1{float:left; width:50%;}<br>#id1{ margin-right:100px;}</div></div><div class="warp2">
<div id="id2" class="view"> .warp2{margin-left:50%;}<br>#id2{margin-left:100px;}</div></div><div id="id3" class="view">
#id3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;}</div>
方法2、同样负外边距+绝对定位
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS</title><style type="text/css">
body{padding:0;margin:0;}
div{
height:100%;}
#mid {
z-index:2;
background-color:#eee;
width:500px;
margin-left:-250px;
position:absolute;
top:0;
left:50%; }
#left,#right {
z-index:1;
position:absolute;
top:0;
width:50%;}
#left {
left:0;}
#left .container {
margin-right:250px;
background-color:#bbb;}
#right {
right:0; }
#right .container {
margin-left:250px;
background-color:#bbb;}</style></head><body><div id="mid">
mid 宽度固定 : 500px</div><div id="left">
<div class="container">
left 宽度自适应
</div></div><div id="right">
<div class="container">
right 宽度自适应
</div></div></body></html>
四、关于居中(固定宽度水平居中、不固定宽度的水平居中、垂直居中)
1、固定宽度的水平居中好办,margin:0 auto;或者负外边距都可以实现;
2、不固定宽度的水平居中:通过inline-block属性具有的内联的属性可以通过text-align:center的居中方式
PS:inline-block是内联块元素,它既拥有块元素可以设置宽高的特性,又拥有内联元素可以被父元素text-align:center居中的特性!可以利用inline-block来设置不定宽度的层的水平居中,但是IE6不支持inline-block,所以设置hack.
3、不固定高度的垂直居中:在标准浏览器上利用display:table方法实现,在不支持display:table的浏览器里面通过设置不同的相对位置来实现。
4、不固定高度在已知高度中居中——来自JavaScript丛林QQ群
垂直居中一个元素只需设置display:inline-block; 和 vertical-align:middle; 同时必须有一个参考物宽度为0高度继承父元素100%
注:必须知道父元素的高度
同理:让一个未知大小的元素居中在浏览器也是这个办法(因为父元素宽高100%也是已知)
四种代码如下:
<!DOCTYPE HTML><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{outline:1px solid yellow;}
*{margin: 0;}
/*固定宽度水平居中*/
.warp1{ width:500px; background:#ccc; margin:0 auto;}
.warp2{ width:500px; background:red;position:relative; left:50%; margin-left:-250px; margin-top:20px;}
/*不固定宽度水平居中*/
.warp{width:900px; margin:20px auto 0; background:#666; overflow:hidden; text-align:center;}
.control{display:inline-block; /*_display:inline; 写在一行居然没用,一定要另起一行,IE6变态*/}
.control{_display:inline;}
.warp ul { margin:0;padding:0;float:left; display:inline; }
.warp ul li{float:left;list-style:none; background:#316AC5;color:#fff; width:20px;height:20px; text-align:center; margin-left:5px;}
.warp a{ display:block; color:#fff2e8; text-decoration:none; font-weight:bold;}
/* 垂直居中*/
.valignwarp{ width:500px; height:300px; background:#ccc; margin:20px auto 0; display:table;}
.valign2{display:table-cell; vertical-align:middle; *position:relative; _zoom:1; *top:50%; }
.valign{ background:red; *position:relative; *top:-50%;}
/* 不固定高度在已知高度中垂直居中 */
p{ height:200px;width:800px;border:1px solid #333; margin: 10px auto;}
p b,p span{vertical-align:middle;display:inline-block;}
p b{width:80px;}
p span{ height:100%;width:5px; }
</style></head><body>
<div class="warp1">固定宽度水平居中{ width:500px; background:#ccc; margin:0 auto;}</div><div class="warp2">固定宽度水平居中{ width:500px; background:red;position:relative; left:50%; margin-left:-250px;}</div><div class="warp">
<div class="control">
<ul>
<li><a href="#">不</a></li>
<li><a href="#">固</a></li>
<li><a href="#">定</a></li>
<li><a href="#">宽</a></li>
<li><a href="#">水</a></li>
<li><a href="#">平</a></li>
<li><a href="#">居</a></li>
<li><a href="#">中</a></li>
</ul>
</div></div><div class="valignwarp">
<div class="valign2">
<div class="valign"><a href="#">我要垂直居中<br>我要垂直居中<br>我要垂直居中<br>我要垂直居中<br>我要垂直居中</a></div>
</div></div>
<p class="mt10">
<b>荔荔枝荔枝荔枝荔枝荔枝荔枝枝荔枝</b>
<b>例子2例子2例子2例子2例子2例子2</b>
<span></span></p></body></html>
五、给行内元素设置高度与宽度无效(即带有样式display:inline的元素,包括默认值)
<span style="width:300px; height:300px; background:red;">11111111111111111</span>
跟行内元素设置浮动(float:left or right)后,默认的display值变为block,设置宽度与高度生效,表现的属性是行内块级元素(inline-block),不再占据一整行的位置,后面的行内元素会紧跟后面排列
IE中可以通过ZOOM:1来解决
六、外边距叠加:只有普通文档流中块框的垂直外边距才会发生外边距叠加,行内框、浮动框或者绝对定位框之间的外边距不会叠加(但是行内框设置上下外边距无效)。