DIV+CSS

简介：

DIV是层叠样式表中的定位技术，全称DIVision，即为划分，有时可以称其为图层。 DIV元素是用来为HTML（超文本标记语言）文档内大块（block-level）的内容提供结构和背景的元素。

一、定义

<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

注：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

二、标签

<div>内容</div>
<div class="divcss5">内容</div>
<div id="divcss5">内容</div>

三、用法

<div> 是一个块级元素，且必须成对使用。实际上，换行是 <div> 固有的特定的格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。可以对同一个 <div> 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。

四、属性

标准属性：如颜色、字体、大小、对齐等；

事件属性：如单击、双击、鼠标按下、鼠标抬起、鼠标移动、键盘按下、键盘抬起等(是不是很熟悉)；

全局属性：id、class、style等；

可选属性：align。

五、DIV+CSS优势

1.代码精简，减少重构难度

网站使用DIV+CSS布局使代码很是精简，相信大家也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。如果不使用DIV+CSS，比如一个大型门户网站(百度、谷歌、新浪等)，就需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

2.提高网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

3.SEO优化

采用div-css布局的网站对于SEO(搜索引擎优化)很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

4.浏览器兼容性

若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。

最后，需要注意的是，蜘蛛(网络爬虫)也不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。