HTML学习——css学习之三
框：
CSS 框模型概述
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
padding 属性 :可以按照上、右、下、左的顺时针顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值； 或者通过 padding-top,padding-bottom,padding-left,padding-right 进行设定。
对于值复制的一点说明：
p {margin: 0.5em 1em 0.5em 1em;}
margin:
1. 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2. 通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：
p {margin: 0.5em 1em;}
CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
定位：
所谓定位就是 定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。对于任何元素不管是p，h1这样的块装元素还是strong 这样的行内元素，在css的定位机制中都可以当作框来进行设置。CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
通过使用 position 属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
- static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute
- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位是“相对于”元素在文档中的初始位置，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。left文本或图像会移至父元素中的左侧。right文本或图像会移至父元素中的右侧。none默认。文本或图像会显示于它在文档中出现的位置。
z-index属性：用于设置元素的堆叠顺序。
clear 属性:设置一个元素的侧面是否允许其他的浮动元素。
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素 在
both 左右两侧均不允许浮动元素
none 默认。允许浮动元素出现在两侧
其他：
@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。 示例如下：
<style>@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}@media print
{
p.test {font-family:times,serif; font-size:10px}
}
</style>
伪类与伪元素
除了类型选择符、id选择符和class选择符之外，CSS也允许使用伪类和伪元素选择符。
伪类选择符是基于一组预定义性质的选择符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这些元素的某些方面，或者是相对于该元素的浏览器用户界面的状态。
伪选择符标识虚拟元素，即在标记中不存在，但是浏览器可以推理并应用样式的元素。在伪类中，没有对应伪元素的标记。伪类在样式规则中可以独立存在，就像类一样，但是最常见的情况还是作为类型选择符与元素一起使用，例如：
:link { color: red; }
a:link { color: red; } 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}a.red: visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
| 伪类 | 作用 |
|---|---|
| :active | 将样式添加到被激活的元素 |
| :focus | 将样式添加到被选中的元素 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 将特殊的样式添加到未被访问过的链接 |
| :visited | 将特殊的样式添加到被访问过的链接 |
| :first-child | 将特殊的样式添加到元素的第一个子元素 |
| :lang | 允许创作者来定义指定的元素中使用的语言 |
| 伪元素 | 作用 |
|---|---|
| :first-letter | 将特殊的样式添加到文本的首字母 |
| :first-line | 将特殊的样式添加到文本的首行 |
| :before | 在某元素之前插入某些内容 |
| :after | 在某元素之后插入某些内容 |
ps： 伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。就是说在文档中并不存在与之对应的类标记只是浏览器可以理解其意义，类似于“类”，所以是 “伪类”。
伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。 就是说在文档中同样不存在的元素例如首字母、首行、前、后等元素可以使用伪元素进行设计。
伪类是动态的或是推断性的定义，伪元素是静态的一个指向。
