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);
}