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