一、缩进

缩进：将元素相对容器的四边移进或移出。

缩进是一组行为，它把元素拉伸至容器的四边，然后再对该元素的边进行偏移。向内缩进减小元素的尺寸，向外缩进（外凸）扩大元素的尺寸。元素的每一边都可以独立的缩进与外凸，使用外边距margin可以扩大或缩小被拉伸元素的宽高。

正的外边距用于缩进，负的外边距用于外凸。

  • 水平缩进静态块状元素
SELECTOR{
	position: static;
	width: auto;
	margin-left: ±VALUE;
	margin-right: ±VALUE;
}
  • 水平缩进绝对元素
SELECTOR{
	position: absolute;
	width: auto;
	/*水平拉伸后再缩进*/
	left: 0;
	right: 0;
	margin-left: ±VALUE;
	margin-right: ±VALUE;
}
  • 垂直缩进绝对元素
SELECTOR{
	position: absolute;
	height: auto;
	/*垂直拉伸后再缩进*/
	top: 0;
	bottom: 0;
	margin-left: ±VALUE;
	margin-right: ±VALUE;
}

  • 局限

    • 不能垂直拉伸和缩进静态元素
    • 不能拉伸和缩进浮动元素
    • 不能拉伸和缩进内联文本元素
    • 不能缩进或外凸使用width:100%或height:100%进行拉伸的元素。

二、偏移

偏移：将元素在不改变尺寸的前提下从它原来的位置移开。

1、静态元素的偏移

使用外边距margin可以对设定尺寸和包裹的元素进行偏移，左外边距和上外边距会把元素按照前面元素的结束位置进行偏移，右外边距和下外边距会指定后面元素的起始位置。

SELECTOR{
	position: static;
	margin-DIRECTION: ±VALUE;
}

  • 内联模式

    DIRECTION：left、right;
    margin-left: ±VALUE：向右或向左移动；
    margin-right: ±VALUE：向右侧或向左侧推后面元素；

  • 块状模式

    DIRECTION：top、bottom;
    margin-top: ±VALUE：向上或向下移动；
    margin-bottom: ±VALUE：向下或向上推后面元素；

2、静态表格的偏移或缩进

可以使用左外边距或右外边距对一个设定尺寸或被包裹的表格进行偏移。

可以通过设置表格的宽度为一个小于100%的百分数，并设置它的左右边距为atuo，来对它的两边同时缩进，实现表格居中的效果。

  • 被包裹或设定尺寸的表格左偏移
SELECTOR{
	position: static;
	width: AUTO_OR_+VALUE;
	margin-left: ±VALUE;
	margin-right: auto;
}
  • 被包裹或设定尺寸的表格右偏移
SELECTOR{
	position: static;
	width: AUTO_OR_+VALUE;
	margin-right: ±VALUE;
	margin-left: auto;
}
  • 被拉伸表格的偏移
SELECTOR{
	position: static;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

3、浮动元素的偏移

浮动元素位于它们自已的排列顺序中，其中一个浮动元素的位置会影响相邻浮动元素和内联内容的位置。

外边距只会令浮动元素偏移而不会对缩进，因为它们不会改变大小，只会改变位置。

SELECTOR{
	float: LEFT_OR_RIGHT;
	margin-DIRECTION: ±VALUE;
}

  • 水平

    DIRECTION：left、right;
    margin-left: ±VALUE：左侧扩展或回缩；
    margin-right: ±VALUE：右侧扩展或回缩；

  • 垂直

    DIRECTION：top、bottom;
    margin-top: ±VALUE：顶端扩展或回缩；
    margin-bottom: ±VALUE：底端扩展或回缩；

4、绝对元素和固定元素的偏移

使用绝对或固定定位将元素从原始排列顺序中脱离出来，并对其包裹或设置尺寸，然后可以用外边距将它依照原来的位置进行偏移。这两种元素的对齐和偏移是以它最近的定位祖先的边作为依照的。

SELECTOR{
	position: ABSOLUTE_OR_FIXED;
	/*包裹或设定尺寸*/
	height: AUTO_OR_+VALUE;
	width: AUTO_OR_+VALUE;
	margin-top: ±VALUE;
	margin-left: ±VALUE;	
}

5、相对元素的偏移

相对元素：设置了position:relative的元素，它的位置是由元素的排列顺序或浮动顺序决定的。相对元素使用top和left将它从原始位置进行偏移。

SELECTOR{
	position: relative;
	top: ±VALUE;
	left: ±VALUE;
	z-index: ±VALUE;
}
参考资料
  • 精通CSS与HTML设计模式