<div>元素用于将相关的元素归组在一起，放在逻辑区中。创建逻辑区有助于标识主内容区以及页面的页眉和页脚。可以使用<div>元素将需要共同样式的元素归组在一起。使用嵌套<div>元素为文件增加更多结构，这有利于保证结构清晰或者方便增加样式。不过除非确实需要，否则不要过多地增加结构。一旦用<div>元素将内容区归组在一起，类似于其他块元素，可以对这些<div>增加样式。例如，对包含在<div>中的一组元素，可以使用嵌入这些元素的<div>边框属性，对这组元素增加一个边框。width属性设置一个元素内容区的宽度。一个元素的总宽度是内容区宽度，加上所增加的内边距、边框和外边距的宽度。一旦设置一个元素的宽度，它不会延伸来占满浏览器窗口的整个宽度。text-align是块元素的一个属性，用来将这个块元素中的所有内容对齐，可以居中，左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。可以使用子孙选择器来选择嵌套在其他元素中的元素，例如，子孙选择器 div h2 {...}会选择嵌套在<div>元素中的所有<h2>（包括子元素、孙子元素等）。可以对相关的属性使用快捷方式。例如，padding-top、padding-right、padding-bottom和padding-left都与内边距有关，可以用一个快捷规则来指定：padding。内边距、外边距、边框、背景和字体属性都可以用快捷方法指定。<span>内联元素与<div>元素类似；它用于将相关的内联元素和文本归组在一起。类似于<div>，可以将<span>元素增加到类（或者为<span>元素指定唯一的id），对它们增加样式。有些元素有不同的状态，<a>元素就是这样一个例子。<a>元素的主要状态包括未访问、已访问和悬停。可以用伪类单独地为各个状态指定样式。伪类最常用于<a>元素，:link对应未访问的链接，:visited对应已访问的链接，:hover对应悬停状态。伪类还可以用于其他元素，而不仅限于<a>。另外一些伪类包括:hover，:active，:focus，:first-child和last-child伪类等。
补充知识点：
层叠的浏览器机制
收集所有样式表。找到所有匹配的声明。现在对所有匹配的规则按作者、读者和浏览器的顺序排序。现在按特定性对所有声明排序。注意：我们只是在作者、读者和浏览器类别范围内排序，并没有对整个列表排序。对于冲突的规则，按照它们在各个样式中出现的顺序排序。注意：不论是否在同一个CSS文件中，规则总是从上到下排列。可以假装你把所有CSS都按链接文件的顺序插入到你的文件中。这就是规则出现的顺序。
转载于:https://www.cnblogs.com/giscode/p/6600149.html
