内边距
按照上、右、下、左的分别设置各地的内边距,各边可以使用不同的单位或百分比值:
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
//还可以这样写
h1 {padding: 10px 0.25em 2ex 20%;}
如果上、右、下、左的值一样可以这样写
h1 {padding: 10px;}
//个边值均为10
外边距
可以用margin来设置上下左右的外边距
margin 可以是任何长度单位。例如:像素、英寸、毫米、em
与内边距设置相同,这些值得顺序是从上外边距(top)开始围着顺时针旋转的
margin: top right bottom left
h1 {margin : 10px 0px 15px 5px;}
相对路径与绝对路径
通过position来定义路径类型。
position:absolute为绝对路径,
.div {
position: absolute;
left: 100px;
top: 100px;
}
position:relative;为相对路径,也就是在同一个<div/>标签中,相对于绝对位置的标签的位置。
.div {
position: relative;
left: 100px;
top: 20px;
}
boder边框属性
通过boder属性来定义边框样式;
边框四周宽度
.div {
boder: 1px;
}
设置边框四边宽度,(boder-top;boder-right;boder-bottom;boder-left);
设置边框颜色:
.div {
boder-color: black; #8b8b8b; rgba(67, 138, 200, 0.91);
}
//还可以写成这种形式:
.div{boder: 1px solid #8b8b8b}
//就是边框宽度为1px的实线灰色边框;
还可以写成这种形式: boder: 1px solid #8b8b8b;就是边框宽度为1px的实线灰色边框;
bpder-radius设置边框圆角
如:bpder-radius:5px(圆角半径)
(border-top-left-radius; border-top-right-radius; border-bottom-left-radius; border-bottom-right-radius;)
设置文本水平对齐方式:text-align:center;(left;right)
设置垂直居中:line-height:50px(c垂直距离的二分之一)
设置居上:vertical-align:top;(left;right;bottom;)
给边框定义最小长宽:
最小高度: 例
.div {
_height: 195px;
min-height: 195px;
//这样当div中的内容超过最小高度后,div会自动适应高度,将边框撑开