CSS中盒子模型的组成由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。内边距可细分为 padding-top、padding-right、padding-bottom、padding-left；边框可细分为 border-top、border-right、border-bottom、border-left；外边距可细分为 margin-top、margin-right、margin-bottom、margin-left。

对于盒子模型，W3C标准和低版本IE浏览器是不一样的，主要区别是内容部分的width和height的定义不同。我们常说的盒子模型一般指W3C标准的盒子模型。下面对此做一个区分：

如果一个元素各组成部分如下：

margin：10px； border：2px； padding：5px； width：200px；height：100px，那么：

1、W3C标准

内容部分的width就单单指width，height就单单指height

整个盒子模型的宽是： margin*2 + border*2 + padding*2 + width（严格来说是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）

整个盒子模型的高是： margin*2 + border*2 + padding*2 + height（严格来说是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）

如下图

则整个盒子模型的宽是：10px*2 + 2px*2 + 5px*2 + 200px = 234px

则整个盒子模型的高是：10px*2 + 2px*2 + 5px*2 + 100px = 134px

2、低版本IE浏览器（主要是指IE5和（IE6的怪异模式），不过现在这两个版本的浏览器的市场占有率已经很低了）的标准：

内容部分的width和height是把内边距（padding）和边框宽度（border）也算进去

整个盒子模型的宽是： margin*2 + width（严格来说是：margin-left + width + margin-right）

整个盒子模型的高是： margin*2 + height（严格来说是：margin-left + height + margin-right）

如下图

则整个盒子模型的宽是：10px*2 + 200px = 220px

则整个盒子模型的高是：10px*2 + 100px = 120px

如下博文有对W3C标准有更详细的说明：

CSS（10）盒子模型

CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型的更多相关文章

  1. css的标准模型和低版本的IE的盒子模型有什么不同？

    1. css的盒子模型:外边距(margin).内边距(padding).边界(border).内容区(width和height) 标准的css盒子模型与低版本的ie盒子模型的不同:宽高不一样 标准的 ...

  2. 507，介绍一下标准的css盒子模型？低版本ie的盒子模型有什么不同的？

    有两种,IE盒子模型,另外是W3C盒子模型: 盒模型都包括:内容(content),填充(padding),边界(margin),边框(border): 区别:IE的content部分吧border和 ...

  3. 盒模型与在低版本IE下的区别

    对css有一定了解的同学一定听说过盒模型,在这里以我自己的一点儿了解和认知来解释一下盒模型与盒模型在低版本IE浏览器下与其他浏览器下的区别. W3c标准下的盒模型 盒模型由 content(内容),p ...

  4. IE6与W3C标准的盒模型差异

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子 ...

  5. w3c标准盒模型与IE传统模型的区别

    一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...

  6. 精通CSS高级Web标准解决方案（2-1 可视化格式模型之框模型）

    浮动.定位.框模型这些控制在页面上安排和显示元素的方式,形成CSS布局. 盒子模型 页面上的每个元素都被看成一个矩形框. 盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型 ...

  7. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...

  8. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

随机推荐

  1. stage.width/height和stage.stageWidth/stageHeight的区别

    stage.stageWidth和stage.stageHeight就是舞台的宽带和高度 一般默认打开宽带是550,高度是400 那么stage.stageWidth=550,stage.stageH ...

  2. ParNew收集器

    ParNew收集器其实就是Serial收集器的多线程版本,除了使用多条线程进行垃圾收集之外,其余行为包括Serial收集器可用的所有控制参数,其中Par是Paralle简写l 并行(Parallel) ...

  3. css系列教程--color direction line-height letter-spacing

    css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/ ...

  4. HTML网页制作：[12]使用框架结构之frameset

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容. 如图所示: 1.html显示“火影忍者” 2.html显示“英雄联盟” 3.html显示“嵌入式开发.网页开发.安卓开发” 4.html显示 ...

  5. 浅谈：配置本地yum源（centos）

    删除YUM的所有配置信息[root@server yum.repos.d]#rm -rf * 现在手动配置:1.在根目录下创建文件夹centos-yum: [root@server /]#mkdir ...

  6. IOS开发 统计XCODE 代码行数

    如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 find . -name "*.m" -or -name "*.h" -or -nam ...

  7. jquery 实现横向滑动自动切换源码（同时显示多张图片）

    html代码: <!doctype html> <html lang="en"> <head> <meta charset="U ...

  8. ThinkPHP框架研究之一 基本函数 M和D的区别

    http://my.oschina.net/wxweven/blog/56563?fromerr=32n4Nf7V https://segmentfault.com/q/101000000298807 ...

  9. C语言程序设计（翁恺）--第三周课件中的三个遗留点

    刚刚写完第二周遗留点,下面写第三周的 第三周:判断 1.if和else后面也可以没有{}而是一条语句.如果if后不带{},但是后面跟了两条语句,并且后面还有else语句,那么程序会怎么执行? 在Dev ...

  10. Oracle 11g R2安装手册(图文教程)For Windows

    1.Oracle 11g R2安装手册(图文教程)For Windows 1.下载Oracle 11g R2 for Windows版本,下载地址如下 官方网站: http://download.or ...