Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像

W3C 盒子模型的范围包括: margin、border、padding、content,并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 :margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding

例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

  那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

IE盒模型和标准w3c盒模型的更多相关文章

  1. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  2. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  3. 标准W3C盒子模型和IE盒子模型

    标准W3C盒子模型和IE盒子模型   CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...

  4. IE和W3c盒模型

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  5. IE盒模型与W3C盒模型区别

    前两天被人问到,叫我解释一下标准盒模型与IE盒模型,额,当时只能说,知道一点,但是没有深入的去探讨过,所以下来之后就自己写了例子,亲自去验证并且查看了网上的一些资料,现将其整理如下: 一.css盒模型 ...

  6. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  7. w3C盒子模型和IE的盒子模型

    W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...

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

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

  9. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

随机推荐

  1. 为Windows Live Writer添加Code插件

    1.插件效果展示 1: void CDemoDlg::OnBnClickedNmdlg() 2: { 3: CNonModeDlg *pDlg = new CNonModeDlg();// 创建一个C ...

  2. BootstrapValidator demo

    source:http://bv.doc.javake.cn/api/ BootstrapValidator is the best jQuery plugin to validate form fi ...

  3. jsonp突破同源策略,实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  4. extends && implements

     final声明的类不能被继承 方法的重写(@Override):  两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型(java里无论怎样都对) 子类抛出异常小于等于 ...

  5. 文件上传Apache

    Map<String, Object> rtnMap = new HashMap<String, Object>(); // 获取文件 String tempPath = re ...

  6. [SCOI 2007] 修车

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1070 [算法] 首先 , 我们发现 , 在倒数第i个修车会对答案产生i * k的贡献 ...

  7. saltstack源码-启动3-config.py配置文件加载

    #目标文件位置/usr/lib/python2.6/site-packages/salt/config.py#这个文件加载配置文件的模块.master和minion的配置文件加载都是在这个模块里面完成 ...

  8. JS获得本月的第一天和最后一天

    <script> //本月第一天  function showFirstDay()  {      var Nowdate=new Date();      var MonthFirstD ...

  9. 【411】COMP9024 Assignment1 问题汇总

    1. 构建 Makefile 文件后运行错误,undefined reference to 'sqrt' 实际上是没有链接math数学库,所以要 $gcc test.c –lm //-lm就是链接到m ...

  10. (转)C#中数组、ArrayList和List三者的区别

    原文地址:http://blog.csdn.net/zhang_xinxiu/article/details/8657431 在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到 ...