【案例8】用户中心实现涉及内容和过程

图1

如图1是用盒子模型内容实现的，但是需要了解一些内容。

一.内容知识引入

1.内边距属性（padding）

为了调整盒子在网页中的显示位置，常常需要为元素设置内边距。内边距也被称为内填充，是指元素内容和边框之间的距离。

在CSS中，padding是用来设置内边距的。同边框属性border一样，padding也是复合属性，其设置方法如图2：

图2

在上面的设置中，padding的取值可以为auto,默认值，表示自动适应、不同单位的数值、相对于父元素（或浏览器）宽度的百分比（%），在实际工作中，最常用的是单位是像素值(px),并且不要允许使用负值。

与边框属性一样，使用复合属性padding定义内边距时，必须按照顺时针原则采用值复制原则，一个值为四边，两个为上下和左右，三个为上、左右、下。

下面通过一个案例来演示一下内边距padding的使用方法.先写代码，如图3

图3

保存运行如图 4

图4

我们可以看到内边距都有明显的变化，那我们将<h2>标签里面的padding值修改为5%，拿结果会怎么样呢？我们将代码padding:2px;修改为padding:5%;保存并运行如图5.

图5

我们可以明显地看到<h2>标签的内边距增大了。不过设置内边距的数值为百分比时，我们需要注意当内边距数值为百分比时，则不论是上下内外边距还是左右内外边距，都是相对于父元素width的百分比，随父元素width的变化而变化，跟高度height无关。

2.外边距属性

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理的布局网页，就需要为盒子设置外边距。所谓外边距就是标签边框和相邻标签之间的距离。在CSS中，margin属性用于设置外边距，它是一个复合属性，与内边距padding的使用方法类似，设置内边距方法如下：

margin-top:上外边距；

margin-right:右外边距；

margin-bottom:下外边距；

margin-left:左外边距；

margin:上外边距 [右外边距下外边距左外边距]；

margin遵循值复制原则，跟padding是一样的，但有一点不同，margin是可以使用负值，使相邻标签发生重叠。

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下。

.num{margin:0 auto;}

下面通过一个案例来演示margin属性的使用方法。

先写代码，如图6

图6

保存并运行，如图7

图7

在图7中，我们可以看到图像和文字都拉开了一定的距离，实现了图文混排的效果。但是如果咱们仔细观察效果图时，我们会发现浏览器边界与网页内容也会存在一定的距离，然而图7中，我们并没有对<p>标签或者<body>应用内边距或者外边距，可见这些标签是默认有内边距和外边距样式的。网页中默认存在内外边距样式标签有<p>、<body>、<h1>~<h6>等。

为了更方便的控制网页，制作网页时添加如下代码，即可清除标签默认的内外边距。

*{padding:0; /*清除内边距*/

margin:0; /*清除外边距*/

}

注意：如果没有明确定义标签的宽和高，内边距比外边距的容错率高。

3.盒子的宽和高

网页是由许多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。

下面通过一个案例来演示一下width和height属性的用法。

先写代码，对图像定义样式的代码如下：如图8