学习过css基础后，就可以用一些css的进阶知识，方便对css技术加强掌握。

一、容器标记

常用的容器标记主要有<div>和<span>标记，那么他们有什么异同点呢？

相同点：都是容器，都可以装载一些html元素，从而形成对立的对象。

不同点：<div>相当于块级别的容器，<span>相当于行级别的容器。

         在<div>中的元素可以换行，在<span>中不可以换行

        <div>可以包含<span>，<span>无法包含<div>

二、盒子模型

在网页布局中，常用的css样式，通过设置边框、距离等参数，使得网页类似于盒子布局。

一个盒子，由content(内容)、border(边框)、padding(间隙)、margin(间隔)四个部分组成。

三、元素定位

位于网页中的每个元素都要有自己的定位，也就是自己的位置。一般可以通过float、position、z-index来定位。

float：可以设置float为left、right、none等值，使得元素向左、右等方向浮动。

position：相对于父块的位置、相对于本事应该在的位置。它的属性有static、absolute、relative、fixed。其中static为默认值。

z-index：空间定位。

四、DOM模型

DOM是Document Object Module的简称，译为：文档对象模型。它定义了用户操作文档对象的接口。

(1)DOM节点

DOM节点分为四类，分别是元素节点(类似于head、body、meta、h2、p、li等)

文本节点，位于元素节点的最里面。

属性节点，用来设计元素、文本的节点。

(2)使用DOM

a.访问节点：getElementsByTagName() 和 getElementById()

b.简称节点类型: documnet.nodeType. 1:元素节点,2:属性节点,3:文本节点

c.利用父子兄弟关系查找节点：利用hasChildNodes()方法和childNodes属性获取该节点包含的所有子节点。

通过parentNode获取父节点

通过nextSibing和previousSibling属性访问兄弟节点，即前后节点，仅对IE有效。

d.设置节点属性

通过getAttribute()和setAttribute()方法查询和设置节点属性。

e.创建和添加节点

创建节点: createElement()

创建文本节点：createTextNode()

追加节点：appendChild()

f.删除节点

通常先找到改节点的父节点，然后通过父节点的removeChild()将节点删除。

g.替换节点

通过先找到需要替换节点的父节点，然后通过replaceChild()方法完成。

h.插入节点

节点前插入：insertBefore()

节点后插入:appendChilde()