对齐
在 CSS 中，可以使用多种属性来水平对齐元素。
水平对齐
使用 margin 属性来水平对齐，可通过将左和右外边距设置为 "auto"，来对齐块元素。
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
也可以简写为，这里把上下的外边距设定为0：
.center { margin:0 auto; }
左右对齐
使用绝对定位
对齐元素的方法之一是使用绝对定位：
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
使用浮动
对齐元素的另一种方法是使用 float 属性：
.right { float:right; width:300px; background-color:#b0e0e6; }
尺寸
CSS 尺寸属性允许你控制元素的高度和宽度。
- height：设置元素的高度。
- line-height：设置行高。
- max-height：设置元素的最大高度。
- max-width：设置元素的最大宽度。
- min-height：设置元素的最小高度。
- min-width：设置元素的最小宽度。
- width：设置元素的宽度。
分类
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
- clear：设置一个元素的侧面是否允许其他的浮动元素。
- cursor：规定当指向某元素之上时显示的指针类型。
- display：设置是否及如何显示元素。
- float：定义元素在哪个方向浮动。
- position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
- visibility：设置元素是否可见或不可见。
clear
clear 属性定义了元素的哪边上不允许出现浮动元素。
- left：在左侧不允许浮动元素。
- right：在右侧不允许浮动元素。
- both：在左右两侧均不允许浮动元素。
- none：默认值。允许浮动元素出现在两侧。
- inherit：规定应该从父元素继承 clear 属性的值。
cursor
cursor 属性规定要显示的光标的类型（形状）。
- url：需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
- default：默认光标（通常是一个箭头）
- auto：默认。浏览器设置的光标。
- crosshair：光标呈现为十字线。
- pointer：光标呈现为指示链接的指针（一只手）
- move：此光标指示某对象可被移动。
- e-resize：此光标指示矩形框的边缘可被向右（东）移动。
- ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。
- nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
- n-resize：此光标指示矩形框的边缘可被向上（北）移动。
- se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
- sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
- s-resize：此光标指示矩形框的边缘可被向下移动（南）。
- w-resize：此光标指示矩形框的边缘可被向左移动（西）。
- text：此光标指示文本。
- wait：此光标指示程序正忙（通常是一只表或沙漏）。
- help：此光标指示可用的帮助（通常是一个问号或一个气球）。
display
display 属性规定元素应该生成的框的类型。
- none：此元素不会被显示。
- block：此元素将显示为块级元素，此元素前后会带有换行符。
- inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
- inline-block：行内块元素。（CSS2.1 新增的值）
- list-item：此元素会作为列表显示。
- run-in：此元素会根据上下文作为块级元素或内联元素显示。
- compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
- marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
- table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
- inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
- table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
- table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
- table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
- table-row：此元素会作为一个表格行显示（类似 <tr>）。
- table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
- table-column：此元素会作为一个单元格列显示（类似 <col>）
- table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
- table-caption：此元素会作为一个表格标题显示（类似 <caption>）
- inherit：规定应该从父元素继承 display 属性的值。
visibility
visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display: none" 属性来创建不占据页面空间的不可见元素。
- visible：默认值，元素是可见的。
- hidden：元素是不可见的。
- collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
- inherit：规定应该从父元素继承 visibility 属性的值。
图像透明度
定义透明效果的 CSS3 属性是 opacity。
请看下面的 CSS：
img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ }
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
下面我们看一个效果，图片鼠标移入时不透明：
img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */ }