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. Linux下多核环境Erlang的SMP測试

    目标 (1)       了解在多核cpu环境下,erlang并发进程调度对各个cpu核负载的影响: (2)       Erlang虚拟机的内存添加机理: (3)       Erlang进程的调度 ...

  2. ORA-03113 通信通道的文件结尾(ORA-19804 ORA-16038-归档空间满的处理方法)

    1.数据库启动报错SQL> startupORACLE 例程已经启动. Total System Global Area 1887350784 bytesFixed Size 2176848 b ...

  3. 【MFC学习笔记-作业5-小数据库】【单选框，复选框，滚动条，列表框】

    界面已经实现完毕. 要完成的操作就是1.性别分组(2选1) 2.属性勾选 3.年龄通过滚动条调整 4.职称通过下方的列表框选择 5.输入姓名 6.存入左方的列表框 7.当选择左方列表框的人时,可以显示 ...

  4. 【泛化物品】【HDU1712】【ACboy needs your help】

    ACboy needs your help Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. git创建分支

    1.创建本地分支名称为dev的本地分支 git branch dev 2.将本地分支添加到远程分支 git push origin dev 3.查看创建的本地分支, 带有*符号的分支,代表当前所在分支 ...

  6. web.config configSections自定义section

    1.web.config 配置文件设置 <configSections> <!-- For more information on Entity Framework configur ...

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

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

  8. scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...

  9. docker 私有仓库内容

    docker:/root# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES eb6d0ef3b9e2 linux123 ...

  10. linux下安装配置svn独立服务器

    subversion(以下简称svn)是近年来崛起的版本管理工具,是cvs的接班人. svn服务器有2种运行方式:独立服务器和借助apache.2种方式各有利弊. file:/// 直接版本库访问(本 ...