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