网页整体布局完全剖析—剖完你不进来看一下么？

作为前端小白，最基本的就是写网页了（虽然前端现在基本上可包揽全宇宙的事了），排网页更是基本生存技能了。本文总结了几乎所有的网页总体布局。




             



一、单列布局


1.单列固宽

思路：设置div的左右margin为auto

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>1-1-1 布局固定宽度</title>
  6.     <style type="text/css">
  7.         #header,#footer,#content{
  8.             margin:0 auto;
  9.             width:768px;
  10.             margin-top: 10px;
  11.         }
  12.         #header{
  13.             border: 2px solid red;
  14.         }
  15.         #content{
  16.             border: 2px solid blue;
  17.         }
  18.         #footer{
  19.             border: 2px solid green;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div id="header">
  25.         <h2>Page Header</h2>           
  26.         <p>这是一行文本，这里作为样例，显示在布局框中。<br/>
  27.             这是一行文本，这里作为样例，显示在布局框中。 </p>
  28.     </div>
  29.     <div id="content">
  30.             <h2>Page Content</h2>
  31.             <p>
  32.                 这是一行文本，这里作为样例，显示在布局框中。<br />
  33.                 这是一行文本，这里作为样例，显示在布局框中。
  34.             </p>
  35.             <p>
  36.                 这是一行文本，这里作为样例，显示在布局框中。<br />
  37.                 这是一行文本，这里作为样例，显示在布局框中。
  38.             </p>
  39.     </div>
  40.     <div id="footer">    
  41.             <h2>Page Footer</h2>
  42.             <p>
  43.                 这是一行文本，这里作为样例，显示在布局框中。
  44.             </p>
  45.     </div>
  46. </body>
  47. </html>


 2.单列变宽

思路设置宽度为相对宽度，常用百分比

  1. #header,#footer,#content{
  2.         margin:0 auto;
  3.         width:70%;
  4.         margin-top: 10px;
  5.     }


二.两列布局



 

文档结构：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <metacharset="utf-8"/>
  5.     <title>两列布局</title>
  6.     <styletype="text/css">
  7.         #header,#footer,#container{
  8.             margin:0 auto;
  9.             width:768px;
  10.             margin-top: 10px;
  11.         } 
  12.         #header{
  13.             border: 2px solid #f00;
  14.         }
  15.         #container{
  16.             border: 2px solid #797979;
  17.         }
  18.  
  19.         #footer{
  20.             border: 2px solid #080;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <divid="header">
  26.        <h2>Page Header</h2>            
  27.        <p>这是一行文本，这里作为样例，显示在布局框中。<br/>
  28.         这是一行文本，这里作为样例，显示在布局框中。 </p>
  29.     </div>
  30.     <divid="container">
  31.         <divid="content">
  32.             <h2>Page Content</h2>
  33.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</p>
  34.         </div>
  35.         <divid="side">
  36.             <h2>Side Bar</h2>
  37.             <p>
  38.                 对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  39.                 <p>
  40.                     但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
  41.                 </p>
  42.             </div>
  43.         </div>
  44.         <divid="footer">
  45.             <h2>Page Footer</h2>
  46.             <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  47.         </div>
  48.     </body>
  49.     </html>

1.两列固宽


思路一：绝对定位法，使content相对于container绝对定位，脱离文档流，side就会向上移动占据原来content所在的位置，然后将content的宽度和side的左margin设置为相同的值，就正好可以保证它们并列紧挨着放置，且不会相互重叠。

  1. #container{
  2.      position: relative;
  3. }
  4.  
  5.  #content{
  6.             border: 2px solid #00f;
  7.             position: absolute;
  8.             top: 0;
  9.             left: 0;
  10.             width: 500px;
  11.         }
  12.  
  13.         #side{
  14.             border: 2px solid #f90;
  15.             margin: 0 0 0 500px;
  16.         }



使用绝对定位法有一个固有的缺陷：当右边的side比左边的content高时，显示效果不会有问题，但是如果左边的content比右边的side高的话，由于content已经脱离了文档流，对包裹的container这个div的高度不会产生影响，而footer是根据side栏确定的，content栏会遮蔽部分甚至全部footer栏。


思路二：浮动法，将content和side都设置为向左浮动，二者的宽度等于总宽度。

在上面的例子中稍作修改，将container的position属性去掉，添加下面的样式：

  1. #content{       
  2.    float: left;
  3.    width: 500px;
  4.    border: 2px solid#00f;
  5. }
  6.  
  7. #side{
  8.     float: left;
  9.     width: 256px;
  10.     border: 2px solid#f90;
  11.  }



此时footer的位置不太正常。container的边框也被缩成一条线，需要清除浮动对于包裹元素高度的影响。

  1.   #container:after{
  2.            content: ".";
  3.            height: 0;
  4.            display: block;
  5.            visibility: hidden;
  6.            clear: both;
  7. }

这样就显示正常了，使用浮动的好处是并排的两列中无论哪一列内容变长，都不会影响布局。


2.两列变宽


2.1两列等比例变宽

 思路一：同固定宽度的绝对定位，不同的是使用百分比宽度，container等外层宽度相对浏览器窗口，content和side相对于外层div定义宽度。

 首先将重新设置外层div样式：

  1. #header,#footer,#container {
  2.        margin: 0 auto;
  3.       width: 85%;
  4. }

再设置内层div样式

  1. #container {
  2.                 position: relative;
  3.             }
  4.              
  5.             #content {
  6.                 position: absolute;
  7.                 top: 0;
  8.                 left: 0;
  9.                 width: 66%;
  10.                 border: 2px solid #00f;
  11.             }
  12.              
  13.             #side {
  14.                 width: 30%;
  15.                 margin: 0 0 0 67%;
  16.                 border: 2px solid #f90;
  17.             }

 思路二：浮动法

  1. #content {
  2.                 float:left;
  3.                 width: 66%;
  4.                 border: 2px solid #00f;
  5.             }
  6.              
  7.             #side {
  8.                 float: right;
  9.                 width: 30%;
  10.                 border: 2px solid #f90;
  11.             }
  12.  
  13.             #container:after{
  14.             content: ".";
  15.             height: 0;
  16.             display: block;
  17.             visibility: hidden;
  18.             clear: both;
  19.         }




2.2两列单列变宽


 思路一：绝对定位法

  1. #header,
  2.         #footer,
  3.         #container {
  4.             margin: 10px auto;
  5.             width: 85%;
  6.         }
  7.  
  8.         #container {
  9.             position: relative;
  10.         }
  11.  
  12.         #side {
  13.             position: absolute;
  14.             top: 0;right: 0;
  15.             width: 300px;
  16.             border: 2px solid #f90;
  17.         }
  18.  
  19.         #content {
  20.             margin: 0 300px 0 0;
  21.             border: 2px solid #00f;
  22.         }

例子中我们设置side为固定宽度300px,content为变宽，结果如下图所示，由于内容较高的side脱离了文档流，因此撑不起container的高度，所以使用这种方法时要注意保证变宽列的高度是最高的。使固定宽度列绝对定位。


 思路二：浮动法


 对于单列变宽如果像之前一样，直接使用浮动的话：

  1. #content {
  2.                 float:left;
  3.                 border: 2px solid #00f;
  4.             }
  5.              
  6.             #side {
  7.                 float: right;
  8.                 width: 300px;
  9.                 border: 2px solid #f90;
  10.             }
  11.  
  12.             #container:after{
  13.             content: ".";
  14.             height: 0;
  15.             display: block;
  16.             visibility: hidden;
  17.             clear: both;
  18.         }

结果并不是预期的，由于content没有设置宽度，所以浮动过后仍然占据整行side会在下一行浮动。

解决办法是在content外面再套一层div,使它的宽度为100%，也就是container的宽度。然后通过将左侧的margin设置为负的300像素，就使它向左平移了300像素。再将content的左侧margin设置为正的300像素，就实现了100%-300px这个无法表达的宽度。我们称这种方法为“改进的浮动法”。


  1. #contentWrap{
  2.                 margin-left: -300px;
  3.                 float: left;
  4.                 width: 100%;
  5.             }
  6.              
  7.             #content {
  8.                 margin-left: 300px;
  9.                 border: 2px solid #00f;
  10.             }
  11.              
  12.             #side {
  13.                 float: right;
  14.                 width: 290px;
  15.                 border: 2px solid #f90;
  16.  
  17.             }
  18.  
  19.             #container:after{
  20.             content: ".";
  21.             height: 0;
  22.             display: block;
  23.             visibility: hidden;
  24.             clear: both;
  25.         }


 三、三列布局


文档结构：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <metacharset="utf-8"/>
  5.     <title>三列布局</title>
  6.     <styletype="text/css">
  7.         #header,#footer,#container{
  8.             margin:0 auto;
  9.             width:768px;
  10.             margin-top: 10px;
  11.         } 
  12.         #header{
  13.             border: 2px solid #f00;
  14.         }
  15.         #container{
  16.             border: 2px solid #797979;
  17.         }
  18.  
  19.         #footer{
  20.             border: 2px solid #080;
  21.         }
  22.  
  23.     </style>
  24. </head>
  25. <body>
  26.     <divid="header">
  27.         <h2>Page Header</h2>            
  28.          <p>这是一行文本，这里作为样例，显示在布局框中。<br/>
  29.         这是一行文本，这里作为样例，显示在布局框中。</p>
  30.     </div>
  31.     <divid="container">
  32.         <divid="navi">
  33.             <h2>Navi Bar 1</h2>
  34.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  35.         </div>
  36.         <divid="content">
  37.             <h2>Page Content</h2>
  38.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</p>
  39.         </div>
  40.         <divid="side">
  41.             <h2>Side Bar</h2>
  42.             <p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  43.             <p>但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
  44.         </div>
  45.     </div>
  46.     <divid="footer">
  47.         <h2>Page Footer</h2>
  48.         <p>这是一行文本，这里作为样例，显示在布局框中。</p>
  49.     </div>
  50. </body>
  51. </html>


1、三列固定宽度布局

 思路一：绝对对位法，原理同两列布局，只不过需要设置content的左右margin

  1. container{
  2.             position:relative;
  3.         }
  4.  
  5.         #navi{
  6.             position:absolute;
  7.             top:0;
  8.             left:0;
  9.             width:200px;
  10.             border: 2px solid #900; 
  11.         }
  12.  
  13.  
  14.         #content{
  15.             margin:0 200px 0 200px;
  16.             width:360px;
  17.             border: 2px solid #00f; 
  18.         }
  19.  
  20.         #content img{
  21.             float:right;
  22.         }
  23.  
  24.         #side{
  25.             position:absolute;
  26.             top:0;
  27.             right:0;
  28.             width:200px;
  29.             border: 2px solid #f90; 
  30.         }



 思路二：浮动法，原理同两列布局

  1. #navi{
  2.            float: left;
  3.            width: 200px;
  4.            border: 2px solid #900;
  5.        }
  6.  
  7.        #content{
  8.            float: left;
  9.            width: 360px;
  10.            border: 2px solid #00f;
  11.        }
  12.  
  13.        #side{
  14.            float: left;
  15.            width: 196px;//为了避免边框宽度对浮动布局产生影响，将宽度减小了一点
  16.            border: 2px solid #f90;
  17.        }
  18.  
  19.        #container:after{
  20.            content: ".";
  21.            height: 0;
  22.            display: block;
  23.            visibility: hidden;
  24.            clear: both;
  25.        }

2.三列变宽布局

2.1三列等比例变宽布局

三列等比例伸缩适应总宽度，与前面介绍的两列等宽度思想一样，只要分配好每一列的百分比就可以了。这里就直接贴出代码了

 思路一：浮动法

  1. #header,#footer,#container{
            margin:0 auto;
            width:85%;
            margin-top: 10px;
        }         

  3. #navi{
  4.             float: left;
  5.             width: 20%;
  6.             border: 2px solid #900;
  7.         }
  9.         #content{
  10.             float: left;
  11.             width: 60%;
  12.             border: 2px solid #00f;
  13.         }
  15.         #side{
  16.             float: left;
  17.             width: 15%;
  18.             border: 2px solid #f90;
  19.         }
  21.         #container:after{
  22.             content: ".";
  23.             height: 0;
  24.             display: block;
  25.             visibility: hidden;
  26.             clear: both;
  27.         }
思路二：绝对定位
  1. #header,#footer,#container{
            margin:0 auto;
            width:85%;
            margin-top: 10px;
        } 


  4.  #container{
  5.         	position: relative;
  6.         }
  8.         #navi{
  9.         	position: absolute;
  10.             left: 0;
  11.             top: 0;
  12.             width: 20%;
  13.             border: 2px solid #900;
  14.         }
  16.         #content{
  17.             width: 60%;
  18.             margin: 0 15% 0 20%;
  19.             border: 2px solid #00f;
  20.         }
  22.         #side{
  23.         	position: absolute;
  24.             right: 0;
  25.             top: 0;
  26.             width: 15%;
  27.             border: 2px solid #f90;
  28.         }
同样绝对定位要保证中间的内容栏要有足够的高度撑起container，使footer位于正确位置。

2.2 单列固定，另两列变宽

2.2.1 单侧列固定

绝对定位的方法这里就不介绍了，根据前面介绍的两列单列变宽布局中提到的改进的浮动法，我们很容易想到把左边的navi和content当做一个整体加上一层包裹div，side为固定宽度200px

这样做能不能达到预期的效果呢，答案是否定的，当warp容器中有两个浮动的活动列时，就需要分别设置宽度，假设宽度分别为40%和60%（为了避免边框宽度等造成的影响，实际可以使加起来略小于100%，在下面的例子中，我们使用CSS3中新的box-sizing属性可以避免边框的影响）。当时注意到这里的wrap的宽度等于container的宽度，因此这里的40%并不是总宽度减去side的宽度以后的40%，而是总宽度的40%，这显然是不对的

解决的方法是在里面再套一层div.

 

新增加的innerWrap是以标准流方式存在的，宽度会自然伸展，给其设置200像素的左margin,因此它的宽度就是总宽度减去200px,这样里面的navi和content就会都以这个新宽度为宽度基准。


  1.  <style type="text/css">
  2.     div{
  3.         box-sizing: border-box;//这里通过css3新属性改变盒模型，从而避免边框的影响
  4.     }
  5.         #header,#footer,#container{
  6.             margin:0 auto;
  7.             width:85%;
  8.             margin-top: 10px;
  9.         } 
  10.         #header{
  11.             border: 2px solid #f00;
  12.         }
  13.         #container{
  14.             border: 2px solid #797979;
  15.         }
  17.         #footer{
  18.             border: 2px solid #080;
  19.         }
  21.         #outerWrap{
  22.             float: left;
  23.             width: 100%;
  24.             margin-left: -200px;
  25.         }
  27.         #innerWrap{
  28.             margin-left: 200px;
  29.         }
  31.         #navi{
  32.             float: left;
  33.             width: 40%;
  34.             border: 2px solid #900;
  35.         }
  37.         #content{
  38.             float: right;
  39.             width: 60%;
  40.             border: 2px solid #00f;
  41.         }
  43.         #side{
  44.             float: right;
  45.             width: 200px;
  46.             border: 2px solid #f90;
  47.         }
  49.         #container:after{
  50.             content: ".";
  51.             height: 0;
  52.             display: block;
  53.             visibility: hidden;
  54.             clear: both;
  55.         }
  57.     </style>


 
 2.2.2 中间列固定，两侧变宽
假设现在希望中间列固定宽度300px,两边列等宽（不等宽也同理）,此时制作的关键是实现(100%-300px)/2的宽度。根据前面使用改进浮动法和负的margin的经验，我们可以在navi和side两个div外面分别套一层div.

 

  1. <style type="text/css">
  2.     div{
  3.         box-sizing: border-box;
  4.     }
  5.         #header,#footer,#container{
  6.             margin:0 auto;
  7.             width:85%;
  8.             margin-top: 10px;
  9.         } 
  10.         #header{
  11.             border: 2px solid #f00;
  12.         }
  13.         #container{
  14.             border: 2px solid #797979;
  15.         }
  17.         #footer{
  18.             border: 2px solid #080;
  19.         }
  21.         #naviWrap{
  22.             float: left;
  23.             width: 50%;
  24.             margin-left: -150px;
  25.         }
  27.         #sideWrap{
  28.             float: right;
  29.             width: 50%;
  30.             margin-right: -150px;
  31.         }
  33.         #navi{
  34.             margin-left: 150px;
  35.             border: 2px solid #900;
  36.         }
  38.         #content{
  39.             float: left;
  40.             width: 300px;
  41.             border: 2px solid #00f;
  42.         }
  44.         #side{
  45.             margin-right: 150px;
  46.             border: 2px solid #f90;
  47.         }
  49.         #container:after{
  50.             content: ".";
  51.             height: 0;
  52.             display: block;
  53.             visibility: hidden;
  54.             clear: both;
  55.         }
  57.     </style>

 将左侧的naviWrap设置为50%宽度，向左浮动，并通过将左侧的margin设置为-150像素，向左平移150像素。然后在里面的navi中，则侧margin设置为150像素，补偿回来这150像素。右侧同理。

 2.3单列变宽，另两列固定


 2.3.1两侧列固定，中间列变宽
思路一：绝对定位法
  1.  <style type="text/css">
  2.         #header,#footer,#container{
  3.             margin:0 auto;
  4.             width:85%;
  5.             margin-top: 10px;
  6.         } 
  7.         #header{
  8.             border: 2px solid #f00;
  9.         }
  10.         #container{
  11.             border: 2px solid #797979;
  12.         }
  14.         #footer{
  15.             border: 2px solid #080;
  16.         }
  19.         #container{
  20.         	position: relative;
  21.         }
  23.         #navi{
  24.         	position: absolute;
  25.             left: 0;
  26.             top: 0;
  27.             width: 150px;
  28.             border: 2px solid #900;
  29.         }
  31.         #side{
  32.             position: absolute;
  33.             right: 0;
  34.             top: 0;
  35.             width: 250px;
  36.             border: 2px solid #f90;
  37.         }
  39.         #content{
  40.             margin: 0 250px 0 150px;
  41.             border: 2px solid #00f;
  42.         }
  44.         
  45.     </style>
将把container的 position属性设置为relative, 使它成为它的下级元索的绝对定位基准，然后将两边列设置固定宽度并分别靠在最左和最右端 ，content仍然在标准流中 ，将它的右 margin 设置为两 个绝对定位列的宽度 ，正好让出它们的位置 ，这样就实现 三者的并列放置。当然 ，这种方法制作的三列布局无法避免“绝对定位”造成的固有缺陷 ，即页脚永远紧贴中间的content列 ，而不管左右两侧列的高度. 如果中间列的高度小于两侧列中的一个或两个时，会造成重叠的现象。
思路二：浮动法（参考《CSS设计指南（第三版）》）
实现三栏布局且让中栏内容区流动（不固定）的核心问题，就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。Web 开发人员 Ryan Brill 给出的解决方案是控制两个外包装（通过 ID 值为 wrap）容器的外边距。其中一个外包装包围所有三栏，另一个外包装只包围左栏和中栏。
 

  1.  <style type="text/css">
  2.     div{
  3.         box-sizing: border-box;
  4.     }
  5.         #header,#footer,#container{
  6.             margin:0 auto;
  7.             width:85%;
  8.             margin-top: 10px;
  9.         } 
  10.         #header{
  11.             border: 2px solid #f00;
  12.         }
  13.         #container{
  14.             border: 2px solid #797979;
  15.         }
  17.         #footer{
  18.             border: 2px solid #080;
  19.         }
  20.         #wrap{
  21.             float: left;
  22.             width: 100%;
  23.             margin-right: -250px;/*把右栏拉到区块外边距腾出的位置上*/
  24.         }
  26.         #navi{
  27.             float: left;
  28.             width: 150px;
  29.             border: 2px solid #900;
  30.         }
  32.         #content{
  33.             width: auto;
  34.             margin-left: 150px;
  35.             margin-right: 250px;/*在流动居中的栏右侧腾出空间 */
  36.             border: 2px solid #00f;
  37.         }
  39.         #side{
  40.             float: left;
  41.             width: 250px;
  42.             border: 2px solid #f90;
  43.         }
  45.         #footer{
  46.             clear: both;
  47.         }
  49.     </style>
下面简单说明其原理。三栏中的右栏是 250像素宽。因为wrap的宽度为100%，所以side栏默认会在下一行显示，给wrap包装上250像素的负右外边距,这会影响wrap与相邻块side的距离，使side栏再次进入上一行并覆盖了wrap右侧的部分空间，这时我们给content右侧加上正的margin为250像素，使其不被side栏覆盖，左侧加上150像素，腾出空间给navi.(甚是巧妙，不好懂)。
2.3.2.中列和侧列宽度固定，另外一个侧列变宽
思路一：绝对定位法
  1. <style type="text/css">
  2.         #header,#footer,#container{
  3.             margin:0 auto;
  4.             width:85%;
  5.             margin-top: 10px;
  6.         } 
  7.         #header{
  8.             border: 2px solid #f00;
  9.         }
  10.         #container{
  11.             border: 2px solid #797979;
  12.         }
  14.         #footer{
  15.             border: 2px solid #080;
  16.         }
  19.         #container{
  20.         	position: relative;
  21.         }
  23.         #navi{
  24.         	position: absolute;
  25.             left: 0;
  26.             top: 0;
  27.             width: 150px;
  28.             border: 2px solid #900;
  29.         }
  31.         #content{
  32.             position: absolute;
  33.             left: 150px;
  34.             top: 0px;
  35.             width: 250px;
  36.             border: 2px solid #00f;
  37.         }
  40.         #side{
  41.             margin: 0 0 0 400px;
  42.             border: 2px solid #f90;
  43.         }
  45.       
  46.         
  47.     </style>

思路二：改进浮动法

假设仍然希望左侧的navi和content列的宽度分别固定为150px和250px,右侧的side列变宽。那么side列的宽度等于100%-150px-250px。因此根据改进的浮动法，在side列的外面再套一个sideWrap列，使sideWrap的宽度为100%，并通过设置负的margin,使它向右平移400像素，然后再对side列设置正的margin,限制右边界。

 
  1.  <style type="text/css">
  2.     div{
  3.         box-sizing: border-box;
  4.     }
  5.         #header,#footer,#container{
  6.             margin:0 auto;
  7.             width:85%;
  8.             margin-top: 10px;
  9.         } 
  10.         #header{
  11.             border: 2px solid #f00;
  12.         }
  13.         #container{
  14.             border: 2px solid #797979;
  15.         }
  17.         #footer{
  18.             border: 2px solid #080;
  19.         }
  20.         #sideWrap{
  21.             float: right;
  22.             width: 100%;
  23.             margin-right: -400px;
  24.          
  25.         }
  27.         #navi{
  28.             float: left;
  29.             width: 150px;
  30.             border: 2px solid #900;
  31.         }
  33.         #content{
  34.             float: left;
  35.             width: 250px;
  36.             border: 2px solid #00f;
  37.         }
  39.         #side{
  40.             margin-right: 400px;
  41.             border: 2px solid #f90;
  42.         }
  44.       
  45.         #container:after{
  46.             content: ".";
  47.             height: 0;
  48.             display: block;
  49.             visibility: hidden;
  50.             clear: both;
  51.         }
  53.     </style>
总结：每一种布局不一定只有一种实现方式，尤其是css3的伸缩盒出现以后，实现起来更是多种多样，由于篇幅原因，这里只介绍了几种通用的方法。



参考：
《CSS设计彻底研究》-温谦
《CSS设计指南》—Charles Wyke-Smith






posted @ 2016-07-12 22:11  FeMiner  阅读(1751)  评论(0)  编辑  收藏  举报