水平对齐
-
对齐块元素(text-align)
块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。
例子：<h1> <p> <div>
-
使用 margin 属性来水平对齐
将左和右外边距设置为 "auto"，来对齐块元素。
div.center { margin:auto; width:80%; background-color:pink; }
-
使用 position 属性进行左和右对齐
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } -
使用 float 属性来进行左和右对齐
.right { float:right; width:300px; background-color:#b0e0e6; }
尺寸 ( dimension )
(Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
行间距：
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}
分类
分类属性允许你规定如何以及在何处显示元素。
- 把元素显示为内联元素
<style type="text/css">
p {display: inline}
div {display: none}
</style>
<!--把段落设置为内联元素-->
- 使首字母悬浮于左侧
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
<p>
<span>T</span>his is some text.
</p>
- 使元素不可见
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
<!--hidden和collapse（折叠）的效果一样-->
导航栏(列表 ul)
- 垂直导航栏
<a>
display:block;
</a>
- 水平导航栏
li
{
display:inline;
}
<!--去除了每个列表项前后的换行，以便让它们在一行中显示。-->
图像透明度
opacity 属性创建透明图像
<style>
img
{
opacity:0.5; /*opasity：不透明度*/
filter:alpha(opacity=50); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
