`

css常用属性(续)

    博客分类:
  • CSS
 
阅读更多

4):相对路径与绝对路径

通过position来定义路径类型。

position: absolute;为绝对路径,也就是在其所在<div/>标签的位置。

例:

 .div {
	position: absolute;
	left: 100px;
	top: 200px;
    }

position: relative;为相对路径,也就是在同一个<div/>标签中,相对于绝对位置的标签的位置。

例:

  .div {
	position: relative;
	left: 100px;
	top: 20px;
    }

5):boder边框属性。

通过boder属性来定义边框样式;

常用的边框样式有以下几类:

.div {
       boder: 1px;
}

 设置边框四边宽度,(boder-top;boder-right;boder-bottom;boder-left)也可以写boder-width;

  设置边框颜色:

.div {
      boder-color: black; #8b8b8b; rgba(67, 138, 200, 0.91);
}

还可以写成这种形式: boder: 1px solid #8b8b8b;就是边框宽度为1px的实线灰色边框;

boder-radius设置边框圆角;

如:boder-radius: 5px(圆角半径);

(border-top-left-radius; border-top-right-radius; border-bottom-left-radius; border-bottom-right-radius;)

6):设置文本水平对齐方式: text-align: center; (left;  right;)

设置垂直居中: line-height: 50px(垂直距离的二分之一);

设置居上: vertical-align: top;(left;  right;  bottom;)

给边框定义最小长宽:

最小高度: 例

 .div {
          _height: 195px;
          min-height: 195px;
} 

这样当div中的内容超过最小高度后,div会自动适应高度,将边框撑开。

7):设置table表格样式:

设置表格边框样式:

table, th, td
  {
  border: 1px solid blue;
  }

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

例:

table
  {
  border-collapse:collapse;
  }
table,th, td
  {
  border: 1px solid black;
  }

通过width和height来设置表格宽度与高度 :

table
  {
  width:100%;
  }
th
  {
  height:50px;
  }

  以上样式都可以放在表格里用。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics