DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前。先简单说明一下什么叫盒子模型。
原理：
特点：
以下这幅图里面，各自是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盒子）的更多相关文章
- DIV+CSS两种盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...
- 盒子模型 W3C中和IE中盒子的总宽度分别是什么
W3C盒模型 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margi ...
- CSS两种盒子模型：cntent-box和border-box
cntent-box 平时普通盒子模型,padding,border盒子会变大,向外扩展border-box 特殊盒子模型,padding,border盒子会变大,向内扩展
- css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）
原文:css两种动态显示星星等级的比较(一星.两星.三星.四星.五星) 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道两种实现方式 1.background-position加上一张 ...
- JMS两种消息模型
前段时间学习EJB.接触到了JMS(Java消息服务),JMS支持两种消息模型:Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub),即点对点和公布订阅模型. ...
- 两种Tensorflow模型保存的方法
在Tensorflow中,有两种保存模型的方法:一种是Checkpoint,另一种是Protobuf,也就是PB格式: 一． Checkpoint方法: 1．保存时使用方法: tf.train.Sav ...
- 以两种异步模型应用案例，深度解析Future接口
摘要:本文以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类. 本文分享自华为云社区<[精通高并发系列]两种异步模型与深度解析Future接口(一) ...
- 【高并发】两种异步模型与深度解析Future接口
大家好,我是冰河~~ 本文有点长,但是满满的干货,以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类,希望大家踏下心来,打开你的IDE,跟着文章看源码,相 ...
- CSS的两种盒模型
盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...
随机推荐
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- 关于vue自定义事件中，传递参数的一点理解
例如有如下场景 先熟悉一下Vue事件处理 <!-- 父组件 --> <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...
- conda常用命令，如何在conda环境中安装gym库？
查看已安装的环境: conda info -e 或 conda env list 创建新环境gymlab: conda create -n gymlab python=3.5 激活环境gymlab: ...
- 洛谷 P1352 没有上司的舞会 (树上不相邻点权和最大)
一颗树,选取不相邻的点,求最大点权值 因为当前结点选或不选后后效性,所以我们加一唯来取消后效性 表示以i为根的树且i不选的最大价值 表示以i为根的树且i选的最大价值 显然有 #include<c ...
- unity gitignore
/[Ll]ibrary/ /[Tt]emp/ /[Oo]bj/ /[Bb]uild/ /[Bb]uilds/ /Assets/AssetStoreTools* # Autogenerated VS/M ...
- 安卓Gallery配合ImageSwitcher不显示图片
Gallary装的是缩略图(thumb),ImageSwitcher装的是大图. 不显示图片的一个可能原因是gallery没设置代理器,另一个原因是没使用相对布局. GalleryActivity.j ...
- JAVA 不同类载入器命名空间的理解
曾经一直有这样一个疑惑: 都说在JAVA中,由不同类载入器载入的类在虚拟机中位于不同的命名空间下,不同命名空间下的类相互不可见. 这让我产生了一个迷惑:假设有一个类A使用了ja ...
- 服务器无法远程管理客户端”计算机配置"解决方法
1.确认是否可ping 通 如无法ping通, 在入门规则中找到“文件和打印机共享(回显请求-ICMPv4-In)”,设定为启用(配置文件为:域) 2. 打开139端口 1.2在防火墙中设置如下:
- BZOJ2137: submultiple(生成函数，二项式定理)
Description 设函数g(N)表示N的约数个数.现在给出一个数M,求出所有M的约数x的g(x)的K次方和. Input 第一行输入N,K.N表示M由前N小的素数组成.接下来N行,第i+1行有一 ...
- js编码方式详解
escape.encodeURI 和encodeURIComponent 的区别 escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码 ...