CSS合理布局是一种新起的合理布局方法，其又称之为CSS DIV(实际上应是CSS XHTML)合理布局。其较大的优势是用CSS为网站设计的小块目标加上精准定位特性，将其变换为AP原素后，能够将该目标置放在网页页面任何地方，而且能够设定这种小块目标的堆叠次序。应用这类方法，能够将网页页面每一个图象、每段文字、每一个报表都加上进由CSS界定的小块目标中，以完成灵便的、多元化的合理布局方法.CSS界定的AP原素还能够与JavaScript等开发语言融合，制做出各种各样动画特效。

Css盒模型(Box Model)是用于叙述CSS中小块目标的一种实体模型。根据该实体模型，能够将CSS的小块目标的各种各样特性十分切合、品牌形象地主要表现出去，以帮助网页页面设计师了解CSS小块合理布局的基本原理。盒模型是CSS合理布局的基本。

1.盒模型的构造

在CSS中，全部的小块目标都被视作一个矩形。该矩形的全部与部位有关的特性都被视作盒模型的一部分。盒模型的构造如图16-5所显示。

CSS界定的小块目标都包含界限区、外框、添充区和內容4个一部分。应用CSS能够界定这种地区的尺寸，而不危害小块目标的內容。在网页页面中，规范的CSS小块目标高宽比计算方法以下所显示。



而规范的Css小块目标总宽计算方法则以下所显示。


了解了网页页面的小块目标高宽比和总宽的计算方式，就可以依据这种方式 来界定这种目标在网页页面中的排序方法。

2.界限

在Css中，界限又称之为外补丁下载。界定小块目标的界限，必须应用复合型特性margin及其其4種子特性，如表4-25所显示。



应用没有复合型特性的margin特性还可以为网页页面目标设定4边的边界值。其方式 是为margin特性设定好几个特性值。为margin特性设定2个特性值时，其第I个特性值界定网页页面目标顶端和底端的界限，而第2个特性值界定网页页面目标左边和右边的界限，其编码以下所显示。



为margin特性设定3个特性值时，其第一个特性值界定网页页面目标顶端的界限，个特性值界定网页页面目标左边和右边的界限，第三个特性值界定网页页面目标底端的界限，编码以下所显示。



为margin特性设定4个特性值时，其4个特性值各自界定网页页面目标的顶端、右边、底端和左边的界限总宽，其编码以下所显示。



3.添充

在Css中，添充又称之为内补丁下载。界定小块目标的添充，必须应用复合型特性padding及其其4種子特性，如表4-26所显示。



应用没有复合型特性的padding特性还可以为网页页面目标设定4边不一样的添充值。其方式 是为padding特性设定好几个特性值.为padding特性设定2个特性值时，其第l个特性值界定网页页面目标顶端和底端的添充，而第2个特性值界定网页页面目标左边和右边的添充，其编码以下所显示。



为margin特性设定3个特性值时，其第一个特性值界定网页页面目标顶端的添充，第2个特性值界定网页页面目标左边和右边的添充，第三个特性值界定网页页面目标底端的添充，其编码以下所显示。



为margin特性设定4个特性值时，其4个特性值各自界定网页页面目标的顶端、右边、底端和左边的添充总宽，其编码以下所显示。