【CSS】边框与定位

本篇博客主要学习内边距、外边距与定位。

边距

1、内边距

padding
当padding后直接跟4个数值时，分别表示的是上、右、下、左（顺时针方向）

p{
	padding:10px 10px 10px 10px;   //简写
}

与之等价的是

p{
	padding-top: 10px;   //上内边距
	padding-right: 10px;    //右内边距
	padding-bottom: 10px;   //下内边距
	padding-left: 10px;    //左内边距
}

当然，这里用的像素px表示，也可用百分比(20%)或其他单位表示（em,ex）

2、外边距

margin
当margin后直接跟4个数值时，分别表示的是上、右、下、左（顺时针方向）

p{
	margin:10px 10px 10px 10px;   //简写
}

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值
与之等价的是

p{
	margin-top: 10px;   //上外边距
	margin-right: 10px;    //右外边距
	margin-bottom: 10px;   //下外边距
	margin-left: 10px;    //左外边距
}

接受任何长度单位，可以是像素、英寸、毫米或 em，也可用百分比

定位

1、相对定位

通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。相对定位被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#div{
	position:relative;
	left:30px;   //元素向右移动 30 像素
	top:30px;    //在原位置顶部下面 30 像素的地方
}

2、绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。普通流中其它元素的布局就像绝对定位的元素不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素。

#div{
	position:absolute;
	left:30px;
	top:30px;
}