当使用 CSS-P 的时候， 主要把它用在 DIV（division）tag 上。当把文察颂字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样：

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和不使用是一样的。

但当把 CSS-P 用到 DIV 中去以后，就可以严格设定它的位置。首先需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说给这个 DIV 的名字是 truck。给名字的目的是以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

Inline CSS：Inline是最常用的方法。

ExternalSTYLE tag：使用 External 方法的结果是一样的。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。

扩展资料

布局优势

一、精简代码，减少重构难度。

网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任败搏郑意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二、网页访问速度

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

三、SEO优化

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

四、浏览器兼容性

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

最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。

DIV是什么

1、Div 全称 division 意为“区分”，是HTML中的一个标签。你在HTML中可以理解为就是一个层。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 。 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用

2、DIV 和层有什么区别 ？
其实DIV是一个块的概念,是一个容器,里面可以容纳各种HTML元素,并将它们做为一个整体来进行处理。
MSDN里说的“DIV Specifies a container that renders HTML.”

比如可以对它们整体进行在页面上的定位或者定义层等等处理。

*
下面的是我找到的一个自己认为很好的文章，也贴上来，希望能帮助你理解！

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

DIV和SPAN
很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性上相同，但是SPAN是用来定义内嵌内容而不是大块内容的。你可以对段落使用DIV标签，但是SPAN对于为段落内的一个或者多个字赋予特殊的特性很有用。

DIV标签允许你分割一个Web页面，以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用，用以分割页面的内容，并显示你所选择的内容。下面这段示例代码使用了DIV标签将该页面分割成了多个区穗配稿域；超链接会显示和隐藏这些区域：

function setAllVisible() {
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
}

Builder.com Sample

• <a href="#"
  onClick='
  document.getElementById("section1").style.visibility="visible";
  document.getElementById("section2").style.visibility="hidden";
  document.getElementById("section3").style.visibility="hidden";
  document.getElementById("section4").style.visibility="hidden";'>Section 1
• <a href="#"
  onClick='
  document.getElementById("section1").style.visibility="hidden";
  document.getElementById("section2").style.visibility="visible";
  document.getElementById("section3").style.visibility="hidden";
  document.getElementById("section4").style.visibility="hidden";'>Section 2
• <a href="#"
  onClick='
  document.getElementById("section1").style.visibility="hidden";
  document.getElementById("section2").style.visibility="hidden";
  document.getElementById("section3").style.visibility="visible";
  document.getElementById("section4").style.visibility="hidden";'>Section 3
• <a href="#"
  onClick='
  document.getElementById("section1").style.visibility="hidden";
  document.getElementById("section2").style.visibility="hidden";
  document.getElementById("section3").style.visibility="hidden";
  document.getElementById("section4").style.visibility="visible";'>Section 4