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

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




                 



    一、单列布局


    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.             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.             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;
            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;
            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
  • 相关阅读:
    NOIP2017 时间复杂度 大模拟
    【Python】CV2的一些基本操作
    【Python】类、对象、self
    【Ubuntu18.04】清空回收站
    小飞机可以解决git clone没有返回的问题吗？
    sqlserver2005 远程服务器数据 完全拷贝 到本地数据库
    Microsoft Visual Studio 2005 多线程时 解决不是该线程创建的来访问
    MS SqL2000 数据库置疑状态的解决方法[转]
    vue 函数配置项watch以及函数 $watch 源码分享
    Vue生命周期之beforeCreate vue 生命周期详解
  • 原文地址：https://www.cnblogs.com/star91/p/5665090.html
Copyright © 2020-2023  润新知