Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

绝对定位元素的属性填充

  绝对定位元素的定位会考虑元素自身的位置、尺寸、外补丁,等参数。没有被固定的参数会被自动分配剩余的空间,以尽可能的适应含纳块。而这些分配也根据位置、尺寸、外补丁,的优先顺序来进行的。如果位置固定则分配尺寸,如果尺寸固定则分配外补丁。
  比如下面这个测试 <style>
div {
  background-color:#F5F5F5;
  line-height:24px;
  position:absolute;
  /*位置固定*/
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  /*尺寸不固定*/
  width:auto;
  height:auto;
}
</style>
<div></div>

  由于尺寸不固定,所以含纳块的剩余空间被分配给了尺寸,因此这个盒子是占满整个浏览器工作区的。接着我们把尺寸也固定呢?
<style>
div {
  background-color:#F5F5F5;
  border:1px solid #CCC;
  line-height:24px;
  position:absolute;
  /*位置固定*/
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  /*尺寸固定*/
  width:300px;
  height:200px;
  /*外补丁不固定*/
  margin:auto;
}
</style>
<div></div>

  这个测试就会把含纳块剩余的空间均匀地填入外补丁中,所以元素就在浏览器工作区上居中了。
  最后请注意,这些特性在IE7-中无法正常工作,使用时请慎重。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^