在辨析两种盒子模型之前。先简单说明一下什么叫盒子模型。

原理：

先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们能够把它转移到我们日常生活中的盒子（箱子）上来理解。日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点：

每一个盒子都有：边界、边框、填充、内容四个属性。
每一个属性都包含四个部分：上、右、下、左。这四部分可同一时候设置。也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又能够理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的。边界就是该盒子与其他东西要保留多大距离。（以上原理与特点摘于百度）



以下这幅图里面，各自是W3C盒子和IE盒子的模型：



大家肯定都能发现。这两种模型总体来说很的相似。由内到外都是content,padding,border,margin。

可是细致看的话，虚线延长出来的部分，分别标注了height和width，可是在W3C中，虚线包围的部分仅仅有content。而在IE中，虚线包围的部分是content+padding+border。

这是最直观的不同。同一时候这也就是这两种模型的最大不同点。

W3C 盒子模型的范围包括 margin、border、padding、content，而且 content 部分不包括其它部分

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包括了 border 和 padding



用一个样例来实现一下W3C盒子模型:

<html>

		<head>

				<title>盒子模型</title>

				<style>

						#box{

								width:100px;

								height:100px;

								padding:40px;

								border:solid 40px green;

								margin:20px;

						}

						div{

								font-size:30px;

								color:red;

								background-color:gray;

								text-align:center;

						}

				</style>

		</head>

		<body>

				<div id="box">

						W3C盒子模型

				</div>

		</body>

</html>

执行结果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

这张图仅仅能看到内容和边框。看不到详细的分界线，也就不知道填充（padding）和内容（content）详细的排布。

这里我就顺便介绍一中调试工具，firefox浏览器里面的firebug，对于平时调试网页布局各方面的有非常大的帮助。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

调试界面就是这样了。鼠标选中<div>标签，图像就发生变化了。总体布局就非常清晰了。

（例如以下图）



这就非常清晰了吧。同一时候也说明了W3C盒子包括了content，padding，border三部分。

IE盒子的就不写了，有须要的同学能够自己试试。眼下大多的网页布局都是用W3C盒子，它的兼容性很好。所以是不二之选。

DIV+CSS两种盒子模型（W3C盒子与IE盒子）的更多相关文章

  1. DIV+CSS两种盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...

  2. 盒子模型 W3C中和IE中盒子的总宽度分别是什么

    W3C盒模型 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margi ...

  3. CSS两种盒子模型：cntent-box和border-box

    cntent-box 平时普通盒子模型,padding,border盒子会变大,向外扩展border-box 特殊盒子模型,padding,border盒子会变大,向内扩展

  4. css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）

    原文:css两种动态显示星星等级的比较(一星.两星.三星.四星.五星) 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道两种实现方式 1.background-position加上一张 ...

  5. JMS两种消息模型

    前段时间学习EJB.接触到了JMS(Java消息服务),JMS支持两种消息模型:Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub),即点对点和公布订阅模型. ...

  6. 两种Tensorflow模型保存的方法

    在Tensorflow中,有两种保存模型的方法:一种是Checkpoint,另一种是Protobuf,也就是PB格式: 一． Checkpoint方法: 1．保存时使用方法: tf.train.Sav ...

  7. 以两种异步模型应用案例，深度解析Future接口

    摘要:本文以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类. 本文分享自华为云社区<[精通高并发系列]两种异步模型与深度解析Future接口(一) ...

  8. 【高并发】两种异步模型与深度解析Future接口

    大家好,我是冰河~~ 本文有点长,但是满满的干货,以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类,希望大家踏下心来,打开你的IDE,跟着文章看源码,相 ...

  9. CSS的两种盒模型

    盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...

随机推荐

  1. Redis报错 : (error) NOAUTH Authentication required.

    原文:Redis报错 : (error) NOAUTH Authentication required. 这个错误是因为没有用密码登陆认证 , 先输入密码试试 . 127.0.0.1:6379> ...

  2. 【Henu ACM Round#20 A】 Fancy Fence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 看看有没有(n-2)*180/n等于输入的a就好. [代码] #include <bits/stdc++.h> usin ...

  3. [Python] Boolean Or "Mask" Index Arrays filter with numpy

    NumPy Reference: Indexing Integer array indexing Boolean array indexing Note: The expression a < ...

  4. 翻翻git之---炫酷的自己定义翻滚View TagCloudView

    转载请注明出处:王亟亟的大牛之路 周一好,又到了每周最困的一天.近期都被啮齿类动物搞的累死,废话不多,今天上一个自己定义的ViewGroup实现一个3D球形集合. 效果图: 效果还不错,能够作为短小文 ...

  5. POJ 1887 Testingthe CATCHER (LIS:最长下降子序列)

    POJ 1887Testingthe CATCHER (LIS:最长下降子序列) http://poj.org/problem?id=3903 题意: 给你一个长度为n (n<=200000) ...

  6. BZOJ5029: 贴小广告 & BZOJ5168: [HAOI2014]贴海报

    [传送门:BZOJ5029&BZOJ5168] 简要题意: 给出m段区间l[i],r[i],表示l[i]到r[i]的数全部变成i,求出最后有多少种不同的数 题解: 线段树+离散化 这是一道经典 ...

  7. 【实用篇】Android之应用程序实现自动更新功能

    我个人用的是友盟提供的自动更新组件,因此在这里只描述如何实用友盟提供的组件来完成程序的自动更新,步骤如下: 1.登录友盟官网,点击注册一个友盟账号. 2.注册成功后将会自动进入到添加新应用界面,选择添 ...

  8. SCOPE_IDENTITY()和 SELECT @@IDENTITY 的用法

    这俩个,是在插入数据的时候使用,返回刚刚插入数据行的ID 大家慎用@@IDENTITY,而尽量采用 SCOPE_IDENTITY() 函数替换之. SCOPE_IDENTITY()  也是得到最后一条 ...

  9. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  10. OpenGL常见错误之——glut.h文件的函数无法正常连接

    glut.h文件的函数无法正常连接,典型的错误如下:------ 已启动生成: 项目: gears, 配置: Debug Win32 ------1>正在链接...1>GEARS.obj ...