1. 全栈程序员必看首页

margin对css绝对定位的影响

全栈程序员-站长 • • 未分类 • 阅读 1

margin对css绝对定位的影响原文链接 http leyteris iteye com blog 试验 css 绝对定位时 跟自己预想的不太一样 有点迷 查了之后才发现还有 margin 的影响 正文 对于 div 的绝对定位一直以为 margin 属性是无效的 只是通过 top left bottom right 定位 然而今天的却发现不是这样的 于是对其做了些实验

原文链接：http://leyteris.iteye.com/blog/

试验css绝对定位时，跟自己预想的不太一样，有点迷，查了之后才发现还有margin的影响。。。。

正文：

对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验：

 

使用的HTML原始测试文件：

 

Html代码  
收藏代码

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />  
  5. <title>test</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div class=“wrapper”>  
  10.     <div class=“box”>  
  11.         <div class=“bottom”></div>  
  12.     </div>  
  13. </div>  
  14. </body>  
  15. </html>  

 

 

原始的测试css：

 

Html代码  
收藏代码

  1. <style>  
  2. *{  
  3.     margin:0;  
  4.     padding:0;  
  5. }  
  6. .wrapper{  
  7.     width:400px;  
  8.     overflow:hidden;  
  9.     background:#000;  
  10.     margin:20px auto;  
  11.     position:relative;  
  12. }  
  13. .box{  
  14.     width:200px;  
  15.     height:400px;  
  16.     background:#F00;  
  17.     margin-left:40px;  
  18. }  
  19. .bottom{  
  20.     width:200px;  
  21.     height:40px;  
  22.     position:absolute;  
  23.     background:#0F0;  
  24.     top:0;  
  25.     left:0;  
  26. }  
  27. </style>  

 

   上面的图是普通的定义了top和left的，绝对定位的元素在父元素中寻找相对或绝对定位的并进行定位。

而要是这top和left不进行定义，则如下图：

 

Css代码  
收藏代码

  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6. }  

 
 

则绝对定位元素对位参照上层父级元素。

 

 

Css代码  
收藏代码

  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:-30px;  
  8. }  

 

上面代码的显示和上面的图是一样的。top的值是top和margin-top相加的值

下面的也是：

我们把margin-top的值改为30px;

则是下面的图：

说明上面的推断可能正确，总的top值是两个值的叠加。

 

 

下面我们用left方向来说明一下中间的.box的margin值对定位的作用：

 

 

Css代码  
收藏代码

  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     left:20px;  
  9. }  

 单单是left定位的话很容易猜到下图：

 

 

Css代码  
收藏代码

  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     margin-left:20px;  
  9. }  

 

 

如果margin和left一起出现呢？

为了和前面的区别开来，我采用left：10px

 

 

 

Css代码  
收藏代码

  1. .bottom{  
  2.     width:200px;  
  3.     height:40px;  
  4.     position:absolute;  
  5.     background:#0F0;  
  6.     top:30px;  
  7.     margin-top:30px;  
  8.     margin-left:20px;  
  9.     left:10px;  
  10. }  

 

 

可以看到绿色的块元素左溢出红块，以为现在的left值为30px。

 

这个在IE6中也同样适用：

 

 

现在我们可以得到结论了，当绝对定位块和上层相对定位（或绝对定位）中间夹着一层标准流（或浮动）的块时：



1、只使用left等定位是按照上层相对定位（或绝对定位）的边界进行定位

2、只使用margin相关属性定位时按照上层标准流（或浮动）块的边界进行定位

3、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

4、对于不使用left也没有margin的，自动按照上层标准流进行定位



 

补充一点：

元素的上下和左右分别对应于哪层块互不干扰。

 

 

 

 

引申应用：

 

上述特点可以用来无hack地定位居中元素：

 

具体如下：

Css代码  
收藏代码

  1. #con{  
  2.     position:absolute;  
  3.     left:50%;  
  4.     width:760px;  
  5.     margin-left:-380px;  
  6. }  

 上面的代码就是应用了得出的观点的第三点执行的，而且这种上面的定位方式是完全遵循Css原则的无hack的模式

以下内容个人补充，与转载无关：

<P>元素的margin同样有影响，可以个人试验一下；

首先<p>标签在主流浏览器是有默认的margin值的：默认margin：12px 0;所以实验之前先设置所有的p标签margin:0;

（附一篇博文：http://blog.csdn.net/qiexh/article/details/）


版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232502.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • fastjson object转jsonobject_jsonobject取值

    fastjson object转jsonobject_jsonobject取值

    fastjson object转jsonobject_jsonobject取值众所周知，kafka中存储的数据是经过BASE64加密后的jsonObject，因此从kafka中读取的数据经过base64解码，得到的是json串，利用JSONObect的方法可以对json串进行解析，拿到对应的数据。那么要如何将scala对象或者java对象转换为JsonObject对象或JSONObject对象呢？(注意：JsonObject对象和JSONObject对象不同，调用的API也…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月5日
    2
  • h5文件简介_h5特性

    h5文件简介_h5特性

    h5文件简介_h5特性H5文件是层次数据格式第5代的版本（HierarchicalDataFormat，HDF5），它是用于存储科学数据的一种文件格式和库文件。由美国超级计算中心与应用中心研发的文件格式,用以存储和组织大规模数据.H5将文件结构简化成两个主要的对象类型:1数据集dataset,就是同一类型数据的多维数组2组group,是一种容器结构,可以包含数据集和其他组,若一个文件中存放了不同种类的数据…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年10月17日
    4
  • @NotNull 等注解的简单使用

    @NotNull 等注解的简单使用

    @NotNull 等注解的简单使用注册一个账号,有账号+密码前端会做一个判空,但是后端同时也要做一个判空,防止url直接访问这时后端的代码通常是:if(name!=null){ return”账号不能为空,请重新输入”;}elseif(password!=null){ return”密码不能为空,请重新输入”;}这样就会显得特别low,而且极不美观这时候就要用到一个注解@NotNull简单举例说明:@DatapublicclassUserInfo{@NotNull(message=”

    全栈程序员-站长的头像 全栈程序员-站长
    2025年5月26日
    2
  • 自适应音频功率放大器「建议收藏」

    自适应音频功率放大器「建议收藏」

    自适应音频功率放大器「建议收藏」自适应音频功率放大器一、题目描述基本指标：输入信号范围10-100mV有效值，负载电阻8Ω，输出功率恒定2W其他要求：测取功放指标，测取输入、输出电阻，测取通频带曲线，验证带宽。二、设计思路拟采用自动增益控制（AGC）电路+功率放大电路实现该课题要求。2.1AGC电路设计思路采用结形场效应管（JFET）或程控放大芯片设计。①利用JFET2N3821工作在可变电阻区，通过改变场效应管源漏极间的电阻来控制运算放大器的放大倍数。②采用AD603程控增益可调集成运放作为可变增益放大器结合简单

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月3日
    54
  • SATA、mSATA、M.2、M.2（NVMe）、PCIE固态硬盘接口详解

    SATA、mSATA、M.2、M.2（NVMe）、PCIE固态硬盘接口详解

    SATA、mSATA、M.2、M.2（NVMe）、PCIE固态硬盘接口详解固态硬盘概念固态驱动器（SolidStateDrive），俗称固态硬盘，固态硬盘是用固态电子存储芯片阵列而制成的硬盘，因为台湾英语里把固体电容称之为Solid而得名。SSD由控制单元和存储单元（FLASH芯片、DRAM芯片）组成。固态硬盘在接口的规范和定义、功能及使用方法上与普通硬盘的完全相同，在产品外形和尺寸上也完全与普通硬盘一致。被广泛应用于军事、车载、工控、视频监控、网络监控、网…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月28日
    51
  • js获取当前域名

    js获取当前域名

    js获取当前域名

    全栈程序员-站长的头像 全栈程序员-站长
    2021年10月28日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号