一、盒模式（the box model）

1、CSS就是这样看待元素的，它把每个单一的元素看作是一个盒子。每个盒子由内容区及可选的补白、边框和边界组成。

最里面是内容区（width属性用来定义元素的内容区的宽度），被可选的补白包围着，又围了一层可选的边框，最外一层是可选的边界。

用CSS可以控制盒子的各个方面：内容周围补白的大小、元素有没有边框（以及类型和大小），以及元素之间有多少边界。用CSS可以控制整个内容区周围甚至任何一侧（上、下、左、右）的补白宽度，也可以控制整个边界或某一侧边界（上、下、左、右）的宽度。

补白和边界的区别：边界是元素之间的空间，而补白是内容周围多出来的空间。如果有可见的边框，补白在边框里面而边界在边框外面。把补白想成是元素的一部分，而边界包围着元素并把它和周围的内容隔离开。

补白和边界都用来提供更多可见的空间，不能直接给补白或边界添加颜色或别的修饰，但因为它们是透明的，就会呈现背景颜色或背景图像。在这一点上补白和边界之间的不同是元素的背景颜色或背景图像会延伸到补白底下，但不会到边界。

如果在内容区本身周围需要更多可见的空间，就用补白；相反，如果想在元素之间或元素和页边之间有空间，就用边界。

2、CSS有一个padding属性，可以用它在内容周围设置相同大小的补白。可以把这个属性设置成多少像素或边框里面部分的百分之几。如 padding:25px; 我们在内容的四周（上、下、左、右）各添加了25像素的补白；要在左侧添加补白，就要用padding-left属性。

用CSS添加边界和补白一样，可以用百分数或像素定义边界。 如 margin:30px; 在内容四周（上、下、左、右）各添加 30像素的边界。属性margin-right来增加右侧的边界。

注意，width属性只用来定义内容区的宽度，要指明整个盒子的宽度，需要添加内容区的宽度，左右边界宽度，左右侧补白及边框宽度。即不能定义整个元素的宽度，你只能定义内容区、补白、边框和边界的宽度，把这些全加起来就是整个元素的宽度。

3、可以设置内联元素如、、的宽度，但是只有排版时才能看到效果。也可以给这些元素添加边界和补白、边框。内联元素的边界和补白跟块元素的稍有不同——如果在内联元素的四周都添加了边界，只能看到左边和右边的空间。可以在内联元素的上侧和下侧添加补白，不过这些补白不影响周围的其他内联元素的空间，所以补白会跟其他内联元素重叠。图像跟其他的内联元素稍有不同。width、padding和margin属性更接近于块元素。