CSS样式积累：笔记

客官°小女子只卖身不卖艺 2021-09-10 10:38 382阅读 0赞

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; }

**可能的值：**

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

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

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

**定义：**

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

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

**可能的值：**

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

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

# 4、position 属性的介绍 #

**定义：**

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

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

**可能的值：**

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

**示例：**定位 h2 元素。

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