首页 > 代码库 > HTML5学习笔记(十):CSS常用操作

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

 

HTML5学习笔记(十):CSS常用操作