HTML5学习笔记（十）：CSS常用操作

对齐

在 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 以及更早的版本 */
}