margin的解析逻辑

在 margin 中 top、right、bottom、left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和bottom 的参考线属于另一类。

那他们到底各以什么为参考线呢?top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移;

left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。

right 以元素本身的 border 右边为参考线水平向右位移;

bottom 以元素本身的border 下边为参考线垂直向下位移。

从上我们可以看到 top 和 left 都是以外元素为参考,而 right 和 bottom 以本元素为参考。

上面的位移方向是指 margin 数值为正值时候的情形,如果是负值则位移方向相反。

物理大小指的是除去 margin,也就是包含 border 以内的 box 大小,而逻辑大小,则是 box 通过 margin 解析规则解析后得到的大小(这或许可以解释为什么IE5会错误解析盒模型)。

结论:(当元素设置宽度之后)

box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。

而负的 margin 值不会影响 box 的实际大小,如果是负的 top 或 left 值会引起 box 的向上或向左位置移动,

如果是 bottom 或 right 只会影响下面 box 的显示的参考线。

 如果元素没有设置宽度,则margin负值会改变box的宽度

来自:

http://www.planabc.net/2007/03/18/css_attribute_margin/

http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

margin-----总结----解析逻辑的更多相关文章

  1. 由浅入深漫谈margin属性1

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情 ...

  2. 【转】深入理解margin

    由浅入深漫谈margin属性 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元 ...

  3. 由浅入深漫谈margin属性

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin 属性包括 margin-top, ma ...

  4. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  5. mybatis 3.x源码深度解析与最佳实践(最完整原创)

    mybatis 3.x源码深度解析与最佳实践 1 环境准备 1.1 mybatis介绍以及框架源码的学习目标 1.2 本系列源码解析的方式 1.3 环境搭建 1.4 从Hello World开始 2 ...

  6. (转载)spring mvc DispatcherServlet详解之一---处理请求深入解析

    要深入理解spring mvc的工作流程,就需要先了解spring mvc的架构: 从上图可以看到 前端控制器DispatcherServlet在其中起着主导作用,理解了DispatcherServl ...

  7. spring mvc DispatcherServlet详解之一---处理请求深入解析

    要深入理解spring mvc的工作流程,就需要先了解spring mvc的架构: 从上图可以看到 前端控制器DispatcherServlet在其中起着主导作用,理解了DispatcherServl ...

  8. SAX方式解析XML

    sax解析分为以下几步: 1 获取一个saxparserfactory 2 获取一个解析器 3 创建handler对象,这个myHandler是继承了DefaultHandler的一个类,这个实现类里 ...

  9. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

随机推荐

  1. slf4j 搭配 log4j2 处理日志

    目录 关于 log4j 关于 slf4j 案例使用 关于 log4j Log4j + Slf4j 的使用组合最为常见,但是我们知道 Log4j 目前已经停止更新了.Apache推出了新的 Log4j2 ...

  2. 《Java虚拟机原理图解》1.3、class文件中的访问标志、类索引、父类索引、接口索引集合

    讲完了class文件中的常量池,我们就相当于克服了class文件中最麻烦的模块了.现在,我们来看一下class文件中紧接着常量池后面的几个东西:访问标志.类索引.父类索引.接口索引集合. 1. 访问标 ...

  3. 使用SmartQQ实现的智能回复(Web QQ协议)

    采用SmartQQ SDK进行开发,官网:https://github.com/ScienJus/smartqq 此项目只是集成使用的方法,在com.jsoft.robot.SmartQQUse.Re ...

  4. sql中Cast()函数的用法

    一.MYSQL 只需要一个Cast()函数就能搞定.其语法为:Cast(字段名 as 转换的类型 ),其中类型可以为: BINARY[(N)]CHAR[(N)] 字符型DATE  日期型DATETIM ...

  5. 【Todo】Spark运行架构

    接上一篇:http://www.cnblogs.com/charlesblc/p/6108105.html 上一篇文章中主要参考的是 Link 这个系列下一篇讲的是Idea,没有细看,又看了再下一篇: ...

  6. 进程间通信之-信号signal--linux内核剖析(九)

    信号及信号来源 什么是信号 信号是UNIX和Linux系统响应某些条件而产生的一个事件.接收到该信号的进程会对应地採取一些行动.通常信号是由一个错误产生的. 但它们还能够作为进程间通信或修改行为的一种 ...

  7. C++中的数组array和vector,lambda表达式,C字符串加操作,C++中新类型数组(数组缓存),多元数组,new缓冲

     使用C++风格的数组.不须要管理内存. array要注意不要溢出,由于它是栈上开辟内存. array适用于不论什么类型 #include<iostream> #include< ...

  8. function 之 arguments 、call 、apply

    1.arguments arguments.length为函数实参个数,arguments.callee引用函数自身. arguments他的特性和使用方法 特性: arguments对象和Funct ...

  9. 性能測试JMeter趟的坑之JMeter的bug:TPS周期性波动问题

    先说下问题: 我在做性能測试时,使用JMeter搞了100个并发,以100TPS的压力压測十分钟,但压力一直出现波动.并且出现波动时JMeter十分卡,例如以下图: 周期性TPS波动 各种猜測: 所以 ...

  10. Redis实现分布式锁(Set和Lua)

    转载:https://www.cnblogs.com/linjiqin/p/8003838.html 前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于Z ...