四、定位方式

简介：缩进或外凸是指拉伸型元素一条或多条边与上级容器重叠时，修改该元素的高度或宽度；偏移指设定尺寸或收缩适应型元素在不改变高度和宽度情况下，元素整体偏离常规流位置；对齐指设定尺寸或收缩适应型元素在不改变高度和宽度情况下，将其位置重新定位到上级容器的其中一条边，或者相对于该边偏移一定位置。

1、         缩进：先将元素拉伸到容器各边，然后相对容器各边偏移。正值外边距产生缩进效果，负值外边距产生外凸效果。

2、         静态偏移：static   静态行内元素：设置margin-lleft/right使元素左右偏移

静态块级元素：设置margin使元素左右上下偏移

3、         静态表格偏移和缩进：使用左右外边距可以设定尺寸型或收缩适应型表格发生偏移，若设定margin-left的值，则需要将margin-right设置为auto,反之亦然；

拉伸型表格宽度设置为小于%100的百分数，并且将其左右外边距设为auto;

4、浮动偏移：使用外边距使浮动元素偏移，外边距会使浮动元素偏移而不会改变尺寸大小。Float:left/right     margin:+/-value

5、 绝对偏移与固定偏移absolute/fixed:使用margin-left/top使元素偏离常规流

6、 相对偏移：相对元素是指设置了position:relative的浮动元素或静态元素。使用top和left使元素偏离当前位置。与元素的外边距不同，相对偏移不会对其他元素位置产生影响。元素可重叠，z-index  。

7、静态行内对齐：水平对齐text-align:left/right/center/justify

将line-height设置为大于内容高估，可以设置垂直对齐vertical-align:constant/value

8、静态块级对齐与偏移：margin-right:auto   margin-left:value使元素左对齐或偏移

Margin-left:auto   margin-right:auto元素在上级元素中实现居中对齐

Margin-left:auto   margin-right:value使元素右对齐或偏移

9、 静态表格对齐与偏移的设置与静态块级元素相同。

10、绝对对齐与偏移：

使元素相对左边偏移：

left:0   right:auto使元素左对齐

margin-left:+value相对左边向右偏移；margin:-value相对左向左偏移

11、绝对定位元素相对最近定位祖先元素实现水平居中：

width:+value指定宽度；left:0    right:0   margin-left:auto   margin-right:auto

 

转载于:https://www.cnblogs.com/liufangdekele/p/5770862.html