<div>划分页面为逻辑区或逻辑分组。
逻辑区（logical section）：页面上彼此相关的一组元素。
- 在属于一个逻辑区的元素前后放上
<div></div> - 可以使用id属性为逻辑区提供标识
为什么需要逻辑区？
- 帮助理解页面；
- 可能真的去需要通过逻辑区构建页面。
tips
-
<div>中可以嵌套<div> - 切记滥用
<div>
若body与div中都有h2，而我们只想改变div中h2的样式，可以使用以下方法：
div h2{ color }
如果有多个div，可以用该div的标签号表示，如：
#pets h2{ color }
该方法可以多层次嵌套：
#pets blockquote h2{ color }
同一对象的不同属性可以写在一行，简化代码，如：
border-width：thin; border-style:solid; border-color:#007e7e;
以上三行可以直接写成：
border:thin solid #007e7e; 顺序不重要。
内外边距也可以写一行，按照上右下左的顺序。
若山下，左右等距，可以只写两个值，先上下，后左右。
<span>建立内联元素的逻辑分区。
对于<a>的修改，
link:未点击过该链接的状态
visited:已访问过该链接
hover:鼠标悬停于链接上的状态
注意！“a:link”中间不能有空格。
a:link{ color:green; } a:visited{ color: red; } a:hover{ color:yellow; }
这种形式的类称为伪类
开发者会为一个页面制作多个样式表，用户也可以自己制作样式表，浏览器有自己的默认样式表，9如何确定一个元素使用哪个样式？
这就是层叠问题。
当浏览器要确定<h1>中font-size属性的层叠时，需要如下步骤：
- 收集所有样式表（开发者，用户，浏览器默认）；
- 找到所有的
<h1>下，所有关于font-size的规则； - 对所有匹配的样式表排序
开发者>用户>浏览器默认； - 按照特定性对某个样式表中的规则排序
| id | class or pseudoclass | elements |
|---|---|---|
| 百位 | 十位 | 个位 |
某个规则，如果对应一个id百位加1分，对应一个类或者伪类，十位加1分，有一个元素，则个位加1分。得分越多越重要。；
5.对于冲突规则，在样式表中位置越靠后，越重要。
用户可以在他的属性后添加!important覆盖开发者的样式
如：
h1{ color:red; !important }
float 属性，使一个块元素单独成为一列。
