当前位置:Gxlcms > html代码 > CSS定位属性之间的相互作用_html/css_WEB-ITnose

CSS定位属性之间的相互作用_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:17人阅读

0. 目录

  • 目录
  • 引言
  • 正文
  • 1 DISPLAY NONE
  • 2 POSITION ABSOLUTE OR FIXED
  • Float
  • DISPLAY
  • 3 FLOAT LEFT OR RIGHT
  • DISPLAY
  • 4 POSITION STATIC
  • 偏移值
  • 声明
  • 1. 引言

    原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT
    译者:爱前端,乐分享的FedFun,前端痴王海庆的博客。
    译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为主,不当之处敬请指正。
    阅读建议5分钟。

    2. 正文

    在定位元素时,我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性,一些特殊的值组合会覆盖其他属性的应用,这些组合有:

  • display: none
  • position: absolute或position: fixed
  • float: left或float: right
  • position: static
  • 接下来,我们就一起来研究这些组合之间如何相互作用。

    2.1 DISPLAY: NONE

    当display设置成none时,其它定位属性统统失效,因为没有产生盒模型(the box model)。

    .foo { display: none; /* None of these apply,以下这些将不会应用 */ position: absolute; float: left; top: 10px;}

    2.2 POSITION: ABSOLUTE (OR FIXED)

    如果将position属性设置为absolute或fixed时,将会产生以下作用:

    Float

    对float属性设置的任何值都会被覆盖,float属性的计算值(the computed value)自动设置为none。

    .foo { position: absolute; float: left; /* 被忽略, 计算值为none */}

    DISPLAY

    随着display属性值的不同,计算值可能会被覆盖,如下表所示。

    指定值Specified Value 计算值Computed Value
    inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption block
    inline-table table
    其他值 跟指定值相同

    下面的代码中,.foo和.bar表现上没有区别。

    .foo { position: fixed; display: inline-block; /* ignored, computed value is block */}.bar { position: fixed; display: block;}

    2.3 FLOAT: LEFT (OR RIGHT)

    除了上面两种情况,当我们把float属性设置为left或right时,相互作用如下:

    DISPLAY

    跟上面绝对定位、固定定位类似,元素浮动后display属性变换如上表所示。
    下面代码中,.foo和.bar的表现效果也一样。

    .foo { float: left; display: inline-block; /* ignored, computed value is block */}.bar { float: left; display: block;}

    2.4 POSITION: STATIC

    除了上面的变化,当position属性值为static时,相互作用如下:

    偏移值

    当元素静态定位时,偏移属性将失效,如下代码所示。

    .foo { position: static; top: 50px; /* does not apply */}
    3. 声明

    人气教程排行