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. leetcode_question_130 Surrounded Regions

    Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...

  2. Material Design之FloatingActionButton的使用

    FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性. CoordinatorLayout能够用来配合Flo ...

  3. js正则判断电话/手机/邮箱/

    用途:校验ip地址的格式 输入:strIP:ip地址返回:如果通过验证返回true,否则返回false:*/ function isIP(strIP) { if (isNull(strIP)) ret ...

  4. [Linked List]Palindrome Linked List

    Total Accepted: 29652 Total Submissions: 117516 Difficulty: Easy Given a singly linked list, determi ...

  5. 2013ACM-ICPC亚洲区南京站现场赛G题

    题目大意:一个n维的系统中随机选一个向量(X1,X2,X3,...,Xn),其中0<=Xi<=R,且X1^2+X2^2+X3^2+……+Xn^2 <= R^2. 现在给定n,R.求X ...

  6. QT5中的pro文件中为何要加入"QT += widgets"

    在pro文件里写"QT+=widgets"表示引入QtWidget这个module,qmake在生成makefile的时候,会设置好include path 和 lib path, ...

  7. oracle group by 使用

    SELECT supplier_id, max(evidence_date) AS evidence_date,max(TD_SUPPLIER_EVIDENCE_INFO_ID) AS TD_SUPP ...

  8. Android周笔记(9.8-14)(持续更新)

    本笔记记录一周内的小知识点和一些心学习的Demo. 1.PopupWindow: new 一个activity_pop_window:id为popwindow的Button,id为hello123的T ...

  9. struts项目中添加的jar包

    一般我们使用struts时,添加的jar如下: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar freemarker-2.3.16.jar java ...

  10. Centos查看端口占用情况和开启端口命令

    Centos查看端口占用情况命令,比如查看80端口占用情况使用如下命令: lsof -i tcp:80 列出所有端口 netstat -ntlp 1.开启端口(以80端口为例)方法一: /sbin/i ...