十，高级Web建设：div与span

1，创建逻辑区有助于标识主内容区以及页面的页眉和页脚。可以使用<div>元素将需要共同样式的元素归组在一起，放在逻辑区中。

2，使用嵌套<div>元素为文件增加更多结构，这有利于保证结构清晰或者方便增加样式。不过除非确实需要，否则不要过多地增加结构。

3，一旦用<div>元素将内容区归组在一起，类似于其他块元素，可以对这些<div>增加样式。例如，对于包含在<div>中的一组元素，可以使用嵌入这些元素的<div>的边框属性，对这组元素增加一个边框。

4，width属性只设置一个元素内容区的宽度。

5，一个元素的总宽度是内容区宽度，加上所增加的内边距、边框和外边距的宽度。一旦设置一个元素的宽度，它不会延伸来占满浏览器窗口的整个宽度。

6，text-align是块元素的一个属性(只能在块元素上设置)，用来将这个块元素中的所有内联内容对齐，可以居中，左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。

7，可以使用子孙选择器来选择嵌套在其他元素中的元素。例如，子孙选择器div h2 {...}会选择嵌套在<div>元素中的所有<h2>（包括子元素、孙子元素）。如果同时有多个<div>元素，可以将想改变的<div>指定一个id，然后选择，比如，#elixirs h2 {...}(#elixirs>h2表示会选择直接的孩子h2，#elixirs blockquote h3表示会选择间接的孙子h3)。

8，line-height属性值可以直接使用一个数字，例如，使用一个数字1，就表示<div>中的各个元素行高是其字体大小的1倍。

9，内边距、外边距、边框、背景和字体属性都可以用快捷方式指定。例如，padding-top、padding-right、padding-bottom和padding-left都与内边距有关，可以用一个快捷规则来指定：padding：0px(上) 20px(右) 30px(下) 10px(左);（如果四个内边框都相同可以写作 padding: 30px;）（如果内边框中上边和下边一样，左边和右边一样，可以写作：padding: 0px(上边和下边) 20px(左边和右边);）。边框属性可以写作：border: thin(width) solid(style) #007e7e(color); 背景也可以写作：background: white(color) url(images/cocktail.gif)(image) repeat-x(repeat);

10，<span>内联元素与<div>元素类似；它用于将相关的内联元素和文本归组在一起。另外，可以将<span>元素增加到类（或者为<span>元素指定唯一的id），对他们增加样式。

11，有些元素有不同的状态，可以用伪类单独的为各个状态指定样式，<a>元素就是这样一个例子。<a>元素的主要状态包括未访问、已访问和悬停：:link对应未访问的链接，:visited对应已访问的链接，:hover对应悬停状态(这些选择器中间不能有空格，比如a:link表示未访问)。

12，伪类还可以用其他元素，而不仅限于<a>。另外一些的伪类包括:focus、:active、:first-child(对应元素的第一个子元素)和last-child(对应元素的最后一个子元素)伪类等。