首页 > 代码库 > 3.1 盒子的内部结构

3.1 盒子的内部结构

盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。

所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两方面采理解。一是理解一个孤立的盒子的内部结构,二是理解多个盒子之间的相互关系。

在本章中首先讲解独立的盒子相关的性质,然后将介绍在普通情况下盒子的排列关系。在下一章中,将更深入地讲解浮动和定位的相关内容。

在学习盒子模型之前,先来看一个例子。假设在墙上有4幅画,整齐地排列着,如图1所示。对于每幅画来说,都有一个“边框”,在英文中称为"border”;每个画框中,画和边框通常都会有一定的距离,这个距离称为“内边距”,在英文中称为“padding”;各幅蓟之间通常也不会紧贴着,它们之间的距离称为“外边距”,在英文中称为“margin”。

图1 画框示意图
图1 画框示意图

这种形式实际上存在于我们生活中的各个地方,如电视机,显示器和窗户等,都是这样的。因此,padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”。英文为“Box”。

了解了盒子之后,还需要理解“模型”这个概念。所谓模型就是对某种事物的本质特性的抽象。

模型的种类很多,例如物理上有“物理模型”,科学家牛顿提出了著名的F=ma公式,就是对物体运动的本质特性进行抽象后的精确描述。类似地,创办企业也有其“商业模型”,它是对企业运作和盈利过程的本质进行抽象后,对它的描述。

同样,在网页布局中,为了能够使纷繁复杂的各个部分合理地进行组织,这个领域的一些有识之士对它的本质进行充分的研究后,总结出了一套完整的、行之有效的原则和规范。这就是“盒子模型”的由来。

在CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成,如图1所示。

可盒子的概念是非常容易理解的,但是如果需要精确地排版,有的时候1个像素都不能差,这就需要非常精确地理解其中的计算方法。

一个盒子实际所占有的宽度(或高度)是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border,padding和margin,因此只要利用好这些属性,就能够实现各种各样的排版效果。

注意:并不仅仅是用div定义的网页元素才是一个盒子,事实上所有的网页元素本质上都是以盒子的形式存在的。在人的眼中,一个两页上有各种内容,包括文本、图像等,而在浏览器看来,就是许多盒子在一起或者相互嵌套。

图1中有一个从上面开始顺时针旋转的箭头,它表示需要读者特别记住的原则,当使用CSS这些部分设置宽度时,是按照顺时针方向确定对应关系的,下一节会详细介绍。

当然还有很多具体的特殊情况,并不能用很简单的规则覆盖全部的计算方法,因此在这一章中,将深入盒子模型的内部,把一般原则和特殊情况都尽可能地阐述清楚。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/664.html