本篇博客主要学习内边距、外边距与定位。
边距
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;
}