网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

CSS定位属性之间的相互作用

关注我吧
 2015/10/28 17:27:41 阅读次数:1187

1. 引言

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

2. 正文

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

  • display: none
  • position: absoluteposition: fixed
  • float: leftfloat: 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属性设置为absolutefixed时,将会产生以下作用:

Float

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

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

DISPLAY

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

指定值 计算值
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属性设置为leftright时,相互作用如下:

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. 声明

爱前端乐分享的FedFun,csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭