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. android 滚动条

    ScrollView简单应用 activity中经常只是一个LinearLayout,但这样的话,如果activity内容超过一屏,无法滚动查看下面的内容. 这时只需在外面嵌套一个ScrollView ...

  2. 个人VIM配置文件

    个人使用vim配置,安装YCM(YouCompleteMe,jedi, vundle等插件),具体的配置如下: execute pathogen#infect() syntax on filetype ...

  3. IKAnalyzer使用停用词词典进行分词

    @Test // 測试分词的效果,以及停用词典是否起作用 public void test() throws IOException { String text = "老爹我们都爱您.&qu ...

  4. 好用的DNS服务器推荐

    DNS在平时上网中扮演重要角色,如果不注意DNS的话,可能会导致网速慢.弹窗广告.网址打不开.打开不是自己想要的网站.淘宝客劫持等一系列问题.针对DNS的问题,网络上也有各种DNS平台供用户选择.这里 ...

  5. 为什么Underscore

    Underscore是什么? Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白 ...

  6. android开发时间和日期的代码实现工具类(一)

    android开发时间和日期工具类的代码实现: package com.gzcivil.utils; import android.annotation.SuppressLint; import an ...

  7. web Form 表单method="get" method="post" 区别

    get和post方法的不同 在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际 ...

  8. Git 和 SVN之间的五个基本区别

    GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果你是一个具有使用SVN背景的人,你需要做一定的思想转换,来适应GIT提供的一些概念和特征.所以,这篇文章的主要目的就是 ...

  9. HTML1网页三部份内容

    网页三部份内容:HTML CSS Javascript 路径:一般做网页的时候用的相对路径. images/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找aaa.jpg ...

  10. jQuery二级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...