学习笔记 外边距属性学习笔记 外边距属性
围绕在元素边框外边的空白区域是外边距。设置外边距会在元素外创建额外的“空白区域”。
设置外边距的最简单的方法就是使用 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、应用外边距属性制作的图片网页:
这篇网页是应用外边距属性制作的网页。
制作简析:
设置了一个三行二列的表格,六个单元格中都放入了一个图片。应用外边距属性,使行与行,列与列之间有不同的距离。这种网页的效果也挺漂亮的。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。