3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position（定位）：元素的定位与文档流无关
static定位：
HTML元素的默认值， 没有定位，元素出现在正常的流中
静态定位的元素不会受到top,bottom,left,right影响
Fixed定位:
元素的位置相对于浏览器窗口固定
即便串口滚动元素也不滚动
注：
- Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持
- Fixed定位使元素的位置与文档流无关，因此不占据空间
- Fixed定位的元素和其他元素重叠。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Relative定位：
相对定位元素的定位是相对其正常位置，常被用于绝对定位元素的容器块
Absolute定位：
绝对定位的元素相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<.html>
position:absolute;
注：
- absolutely定位使元素的位置与文档流无关，因此不占空间
- absolutely定位的元素和其他元素重叠
重叠的元素：
- 元素的定位与文档流无关，所以它们可以覆盖页面上的其他元素
- z-index属性指定了一个元素的堆叠顺序(哪个在前哪个在后)
- 一个元素可以有整数或者负数的堆叠顺序
CSS float：
- css float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止
- 如果一个元素水平浮动，则只能左右移动不能上下移动
- 如果图像是右浮动，下面的文本流将环绕在它左边
- 浮动之后的元素将围绕它，浮动之前的元素不受影响
- 几个浮动的元素放在一起，如果空间足够会彼此相邻,空间受到窗口影响
清除浮动：
- 在样式表中定义：clear:both。元素两侧不会出现浮动
- 清除浮动之后，周围的元素会重新排列
CSS 水平对齐：
块元素占用了全宽，前后都是换行符
中心对齐,使用margin属性：
margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
使用position属性设置左，右对齐
.right
{
position:absolute;
right:0px;
width:300px;
}
使用float属性设置左，右对齐
- 当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
使用Padding设置垂直居中对齐
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
在CSS3中包含了种组合方式：
- 后代选择器（空格分隔）
- 子元素选择器（大于号分割）
- 相邻兄弟选择器（加号分割）
- 普通兄弟选择器（波浪号分割）
后代选择器：
后代选取器匹配所有指定元素的后代元素
div p
{
background-color:yellow;
}
子元素选择器：
div>p
{
background-color:yellow;
}
相邻兄弟选择器：
- 选择紧接在另一元素后的元素，且二者有相同父元素
div+p
{
background-color:yellow;
}
普通相邻兄弟选择器：
- 选取所有指定元素的相邻兄弟元素
选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
div~p
{
background-color:yellow;
}
CSS伪类：
- CSS伪类用来添加一些选择器的特殊效果
- 由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式。当状态改变时，它又会失去这个样式（例如链接在被点击时和被点击之后）
- 伪类是基于文档之外的抽象
伪类语法：
- selector:pseudo-class {property:value;}
- selector.class:pseudo-class {property:value;}
- a:link {color:#FF0000;} /* 未访问的链接 */
- a:visited {color:#00FF00;} /* 已访问的链接 */
- a:hover {color:#FF00FF;} /* 鼠标划过链接 */
- a:active {color:#0000FF;} /* 已选中的链接 */
- 注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- 注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
- 注意：伪类的名称不区分大小写。
伪类和CSS类配合使用：
a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS Syntax</a>
CSS 伪元素：
- 伪元素添加一些选择器的特殊效果
- 伪元素和元素控制的内容没有差别，但因为是元素的抽象，所以不存在与文档中，所以被称为伪元素
语法：
- selector:pseudo-element {property:value;}
- selector.class:pseudo-element {property:value;}（用于CSS类）
：firs-line伪元素与：first-letter伪元素的异同：
- 两者都作用于块级元素
- first-line作用于首行
- first-letter作用于首个字母
first-before伪元素与first-after伪元素：
- ":before" 伪元素可以在元素的内容前面插入新内容
- ":after" 伪元素可以在元素的内容之后插入新内容
h1:before
{
content:url(smiley.gif);
}
h1:after
{
content:url(smiley.gif);
}
