盒子模型:一个物体在页面中所占据的位置

盒子模型包含以下几种元素:

padding;margin;content;border

这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的;这是俩种标准

Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准

下面我用公式来说明一下:

W3C:

宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right) 
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)

IE盒子模型:

:

宽=width+(border-left)+(border-right) 
高=height+(border-top)+(border-bottom)

盒子模型(W3C盒子模型、IE盒子模型)的更多相关文章

  1. 盒子模型 W3C中和IE中盒子的总宽度分别是什么

    W3C盒模型 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margi ...

  2. IE、W3C两种CSS盒子模型

    利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都 ...

  3. W3C标准下的盒模型与IE盒模型

    标准盒模型如下图所示: IE下盒模型如下图所示:

  4. 隐马尔科夫模型HMM(一)HMM模型

    隐马尔科夫模型HMM(一)HMM模型基础 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比 ...

  5. 生成模型(Generative)和判别模型(Discriminative)

    生成模型(Generative)和判别模型(Discriminative) 引言    最近看文章<A survey of appearance models in visual object ...

  6. 什么是领域模型(domain model)?贫血模型(anaemic domain model) 和充血模型(rich domain model)有什么区别

    http://blog.csdn.net/helloboat/article/details/51208128 领域模型是领域内的概念类或现实世界中对象的可视化表示,又称为概念模型或分析对象模型,它专 ...

  7. 将 ExpressRoute 线路从经典部署模型转移到 Resource Manager 部署模型

    本文概述将 Azure ExpressRoute 线路从经典部署模型转移到 Azure Resource Manager 部署模型的效果. Azure 当前使用两种部署模型:Resource Mana ...

  8. Hadoop MapReduce Task的进程模型与Spark Task的线程模型

    Hadoop的MapReduce的Map Task和Reduce Task都是进程级别的:而Spark Task则是基于线程模型的. 多进程模型和多线程模型 所谓的多进程模型和多线程模型,指的是同一个 ...

  9. thinkphp模型事件(钩子函数:模型中在增删改等操作前后自动执行的事件)

    thinkphp模型事件(钩子函数:模型中在增删改等操作前后自动执行的事件) 一.总结 1.通过模型事件(钩子函数),可以在插入更新删除等前后执行一些特定的功能 2.模型事件是写在模型里面的,控制器中 ...

随机推荐

  1. zk textbox 更改字体大小及高度

    .z-textbox{ height:100px; font-size:30px; padding:20px; } <textbox/> 效果如下:

  2. Matlab的标记分水岭分割算法

    1 综述 Separating touching objects in an image is one of the more difficult image processing operation ...

  3. ArithUtil工具类 : 精确计算各种运算

    package com.autoserve.mh.common.util;   import java.math.BigDecimal; import java.text.DecimalFormat; ...

  4. PHP 使用 password_hash() 给密码加密

    PHP >= 5.5 时,可以使用 password_hash() 和 password_verify() 来对用户的密码进行加密和验证,例如在用户注册(加密存储)和登陆(验证): <?p ...

  5. Swift利用协议优化NSNotificationCenter

    NSNotificationCenter存在的问题 通知没有统一的命名格式 对于通知的命名没有强制的要求,一个项目里可能有多种不同的命名规则.比如: 1 2 3 4 5 6 class Barista ...

  6. C++ 支持两种索引的排行榜模板

    version 1: #ifndef RANK_TMPL_H_ #define RANK_TMPL_H_ #include <stdio.h> #include <stdint.h& ...

  7. ORA-29275: partial multibyte character

    查询表报错 修改方式1 和字符集存储方式有关系 ,修改客户端和服务器的字符集存储方害死 修改方式2 修改表的字段由nvarchar2修改为varchar2

  8. web前端程序员真的值这么多钱吗?

    对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...

  9. 成为一个高效的web开发人员,只需要三步

    想成为一名专业的web开发人员并不像你想象的那么容易,开发人员在开发自己的web项目时常常需要牢记很多东西,他们要不断寻找新理念,新创意,在特定时间内开发出高质量的产品,一名优秀的程序员必须明白时间的 ...

  10. 简单的oracle分页语句

    SELECT * FROM ( SELECT rownum rn,te.* FROM (SELECT * FROM  tb_enterprise) te  WHERE rownum <= 10) ...