网页制作之css盒模型基础

一、盒模型概述

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。

属性我们可以把它转移到我们日常生活中的盒子（箱子）来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性。

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

二、标准盒模型结构图

三、盒模型属性

border （边框）元素边框

margin （外边距）用于定义页面中元素与元素之间的距离

padding （内边距）用于定义内容与边框之间的距离

content （内容）可以是文字或图片

1、内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。

当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。对于overflow这个属性，我们在后面会详细讲解到。

2、内边距

内边距，指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。

关于内边距的属性有4种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。

3、边框

在CSS盒子模型中，边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

4、外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性也有4种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

5.属性的简写形式：

方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

* 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性，如padding:20px 30px;/*上下、左右*/；

*如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性，如padding:30px 20px 10px;/*上、左右、下*/；

*如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序，如padding:30px 20px 10px 40px;/*上、右、下、左*/。

课后练习：