绝对定位下的盒模型

元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里

负margin的应用一文中,我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式:

  BoxWidth = MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth;

但是在含有绝对定位元素的包含块内,包含块的尺寸却不能由上述公式计算,而是:

  ContainerBoxWidth =  left + MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth + right;

其中left和right为绝对定位元素的偏移值。在公式中,除了paddingLeft和paddingRight以及borderLeft,borderRight的width不能设置为auto,其余的属性均可以。

但是对于绝对定位元素,left,right,top属性设置为auto时,会发生比较有趣的现象。当left:auto时,元素的左边将和元素的静态位置的左侧对其。所谓静态位置,就是元素并未脱离正常流情况下所在的位置。当right和top设为auto时,一样道理。但是bottom却没法取得静态位置。

所以根据上述公式,我们也可设计一种绝对定位元素居中的方式,

{position:absolute;
  left:0;
  right:0;
  width:50px;
  margin:10px auto;  
}

这样就使元素水平居中,垂直居中也一样道理。原理就是根据上述公式,将对应方向的margin设为auto,这样浏览器就会计算出合适左右(上下)边距,居中对齐。

但是IE6,7,8(Q)不支持绝对定位元素的这种垂直居中方式。

另外,在宽度过度受限的情况下,将会选择性的充值某个属性。

比如:

{position:absolute;
  left:10px;
  right:10px;
  width:50px;
  margin:10px 0px;  
  padding:0px;
}

  在包含块宽度为90px的情况下,这些数据不满足上述公式。此时,浏览器会舍弃某个属性值。

对于从左向右书写的语言,会舍弃right的值,并重新赋值right:30px。

利用上述绝对定位的性质,可以实现一个元素在包含块中的水平垂直居中对齐:

{
     position: absolute;
     top: 0%;
     right: 0%;
     bottom: 0%;
     left: 0%;
     margin: auto;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

1966
来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

70110
来自专栏烙馅饼喽的技术分享

Silverlight像素着色器文字描边效果-改

        上次的描边着色器有两个问题,导致效果不太理想。现在我们来设法改进这两点。 问题一: 当TextBlock的呈现宽度和高度没有正确赋值时,将无法...

3095
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

3139
来自专栏lzj_learn_note

Android ImageSpan与TextView同一行图片居中

在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。...

2212
来自专栏前端杂货铺

CSS3实现圆形进度条

介绍   闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。 现在在此讲述...

5278
来自专栏搞前端的李蚊子

使用canvas实现一个圆球的触壁反弹

HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF00...

2865
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

1071
来自专栏我和未来有约会

分析Silverlight Button控件布局

分析Silverlight Button控件布局 答:关于按钮自适应 Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid...

3755
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

2099

扫码关注云+社区