：css教程：css盒子模型及布局应用

本文主要讲解css 盒子模型及布局，很多 web 前端初学者开始学习 css 选择器（ http://www.maiziedu.com/course/web/421-5342/ ）时，会出现烂用 css 选择器的情况，今天就具体讲解下，先供上一张总结图片供参考。

下面主要谈谈在 CSS 中的基本盒子模型。盒子，是页面中元素呈现的基本样式模型。是每一个元素标签在页面上的呈现。对应 HTML 中的块级元素和行内元素，那么有两类盒子，一类是块级元素的块级盒子：默认占据一行，可以指定显式的宽度和高度，每个盒子单独占一行后自动换行；另一类是行内元素的行内盒子，它不可指定宽度，自动包裹住内容宽度，并且在一行内并排显示，只有排列不下的情况下才会被 “ 挤 ” 到下一行，并不自动换行。大部分的标签元素的显示，都是块级盒子，少量如 span 、 img 是行内盒子。

那么，每个盒子具体是什么样子的，又有哪些基本 CSS 属性呢？下面是一个基本盒子的图样，以及对应的属性总结：

当涉及到外边距、边框、 outline 、内边距的属性书写的时候，会有简写的情况，这时候记住：
1 、数值一次性书写，其顺序是从 top 开始，顺时针表示  top 、 right 、 bottom 、 left 。
2 、因为这些都是矩形，所以，如果对应的数值如果缺失，缺失的那一边就采用对面边的数值。如果只有一个数值，那就表示四个边都是同一个数值。
         了解了页面元素的呈现都是一些盒子的排列，和具体盒子的属性设置，我们可以简单的看看一个页面是怎么布局的了。我们来看个实际的页面：

我们把这个页面来分析一下，可以看出这个页面是下面这几个大的盒子形成的。 简单而言，这有一个顶部固定的标题栏，然后下面是自动居中的 WarpBOX 包裹层，在这个里面有三个固定宽度的栏目。具体再到里面的盒子，还有各种不同的小盒子在里面。如何应用基本盒子的属性，完成这样的页面样式，这就是基本的页面布局。我们可以来分析下最基础的几种布局模型：
一、单列布局

首先，我们对 body 元素予以内外边距都设定成 0px ，这样可以使页面紧贴浏览器窗口。然后我们设置一个 mainWarp 的大盒子作为内容包裹层，我们要使这个盒子实现左右居中的效果，可以对其的 margin 属性定义为 0,auto ； 。 这样，这个盒子就会上下贴住 body ，左右外边距由浏览器自动计算，实现居中的效果。
二、双列布局

     两个盒子， divLeft 和 divRight ，都是块级盒子，默认情况下是按照标准文档流会上下排列的。我们需要对这两个盒子设定显式的宽度，然后让他们并排排列在一行，怎么实现呢？可以用元素的 float 和 clear 属性。首先，对需要并排排列的块级盒子应用 float ： left;  。设置后，盒子会从原先的文档流里脱离出来，沿着左边贴住父元素的可用最左边，同时他的后续元素不再换行，而是沿着同一行在可用处继续显示。为了使 divDown 这个盒子不被前一个浮动元素影响并排，对它实行 clear:both;  属性清除浮动。由于之前的元素浮动脱离文档流，会导致背后的 warp 包裹层高度塌陷，因此再对它实行  Overflow ： hidden;  的属性，解决这个问题。这样，就可以实现布局了。
三、三列布局，左右宽度固定，中间宽度自适应布局

由于中间的盒子宽度不确定，因此无法用 float 的方式把他们并排显示。这种情况下，换个思路，可以用 postion 位移的方式来实现。首先，我们设定一个 divWarp ，并让这个作为绝对位移的基准位置，设定其 Position ： relative ；，含义是这个盒子相对于自己的文档流位置不做偏移 。第二，对左边盒子 divLeft 做绝对位移，相对于 divWarp ，设定其 Position ： absolut;left 0;top 0;  使他左上角和基准盒子的左上角贴住。同样的道理，设定右边的盒子 divRight 的属性为  Position ： absolute;right 0;top 0 ； 使他的右上角贴住基准点。这样，为中间的盒子留出左右空间分别为这两个盒子的固定宽度 a 和 b 。 最后，对中间的盒子外边距属性设定 margin ： 0 ， b ， 0 ， a ； 这样，就让中间的盒子自适应宽度而又单独成一列，完成我们需要的样式了。 注意，对于显式设定 width 的盒子， CSS 的默认是内容的宽度，而页面上实际的宽度还需要加上边框和内外边距。为了在设定这些属性时，盒子的实际宽度不要发生变化导致布局混乱，我们最好对盒子实行 box-sizing ： border-box ；，把 width 值统一到内容 + 边框 + 内边距上，避免因为这些样式的设定造成宽度不固定。
        最后，我对 CSS 下盒子模型的学习和布局，做点总结如下：

CSS 中的基本盒子模型：块级盒子和行内盒子

块级盒子：一行只有一个，可以显示指定宽度，自动换行

行内盒子：行内排列，不能显示指定宽度，自动包裹内部元素，不换行

两类通过  display:block  和 inline  来互相切换

盒子的外边距可以设为负值，用来实现内容的偏移

块级盒子通过 float 属性和 clear 属性，以及 position 定位可以实现浮动横向排列的效果

通过 box-sizing ： border-box;  属性，给块级盒子指定的固定宽度包含边框和内边距。

典型应用：页面多列效果和各种菜单效果。

         在 CSS3 里，对盒子模型做了更进一步的进化，对盒子的 border 有更多的新属性可以应用（如边框圆角应用、边框内图形填充等），以及针对浮动和偏移带来的布局不方便，重新定义了各类新的盒子，这些盒子根据布局和位置的不同有各种新的属性，极大的方便了页面布局的安排。下一弹会重点介绍 CSS3 中的升级版新盒子模型。