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. C++ 函数部分(2)

    C++函数的递归调用 函数可以直接或间接地调用自身,称为递归调用.所谓直接调用自身,就是指在一个函数的函数体中出现了对自身的调用表达式,例如: void fun1(void) { //do somet ...

  2. ABAP ALV F4帮助

    ALV F4帮助, 选值保存到ALV. TYPE-POOLS:slis. CLASS lcl_event_receiver DEFINITION DEFERRED. DATA: gt_fcat TYP ...

  3. Android Studio配置完毕Genymotion 看不到Genymotion图标

    没有打开toolBar想要看到genymotion插件图标,AndroidStudio单击视图(view)>工具栏显示工具栏(toolbar)

  4. (1)iOS9完美越狱

    方式一:同步推越狱,其实用的也是方式二 参考:iOS9.3.5不完美越狱(点击跳转) 方式二:使用impactor越狱. 下载地址:http://www.pc6.com/mac/505285.html

  5. Enterprise Architect 生成项目类图

    Enterprise Architect使用教程: https://blog.csdn.net/chenglc1612/article/details/81083151 主要流程 --到此-自动生成完 ...

  6. Evernote相关技术介绍——mysql+lucene+tomcat

    Evernote服务 我们的服务由以下几个组件组成. 分片(NoteStore)   分片是Evernote服务的核心单元,用于存储用户的笔记.每个分片最多可以支撑30万个Evernote用户,并包含 ...

  7. UI:简单的SQL语句

    一.SQL语句如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句1.什么是SQLSQL(structured query language):结构化查询语言SQL是一种对关系型数据库中 ...

  8. 使用maven新建类目录是,报错The folder is already a source folder.的解决办法

    转自:https://www.cnblogs.com/loger1995/p/6539139.html 我们有时候新建一个webapp的maven项目时,生成的目录结构是这样子的: 缺少maven规范 ...

  9. EF include 预先加载

    在asp.net mvc 中,常在控制器中预先加载导航属性,以便在视图中能够显示起关联的数据. 如果不预先加载,View中就会无法呈现外键的 关联数据. 会提示EF 错误发生. 一. 模型: publ ...

  10. Mysql数据库的用户和日志管理

    Mysql数据库的用户和日志管理 数据库的用户管理 1.mysql用户账号管理 用户账号 user@host user:账户名称 host:此账户可通过哪些客户端主机请求创建连接线程,可以是ip.主机 ...