【牛腩】div+css模型

    牛腩学习了好长时间，但是对于一些东西感觉模模糊糊的不是很明白，一些知识很破碎，对于div+css的理解是在敲牛腩并且查阅资料的过程中逐渐去理解的。

一、div+css是什么（定义）

     DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，因为HTML网站设计标准中，不适用表格（table）定位技术，而是采用DIV+CSS的方式实现各种定位，使用HTML对网站进行标准化重构。用DIV盒模型结构给各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。也就是说用div搭建网站框架，用css进行网站的具体属性大小、样式设计和美化。

     DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

    CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。使用CSS将表现与内容分离，便于网站维护，简化Html页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。

    当然不是所有的网页都需要用DIV布局，例如数据页面、报表之类的页面的时候还是会用Table，Web标准里并没有说要摒弃Table。所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会眼中影响代码的可阅读性。活用HTML为我们提供的标签吧。

二 、为什么要使用div+css

    我们知道进行网页设计的两种方法，一种是表格（table），一种是div+css，他们都是页面布局的方式，那么为什么我们要使用div+css的这种方式，它有什么好处呢？

1.代码简介

div的结构比table简单，能给页面减肥。至于table，需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，而div只需<div>一个标签。精简了页面，增强维护性。

2.扩展性

扩展差表现在维护和修正上面。DIV不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。而Table则需要一个页面一个页面的更改需要变动的地方。

3.可读性

可读性table基本上是没有的，里面的代码全部是<table><tr><td></td></tr></table>，不能看出哪里是标题哪里是正文。还一个障碍便是当table容器内内容过多时，使页面的加载时间增加，因为浏览器首先要加载<table> 标签，而在加载到</table>之前，table里的内容不会显示。div+css用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效的搜索到你的网页内容，对于一个大型网站来说，div+css可以节省大量的宽带。

    由以上这些我们知道总体来说它的优点是：

1.大大缩减页面代码，提高页面浏览速度。

2.结构清晰，可读性非常强。

3.缩短改版时间。更利于后期的维护和改版。

4.表现和内容相分离，这点非常符合w3c标准。

     当然它也有一些缺点，这个我们在看视频的时候也有一些体会，它有些地方的兼容性可能不同，不同浏览器会有不同的显示。总体

来说使用div+css设计时大势所趋，现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS框

架模式。

三、div+css实现整体布局

    上一篇博客已经介绍了css 盒子模型，下面说一下整体布局的一些内容，它的基本思想也是基于盒子模型。

    首先看下面这一张图片，它是网页整体布局的一个轮廓，它的顶部一般是网站的标题或是图片的内容，牛腩新闻发布系统的图标就是在这个位置。主体部分是网站的内容所在，像新闻的分类和内容等一些东西是在这里的。底部就是放网站简介或是版权的一些信息，都是一些链接。

    我们来看一下它的代码

    HTML代码部分：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> <div id="container">            <div id="header">顶部（header）</div>            <div id="main">主体部分（main）</div>            <div id="footer">底部（footer）</div>    </div></span>

     css代码部分：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> /*主面板样式*/    #container {         width:980px;         margin:0px auto;/*主面板DIV居中*/    }   /*顶部面板样式*/    #header {        width:100%;        height:150px;        border:1px #F00 solid;    }    /*中间部分面板样式*/    #main {        width:100%;        height:400px;        border:1px #F00 solid;    }     /*底部面板样式*/    #footer {        width:100%;        height:100px;        border:1px #F00 solid;    }</span>

    这样网站的上中下三个部分的大致范围就设计好了，那如果我们的中间的主体部分不可能就一项内容，我们想让让几个板块竖排显示或是并排显示怎么办

     竖排显示：

         

   HTML代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> <div id="first">第1块div</div>        <div id="second">第2块div</div>        <div id="third">第3块div</div></span>

   css代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> #first, #second, #third{                width:100px;                height:50px;                border:1px #333 solid;                margin:5px;        }</span>

   横排显示，只要在css中加上float属性即可：

<span style="font-family:KaiTi_GB2312;font-size:18px;">float:left;</span>

   通过看牛腩还学习到很多其他的代码，比如文字链接，鼠标移到上面变色，一些颜色和图片设置等等。

四、总结

    现在对于div+css的理解只有这些，通过总结看了一下敲过的代码总还是清晰了好多，但是还是不熟悉，只是在牛腩中用了一些，还很少，在以后做项目或是继续学习中理解会更加深刻的。