学习笔记 外边距属性学习笔记 外边距属性
围绕在元素边框外边的空白区域是外边距。设置外边距会在元素外创建额外的“空白区域”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。长度单位，可以是像素(px)、英寸(in)、毫米(mm)或 em。
如果设置四个值，其顺序为：上外边距 、右外边距、下外边距、左外边距。这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。
如果设置三个值，其顺序为：上外边距 、右外边距和左外边距、下外边距。
表达方式举例：
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"
CSS 定义了一些规则，允许为外边距指定少于4个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。 换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值。
二、外边距的合并（也叫叠加）：
1、当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度较大者。换句话来讲，就是当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距是那个较大的外边距。
2、当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，子元素与父元素的外边距也会发生合并。合并后的外边距也是那个较大的外边距。
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
3、假设有一个空元素，它有外边距，但是没有边框或填充内容。在这种情况下，上外边距与下外边距就碰到了一起，它们也会发生合并。
三、外边距应用：
应用外边距属性，可以在网页中添加内容，使添加的内容覆盖在原网页内容的上面，从而制作出一种漂亮的网页效果。
1、给图片添加小窗格：
这是我制作的一篇网页。在表格的单元格中放入了一个宽度为800px高度为600px的动画图片，然后用上外边距为-600px的块区包裹了一个空白表格，覆盖到动画图片的上面，制作出一种特殊的网页效果。
效果：
http://www.360doc.com/content/13/0828/21/4127803_310571446.shtml2、应用外边距属性制作的文字：
这是应用外边距属性制作的文字，其效果类似于滤镜文字，非常美观。
效果：
http://www.360doc.com/content/13/0130/06/4127803_263165405.shtml3、应用外边距属性制作的图片网页：
这篇网页是应用外边距属性制作的网页。
制作简析：
设置了一个三行二列的表格，六个单元格中都放入了一个图片。应用外边距属性，使行与行，列与列之间有不同的距离。这种网页的效果也挺漂亮的。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
