盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"OK~！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图 什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不 会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜材料做成的，边界就是该盒子与其它东西要保留多大距离。 子模型（Box Model）是从CSS诞生之时便产生的一个概念，对网页中的大部分对象，实际呈现形式就是一个盒子形状对象（即块状对象），对于这个基础又重要的概念，只要掌握盒子模型的尺寸及占位的标准技术方法，那就可以灵活驾驭盒子模型了！
CSS盒子模型
网页设计中的每个元素都是长方形的盒子。怎样精确的计算盒子的尺寸？请看下面一幅图：
盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
如果你是一个Firebug的用户，就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。
注意到上面两个例子中，margin都是白的，margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的：
Width | width + padding-left + padding-right + border-left + border-right |
Height | height + padding-top + padding-bottom + border-top + border-bottom |
| |
值为声明的情况
如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)。
如果未声明盒子的width(而且这个盒子是一个块级元素)，那么事情就变得有点怪异，我们先看这点，然后再看一下其他优秀的关于盒子模型的资料。
块级盒的默认宽度
如果没有声明宽度，而且盒子是静态或者相对定位，那么宽度将保持100%且padding和border将向内推动而不是向外扩展。
如果明确的确定宽度为100%，那么padding就会向外扩展。
从这个例子可以看出，盒子的默认宽度并不是100%，也可能是其他值，应该了解这种特别有价值的情况，因为在现存的很多情况下，它对于设置/不设置宽度是很多帮助的。
我遇到的最大的麻烦就是 textarea(文本框) 元素了，它们需要设为宽度为所需的”cols”属性，并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%，但有 padding 时，就会延 展 textarea 的宽度。固定宽度环境下，通常可以设置为合适的像素值宽度，但是变宽情况就没那么幸运了。
无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。
这种情况会持续到盒子的宽度达到父元素宽度的 100%（最近的相对定位的父元素或者浏览器窗口），然后就会折行。
对盒子来说，垂直扩展以适应包含的内容是很自然的。值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有很多怪癖。
无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽度（其父元素不必是相对定位的）。由于这些无宽度盒 子的脆弱性，我们要学到的是关键任务模式的时候它们是不能依赖的，像总体页面布局中。如果浮动一列作为侧边栏使用，并指望那些内部元素（如图片）来负责包 含它的宽度，你就是在自麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子，但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形，它们也可以像其它盒子一样有 margin, padding 和 border。
折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边，但是只在第一行有效，因为那是盒子的起点。padding 正常的应用在文本的上部或下部，当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。 通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：
以下为引用的内容：
阈值分割法<body><div id="box1">1</div><div id="box2">2</div><div id="box3">3</div></body>
容器的排列
在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功
能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。
在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。
水平分布和垂直分布
我们可以通过 box-orient 属性指定容器的分布轴，当这个属性的值为 vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为 inline-axis ）。在本文的第一个例子里我使用了以下的 CSS ：
以下为引用的内容：
#exemple1 .content{-moz-box-orient : horizontal;-webkit-box-orient : horizontal;box-orient : horizontal;}#exemple1 .boite{-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;}
具体的效果可以看这个 DEMO ，三个子 Div 容器都横向并列了。
注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的 BUG ，没人会这样做。
反序排列
box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的，但现在通过 box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 阎锡山日记级元素显示在左边。
但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。
在第二个例子里，我使用了以下的 CSS ：
以下为引用的内容：
#exemple2 .content{-moz-box-orient : vertical;-moz-box-direction : reverse;-webkit-box-orient : vertical;-webkit-box-direction : reverse;box-orient : vertical;box-direction : reverse;
}#exemple2 .boite{-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;}
效果大家可以看这个 DEMO。可以发现，在不改变 HTML 结构的情况下，容器的排列顺序改变了。
按指定顺序排列
我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 黄金第一案为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1 ，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的 CSS ：
以下为引用的内容：
#exemple3 .content{-moz-box-orient : vertical;-moz-box-direction : reverse;-webkit-box-orient : vertical;-webkit-box-direction : reverse;box-orient : vertical;box-direction : reverse;}国家意志#exemple3 .boite{-moz-box-flex : 1;-webkit-box-flex : 1;box-flex : 1;}#exemple3 .v1{-moz-box-ordinal-group : 2;-webkit-box-ordinal-group : 2;box-ordinal-group : 2;}sre#exem
ple3 .v2{-moz-box-ordinal-group : 2;索道门-webkit-box-ordinal-group : 2;box-ordinal-group : 2;}#exemple3 .v3{-moz-box-ordinal-group : 1;-webkit-box-ordinal-group : 1;box-ordinal-group : 1;}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议