01 DIV+CSS 固定页面布局

本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。

DIV+CSS布局中主要CSS属性介绍：

Float:

       Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道

标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Margin:

       Margin属性用于设置两个元素之间的距离。

Padding:

       Padding属性用于设置一个元素的边框与其内容的距离。

Clear:

       使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：

代码：

"-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
"http://www.w3.org/1999/xhtml" >

"Content-Type"  content= "text/html; charset=utf-8"  />
DIV+CSS布局教程
<code class="java string">"text/css"</code> <code class="java plain">></code> </div> <div class="line number7 index6 alt2"> <code class="java plain">#Container{</code> </div> <div class="line number8 index7 alt1"> <code class="java spaces">    </code> <code class="java plain">width:1000px;</code> </div> <div class="line number9 index8 alt2"> <code class="java spaces">    </code> <code class="java plain">margin:</code> <code class="java value">0</code>  <code class="java plain">auto;</code> <code class="java comments">/*设置整个容器在浏览器中水平居中*/</code> </div> <div class="line number10 index9 alt1"> <code class="java spaces">    </code> <code class="java comments">background:#CF3;</code> </div> <div class="line number11 index10 alt2"> <code class="java comments">}</code> </div> <div class="line number12 index11 alt1"> <code class="java comments">#Header{</code> </div> <div class="line number13 index12 alt2"> <code class="java spaces">    </code> <code class="java comments">height:80px;</code> </div> <div class="line number14 index13 alt1"> <code class="java spaces">    </code> <code class="java comments">background:#093;</code> </div> <div class="line number15 index14 alt2"> <code class="java comments">}</code> </div> <div class="line number16 index15 alt1"> <code class="java comments">#logo{</code> </div> <div class="line number17 index16 alt2"> <code class="java spaces">    </code> <code class="java comments">padding-left:50px;</code> </div> <div class="line number18 index17 alt1"> <code class="java spaces">    </code> <code class="java comments">padding-top:20px;</code> </div> <div class="line number19 index18 alt2"> <code class="java spaces">    </code> <code class="java comments">padding-bottom:50px;</code> </div> <div class="line number20 index19 alt1"> <code class="java comments">}</code> </div> <div class="line number21 index20 alt2"> <code class="java comments">#Content{</code> </div> <div class="line number22 index21 alt1"> <code class="java spaces">    </code> <code class="java comments">height:600px;</code> </div> <div class="line number23 index22 alt2"> <code class="java spaces">    </code> <code class="java comments">/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/</code> </div> <div class="line number24 index23 alt1"> <code class="java spaces">    </code> <code class="java comments">margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/</code> </div> <div class="line number25 index24 alt2"> <code class="java spaces">    </code> <code class="java comments">background:#0FF;</code> </div> <div class="line number26 index25 alt1"> <code class="java spaces">    </code>  </div> <div class="line number27 index26 alt2"> <code class="java comments">}</code> </div> <div class="line number28 index27 alt1"> <code class="java comments">#Content-Left{</code> </div> <div class="line number29 index28 alt2"> <code class="java spaces">    </code> <code class="java comments">height:400px;</code> </div> <div class="line number30 index29 alt1"> <code class="java spaces">    </code> <code class="java comments">width:200px;</code> </div> <div class="line number31 index30 alt2"> <code class="java spaces">    </code> <code class="java comments">margin:20px;/*设置元素跟其他元素的距离为20像素*/</code> </div> <div class="line number32 index31 alt1"> <code class="java spaces">    </code> <code class="java comments">float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/</code> </div> <div class="line number33 index32 alt2"> <code class="java spaces">    </code> <code class="java comments">background:#90C;</code> </div> <div class="line number34 index33 alt1"> <code class="java comments">}</code> </div> <div class="line number35 index34 alt2"> <code class="java comments">#Content-Main{</code> </div> <div class="line number36 index35 alt1"> <code class="java spaces">    </code> <code class="java comments">height:400px;</code> </div> <div class="line number37 index36 alt2"> <code class="java spaces">    </code> <code class="java comments">width:720px;</code> </div> <div class="line number38 index37 alt1"> <code class="java spaces">    </code> <code class="java comments">margin:20px;/*设置元素跟其他元素的距离为20像素*/</code> </div> <div class="line number39 index38 alt2"> <code class="java spaces">    </code> <code class="java comments">float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/</code> </div> <div class="line number40 index39 alt1"> <code class="java spaces">    </code> <code class="java comments">background:#90C;</code> </div> <div class="line number41 index40 alt2"> <code class="java comments">}</code> </div> <div class="line number42 index41 alt1"> <code class="java comments">/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/</code> </div> <div class="line number43 index42 alt2"> <code class="java plain">#Footer{</code> </div> <div class="line number44 index43 alt1"> <code class="java spaces">    </code> <code class="java plain">height:40px;</code> </div> <div class="line number45 index44 alt2"> <code class="java spaces">    </code> <code class="java plain">background:#90C;</code> </div> <div class="line number46 index45 alt1"> <code class="java spaces">    </code> <code class="java plain">margin-top:20px;</code> </div> <div class="line number47 index46 alt2"> <code class="java plain">}</code> </div> <div class="line number48 index47 alt1"> <code class="java plain">.Clear{</code> </div> <div class="line number49 index48 alt2"> <code class="java spaces">    </code> <code class="java plain">clear:both;</code> </div> <div class="line number50 index49 alt1"> <code class="java plain">}</code> </div> <div class="line number51 index50 alt2"> <code class="java plain">



"Container" >      "Header" >          "logo" >这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。           "Content" >          "Content-Left" >Content-Left          "Content-Main" >Content-Main           class = "Clear" >      "Footer" >Footer
    "Header" >          "logo" >这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。
        "logo" >这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。

    "Content" >          "Content-Left" >Content-Left          "Content-Main" >Content-Main
        "Content-Left" >Content-Left
        "Content-Main" >Content-Main

    class = "Clear" >
    "Footer" >Footer

注解：Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0 auto;控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。

本文只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请自行百度解决，解决的多了经验就积累起来了。

转载于:https://www.cnblogs.com/onlyonely/p/3618562.html