系统总结了一下CSS布局方面的知识

一、两栏布局（左边固定宽度，右边自动适应）

方法1、左浮动其中一个DIV，使其脱离文档流，另一个DIV，设置左外边距等于固定DIV的宽度。注意：DIV的顺序不能改变

PS：设置浮动可以让元素脱离正常的文档流，使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置，而不能够影响前面的元素，也不能叠加在前面的元素上。 （view类样式只是为了层便于识别）

.view{ height: 200px; background: #ccc;}
#id1{float: left; width: 200px;}
#id2{margin-left: 200px;background: #666; }
<body>
    <div class="view" id="id1">侧边栏(float: left;  200px;)</div>
    <div class="view" id="id2">内容栏(margin-left: 200px; 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;  200px;)</div>

方法3、增加一个浮动层，设置宽度为100%，包裹中的自适应宽度层设置左边距，然后控制固定宽度的层的负外边距

#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; 100%)
        <br>内容层CSS(margin-left: 200px; background: #666;)
    </div>
</div>
<div class="view" id="id1">侧边栏:使用负外边距离(float: left; margin-left: -100%;  200px;)</div>
复制代码

二、三栏布局（左右宽度固定，中间自适应宽度）

方法1、设置浮动，使文档脱离文档流，注意层的顺序

.view{ height: 200px; background: #ccc;}
#id1{float:left; width:200px;}
#id2{float:right; width:200px;}
#id3{margin-left:200px; margin-right:200px; background:red;}
复制代码
<body>
<div class="view" id="id1">1、{float:left; 200px;}</div>
<div class="view" id="id2">2、{float:right; 200px;}</div>
<div class="view" id="id3">3、{margin-left:200px; margin-right:200px; 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;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; 200px; margin-left:-100%;}</div>
<div class="view" id="id2">右侧边负边距：#id2{float:left; position:relative; 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; 200px;}</div>
<div class="view" id="id2">顺序3、使用绝对定位 #id2{float:right; 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; 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;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的浏览器里面通过设置不同的相对

位置来实现，三种代码如下：

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; 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%;}
    </style>
</head>
<body>
<div class="warp1">固定宽度水平居中{ 500px; background:#ccc; margin:0 auto;}</div>
<div class="warp2">固定宽度水平居中{ 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>

</body>
</html>
复制代码

五、给行内元素设置高度与宽度无效（即带有样式display:inline的元素，包括默认值）

<span style="300px; height:300px; background:red;">11111111111111111</span>

跟行内元素设置浮动（float:left or right）后，默认的display值变为block，设置宽度与高度生效，表现的属性是行内块级元素(inline-block)，不再占据一整行的位置，后面的行内元素会紧跟后面排列

IE中可以通过ZOOM:1来解决

如果有更好的布局方式，欢迎留言探讨。

转载请注明出处：http://www.cnblogs.com/NNUF/

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhouwenwu/p/2603411.html