盒子模型

来源：互联网发布：央视网络客户端手机版编辑：程序博客网时间：2024/05/17 17:15

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：
这里写图片描述

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

　ie 盒子模型
　这里写图片描述
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

　　例：一个盒子的 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 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jquery 做的例子来证实一下。
　　

<html><head><title>你用的盒子模型是？</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">var sbox = $.boxmodel ? "标准w3c":"ie";document.write("您的页面目前支持："+sbox+"盒子模型");</script></head><body></body></html>

　上面的代码没有加上 doctype 声明，在 ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

　　代码2：
　　

你用的盒子模型是标准w3c盒子模型

var sbox = $.boxmodel ? "标准w3c":"ie";document.write("您的页面目前支持："+sbox+"盒子模型");

　　代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”。

　　所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。
　　
这里写图片描述

不同部分的说明：
Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

不能给padding 设定颜色
margin在最外层，因为margin（外边距）一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果
但是如果margin值是以%为单位呢？实际上这时候百分比（%）是相对于该元素的父元素（容器），对于同级元素和父子元素都是如此。

http://www.cnblogs.com/wangjian8888/p/6127519.html
讲解margin属性

0 0