html盒⼦嵌套教程，深⼊讲解CSS中盒模型的⽤法
视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理⽂档树中的元素，从⽽将(X)HTML转化成制作者设计的样⼦。
例如：
如何⽣成元素框；
padding是外边距还是内边距
处理各元素之间的关系；
根据框的尺⼨、定位等CSS属性来确定元素的位置等；
因此，要掌握使⽤CSS控制页⾯内元素的技巧，就需要深⼊了解框模型(Box Model)及视觉格式化模型的原理。
⽂档树中的元素都产⽣矩形的框(Box)，这些框影响了元素内容之间的距离、元素内容的位置、背景图⽚的位置等等。⽽浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样⼦。
视觉格式化模型中也有“布局(layout)”的概念，但是这个与页⾯设计经常⽤到的类似“3⾏2列”或者“3⾏3列”中的“排版布局”的概念不同，视觉格式化模型中的“布局”是指每个元素该如何来显⽰。
CSS 2.1中，⼀个控制框的布局可以根据三种定位⽅案：
常规流向。CSS 2.1中，常规流向包含块框的块格式化，⾏内框的⾏内格式化，块框或⾏内框的相对定位，以及插⼊框的定位。
浮动。在浮动模型中，⼀个框⾸先根据常规流向布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以排列在⼀个浮动的边上。
绝对定位。在绝对定位模型中，⼀个框整个地从常规流向中脱离(它对后续的兄弟元素没有影响)，并根据包含块来分配其定位。
在理解视觉格式化的概念之前，要明确⼀点：包含块(Containing Block)是视觉格式化模型的⼀个重要概念，它也可以理解为⼀个矩形，⽽这个矩形的作⽤是为它⾥⾯包含的元素提供⼀个参考，元素的尺⼨和位置的计算往往是由该元素所在的包含块决定的。
框模型(Box model，也译作“盒模型”)是CSS⾮常重要的概念，也是⽐较抽象的概念。
⽂档树中的元素都产⽣矩形的框(Box)，这些框影响了元素内容之间的距离、元素内容的位置、背景图⽚的位置等等。⽽浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样⼦。
因此，要掌握使⽤CSS布局的技巧，就需要深⼊了解框模型和视觉格式化模型的原理。
浏览器内显⽰的元素都可以看作是⼀个装了东西的矩形的盒⼦，这些矩形的盒⼦嵌套、叠加或者并列在⼀起，形成了页⾯。
提⽰：“box model”往往被译为“盒模型”。但是盒⼦是具有厚度的，也就是说盒⼦是三维的，⽽框则没有厚度，是⼆维的，因此本书采⽤了“框模型”这个译法。
图1显⽰了每⼀个元素的“框(Box)”由⼏部分组成：
内容(content)
例如：⽂字、图⽚或者其他元素等，内容也可以看作是⼀个长⽅形的框，width(宽度)和height(⾼度)2个CSS属性设定的就是内容框的宽度和⾼度。
边框(border)
边框(也译为边界)是可以具体显⽰出来的，可以设定宽度、外观样式和颜⾊。
补⽩(padding)
补⽩(也译为填充、内边距、内补丁等)是内容框与边框之间的距离，补⽩部分显⽰的是背景。
边距(margin)
边距(也译为边⽩、外边距、外补丁等)是边框外的透明区域，⽤来设定本元素与其它元素之间的距离。
⼀个元素框，⼜有上、右、下、左四个⽅向的边，如图2所⽰。
由图2⼤家可以发现，1个元素所占的区域其实是由⼏个矩形框组成：元素的内容框、补⽩形成的框、元素的边框以及边距形成的框。这些框的边缘⼜有如下定义：
元素内容框的边缘，称为“内容边(content edge)”或“内边(inner edge)”，4条内容边形成“内容框(content box)”。
补⽩形成的框的外边缘，称为“补⽩边(padding edge)”，补⽩边围绕框的补⽩。如果补⽩宽度为0，则
补⽩边和内容边重合。4条补⽩边形成“补⽩框(padding box)”。
边框形成的框的外边缘，称为“边框边(border edge)”。如果边框宽度为0，则边框边和补⽩边重合。4条边框边形成“边框框(border box)”。
边距形成的框的外边缘，称为“边距边(margin edge)”或“外边(outer edge)”，边距边围绕框的边距。如果边距宽度为0，则边距边和边框边重合。4条边距边形成“边距框(margin box)”。
内容框的尺⼨(宽度和⾼度)取决于若⼲个因素，例如：
产⽣框的元素是否设定了width属性或height属性；
框是否包含⽂本或其它框；
框是否是⼀个表格等等。
例如下列代码(查看实例)其内容框与框之间的关系，如图3、图4所⽰。
CSS Code复制内容到剪贴板
* {margin:0;padding:0;color:#666;}/* 清除浏览器默认的样式 */
div {border:4pxsolid#F90;background:#FC6;}
ul {list-style:none;margin:10px;padding:10px;background:#FC6;}
li {padding:10px010px10px;background:#FF9;margin:15px;}
.sample {margin-right:0;border:5pxdashed#F90;}
第1个li⾥⾯的⽰例⽂字⽰例⽂字
第2个li⾥⾯的⽰例⽂字
ul下⾯的div
由图3和图4，我们可以发现：
元素的框宽度 = 左边距(margin-left) + 左边框宽(border-left-width) + 左补⽩(padding-left) + 内容宽度(width) + 右补⽩(padding-right) + 右边框宽(border-right-width) + 右边距(margin-right)
元素的框⾼度 = 上边距(margin-top) + 上边框宽(border-top-width) + 上补⽩(padding-top) + 内容⾼度(height) + 下补⽩(padding-bottom) + 下边框宽(border-bottom-width) + 下边距(margin-bottom)
提⽰：关于margin在垂直⽅向重叠的情况，请参见本章[8.9.2.2 边距的重叠]⼀节。
在IE 5.5及更早的版本，以及在怪异模式中的IE 6.0/7.0中，会错误地将框模型理解为：
width = border-left + padding-left + 内容宽度 + padding-right + border-right
height = border-top + padding-top + 内容⾼度 + padding-bottom + border-bottom
也就是说，错误的框模型把width和height理解为边框框的宽度和⾼度，⽽不是内容框的。(当然，很多⼈都认为这样的设定更容易计算布局的尺⼨。)
例如下列代码：
XML/HTML Code复制内容到剪贴板
div { width:300px; margin:10px; padding:15px; border:5px solid #ccc;}
则div的框宽度应为360px(10px + 5px + 15px + 300px + 15px + 5px +10px)，⽽在IE的错误框模型中，框的宽度为320px(10px + 300px +10px)，实际的内容宽度为260px(300px – 15px*2 – 5px*2)。
因此会造成元素尺⼨显⽰的不正确。
提⽰：在CSS 3中，制作者可以通过“box-sizing ”属性来指定width和height的值应⽤在内容框或者边框框上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。