|
本节讲解外边距。
一、外边距概述：
围绕在元素边框外边的空白区域是外边距。设置外边距会在元素外创建额外的“空白区域”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。长度单位，可以是像素(px)、英寸(in)、毫米(mm)或 em。
外边矩的设置方法可以用1 到 4 个值设置：
如果设置四个值，其顺序为：上外边距 、右外边距、下外边距、左外边距。这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。
表达方式举例：
style="margin:10px 5px 15px 20px"
如果设置三个值，其顺序为：上外边距 、右外边距和左外边距、下外边距。
表达方式举例：
style="margin:10px 5px 15px "
如果设置两个值，其顺序为：上外边距 和下外边距、右外边距和左外边距。
表达方式举例：
style="margin:10px 5px"
如果设置一个值，是指所有的 4 个外边距。
也可以单独设置一个外边矩。
其方法为：
上外边矩如：style="margin-top: 20px"
下外边矩如：style="margin-bottom: 30px"
左外边矩如：style="margin-left: 20px"
右外边矩如：style="margin-right: 30px"
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距（当然了，只要你特别作了声明，就会覆盖默认样式）。IE 对body标签定义的默认外边距（margin）的值是8px。相反地，Opera 将内边距（padding）的默认值定义为 8px。
CSS 定义了一些规则，允许为外边距指定少于4个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。 换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值。
二、外边距的合并（也叫叠加）：
1、当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度较大者。换句话来讲，就是当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距是那个较大的外边距。
2、当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，子元素与父元素的外边距也会发生合并。合并后的外边距也是那个较大的外边距。
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
3、假设有一个空元素，它有外边距，但是没有边框或填充内容。在这种情况下，上外边距与下外边距就碰到了一起，它们也会发生合并。
如果这个外边距遇到另一个元素的外边距，它还会发生合并。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的空白距离就一致了。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
注意：外边距margin的值可以是负值。外边距margin总是透明的，不能加背景。
三、外边距应用：
应用外边距属性，可以在网页中添加内容，使添加的内容覆盖在原网页内容的上面，从而制作出一种漂亮的网页效果。
1、给图片添加小窗格：
这是我制作的一篇网页。在表格的单元格中放入了一个宽度为800px高度为600px的动画图片，然后用上外边距为-600px的块区包裹了一个空白表格，覆盖到动画图片的上面，制作出一种特殊的网页效果。
效果：
2、应用外边距属性制作的文字：
这是应用外边距属性制作的文字，其效果类似于滤镜文字，非常美观。
效果：
3、应用外边距属性制作的图片网页：
这篇网页是应用外边距属性制作的网页。
制作简析：
设置了一个三行二列的表格，六个单元格中都放入了一个图片。应用外边距属性，使行与行，列与列之间有不同的距离。这种网页的效果也挺漂亮的。 代码：
效果：
4、给图片添加动画图片：
美女也应细打扮。给漂亮的美女添加一个动画图片，就更加漂亮啦！
制作简析：
表格的单元格中放入美女图片，应用外边距属性添加一个动画图片，覆盖在美女图片的上方。外边距只设置上外边距，其值要取负值欧！
效果：
作业：
一、填空：
1、围绕在（）是外边距。设置外边距会在（）创建额外的（）。
2、设置外边距的最简单的方法就是使用（）属性，这个属性接受任何长度单位、百分数值甚至负值。长度单位，可以是（）、（）、（）或 （）。
3、外边矩的设置方法可以用1 到 4 个值设置。如果设置四个值，其顺序为：（）外边距 、（）外边距、（）外边距、（）外边距。这些值的顺序是从（）外边距 (top) 开始围着元素（）旋转的。如果设置三个值，其顺序为：（）外边距 、（）外边距和（）外边距、（）外边距。如果设置两个值，其顺序为：（）、（）。如果设置一个值，是指所有的（）外边距。
4、可以单独设置一个外边矩。上外边距举例：（）；下外边距举例：（）；左外边距举例：（）；右外边距举例：（）。
5、只有普通文档流中块框的（）外边距才会发生外边距合并。（）外边距不会合并”。
二、在外边距的样式中，如果缺少“左”外边距的值，是指设置了几个外边距？如果缺少“下”外边距的值，是指设置了几个外边距？如果缺少“右”外边距的值，是指设置了几个外边距？各举一例。
三、认识外边距的合并。举例说明外边距合并的意义。
四、应用外边距属性，试着制作几篇网页。
|
|
|
