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

使用的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. <body>
  8. <div class="wrapper">
  9. <div class="box">
  10. <div class="bottom"></div>
  11. </div>
  12. </div>
  13. </body>
  14. </html>

原始的测试css：

  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不进行定义，则如下图：

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

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

  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值对定位的作用：

  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定位的话很容易猜到下图：


 而用单单用margin-left呢？

  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. }


 可以看到它是根据未用position定位的父级元素的边界进行margin定位的。

如果margin和left一起出现呢？

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

  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、当同时使用两者时则按照上层相对定位（或绝对定位）的边界进行定位，并且距离值为两者的相加值

补充一点：

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

引申应用：

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

具体如下：

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

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

浅谈块元素绝对定位的margin属性的更多相关文章

  1. 浅谈js数组中的length属性

    前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 内容 首先,我们都知道每个数组都有一个length属性 这个length属性一般我们用来循环遍历的约束,一般我们都会把他认为是该数组里面有几个元素这个 ...

  2. 浅谈JavaScript对象数组根据某属性sort升降序排序

    1.自定义一个比较器,其参数为待排序的属性. 2.将带参数的比较器传入sort(). var data = [ {name: "Bruce", age: 23, id: 16, s ...

  3. 浅谈Javascript数据属性与访问器属性

    ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...

  4. 12.24 ES6浅谈--块级作用域，let

    第一部分:ES6新增了块级作用域,let关键字用于声明变量,相较于var而言,let关键字不存在声明提前. 1.ES6真正的出现了块级作用域,使用双花括号括住并在其中用let声明变量,会存在暂时性死区 ...

  5. CSS属性中的display属性浅谈；

    首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...

  6. 浅谈HTML中的块级元素和内联元素

    一.基本概念 1.块级元素(block element):一般都从新行开始占据一定的矩形空间,可以设置其宽.高属性来改变矩形的大小.一般情况下块级元素可以包含内联元素和其它块级元素,但也有特殊如for ...

  7. 浅谈WPF依赖项属性

    浅谈WPF依赖项属性 0. 引言 依赖项属性虽然在使用上和CLR属性一样,但是它是WPF特有的,不同于CLR属性.只是封装为我们常用CLR的属性,在语法使用上和CLR属性一样.WPF中一些功能:动画, ...

  8. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  9. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

随机推荐

  1. QGrapicsView类

    QGraphicsView提供一个显示QGraphicsScene内容的窗口,该窗口可以滚动,可以在构造时候把场景对象作为参数,或者之后使用setScene()来设置view的场景,然后调用了show ...

  2. Python读取指定目录下指定后缀文件并保存为docx

    最近有个奇葩要求 要项目中的N行代码 申请专利啥的 然后作为程序员当然不能复制粘贴 用代码解决.. 使用python-docx读写docx文件 环境使用python3.6.0 首先pip安装pytho ...

  3. 使用python对文件中的数值进行累加

    问题描述: 一个文件由若干条记录组成,记录的格式为:“num1 num2”,有时候,需要统计文件中num1对应的num2的总值.处理问题的思路 用传说中的python来处理,很方便.几行代码就可以了. ...

  4. python学习-实现用户密码登录，输错三次锁定

    作业需求: 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 实现思路: 判断用户是否在黑名单,若在黑名单,则将用户锁定 判断用户是否存在,若不存在,提示用户不存在 若用户存在,判断登录密码是否 ...

  5. CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\....\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ”

    关于访问asp.net站点出现以下问题的解决办法: 问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Tempora ...

  6. 【BZOJ2908】又是nand 树链剖分+线段树

    [BZOJ2908]又是nand escription 首先知道A nand B=not(A and B) (运算操作限制了数位位数为K)比如2 nand 3,K=3,则2 nand 3=not (2 ...

  7. Quartz数据库脚本

    QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calendar 信息 QRTZ_CRON_TRIGGERS 存储 Cron Trigger,包括 Cron表达式和时区信息  ...

  8. ODBC CRecordSet访问

    一．概述 ODBC 是一种使用SQL 的程序设计接口.使用ODBC 让应用程序的编写者避免了与数据源相联的复杂性.这项技术目前已经得到了大多数DBMS 厂商们的广泛支持. Microsoft Deve ...

  9. TCP协议中的序列号

    TCP 协议工作在OSI的传输层,是一种可靠的面向连接的数据流协议,TCP之所以可靠,是因为它保证了传送数据包的顺序.顺序是用一个序列号来保证的.响应包内也包括一个序列号,表示接收方准备好这个序列号的 ...

  10. 如何用FFmpeg API采集摄像头视频和麦克风音频，并实现录制文件的功能

    之前一直用Directshow技术采集摄像头数据,但是觉得涉及的细节比较多,要开发者比较了解Directshow的框架知识,学习起来有一点点难度.最近发现很多人问怎么用FFmpeg采集摄像头图像,事实 ...