• 四、定位方式


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

    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

  • 相关阅读:
    scrapy之download middleware
    远程采集
    未能加载文件或程序集“Oracle.DataAccess, Version=4.112.2.0, Culture=neutral, PublicKeyTok”
    【转】如何解决C盘根目录无法创建或写入文件
    C#报算术运算导致溢出的错误
    【转】C# String 前面不足位数补零的方法
    【转】C# 使用正则表达式去掉字符串中的数字,或者去掉字符串中的非数字
    【转】Asp.Net页面生命周期
    【转】processOnServer
    【转】oracle的分析函数over
  • 原文地址:https://www.cnblogs.com/liufangdekele/p/5770862.html
Copyright © 2020-2023  润新知