四、定位方式

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

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、绝对定位元素相对最近定位祖先元素实现水平居中:

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

原文地址:https://www.cnblogs.com/liufangdekele/p/5770862.html