margin对css绝对定位的影响 |
您所在的位置:网站首页 › 为什么margin的auto没用 › margin对css绝对定位的影响 |
原文链接:http://leyteris.iteye.com/blog/826932
试验css绝对定位时,跟自己预想的不太一样,有点迷,查了之后才发现还有margin的影响。。。。
正文: 对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验:
使用的HTML原始测试文件: Html代码 ![]()
原始的测试css: Html代码 ![]()
上面的图是普通的定义了top和left的,绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。 而要是这top和left不进行定义,则如下图: Css代码 ![]() 则绝对定位元素对位参照上层父级元素。
Css代码 ![]()
上面代码的显示和上面的图是一样的。top的值是top和margin-top相加的值 下面的也是: 我们把margin-top的值改为30px; 则是下面的图: 说明上面的推断可能正确,总的top值是两个值的叠加。
下面我们用left方向来说明一下中间的.box的margin值对定位的作用:
Css代码 ![]() 单单是left定位的话很容易猜到下图:
Css代码 ![]()
如果margin和left一起出现呢? 为了和前面的区别开来,我采用left:10px
Css代码 ![]()
可以看到绿色的块元素左溢出红块,以为现在的left值为30px。
这个在IE6中也同样适用:
现在我们可以得到结论了,当绝对定位块和上层相对定位(或绝对定位)中间夹着一层标准流(或浮动)的块时:
1、只使用left等定位是按照上层相对定位(或绝对定位)的边界进行定位 2、只使用margin相关属性定位时按照上层标准流(或浮动)块的边界进行定位 3、当同时使用两者时则按照上层相对定位(或绝对定位)的边界进行定位,并且距离值为两者的相加值 4、对于不使用left也没有margin的,自动按照上层标准流进行定位
补充一点: 元素的上下和左右分别对应于哪层块互不干扰。
引申应用:
上述特点可以用来无hack地定位居中元素:
具体如下: Css代码 ![]()
以下内容个人补充,与转载无关: 元素的margin同样有影响,可以个人试验一下; 首先 标签在主流浏览器是有默认的margin值的:默认margin:12px 0;所以实验之前先设置所有的p标签margin:0; (附一篇博文:http://blog.csdn.net/qiexh/article/details/25723049)
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |