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; }
以上样式都可以放在表格里用。