CSS样式积累：笔记

1、border-collapse:collapse， 属性设置表格的边框是否被合并为一个单一的边框

2、vertical-align: middle，属性设置元素的垂直居中

3、text-align: center，属性设置元素中的文本的水平居中

4、position 属性的介绍

 

1、border-collapse:collapse，属性设置表格的边框是否被合并为一个单一的边框

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

可能的值：

separate： 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit：规定应该从父元素继承 border-collapse 属性的值。

实例：

为表格设置合并边框模型：

table{border-collapse:collapse;}

 

2、vertical-align: middle，属性设置元素的垂直居中

定义：

vertical-align 属性设置元素的垂直对齐方式。所有浏览器都支持 vertical-align 属性。

说明：

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

示例：垂直对齐一幅图像。

img { vertical-align:text-top; }

可能的值：

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
top	把元素的顶端与行中最高元素的顶端对齐。
text-top	把元素的顶端与父元素字体的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

 

3、text-align: center，属性设置元素中的文本的水平居中

定义：

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

可能的值：

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

 

4、position 属性的介绍

定义：

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

可能的值：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

示例：定位 h2 元素。

h2 {
  position:absolute;
  left:100px;
  top:150px;
}