当前位置:天才代写 > tutorial > 网页教程 > 简述CSS之外边距

简述CSS之外边距

2018-05-17 08:00 星期四 所属: 网页教程 浏览:334

       在网页设计中,为了布局更加合理,通常需要设置什么?内边距,边框?嗯,没错。除此之外还有吗?当然有,那就是外边距。今天小编就为大家介绍一下css外边距的相关内容。

  一、什么是外边距

  外边距指的是是边框之外的空白区域,设置外边距会在元素外创建额外的“空白”。

  二、CSSmargin属性

  设置外边距,我们使用margin属性来进行。这个属性的属性值可以是何长度单位,百分数值,甚至是负值。

  1.为margin设置一个长度单位值,例如像素、英寸、毫米或em

  margin可以设置为auto,但更常见的做法是为外边距设置长度值。

  下面的声明在h1元素的各个边上设置了1/4英寸宽的空白

  h1 {margin: 0.25in;}

  下面的例子为h1元素的四个边分别定义了不同的外边距,所使用的长度单位是像素(px):

  h1 {margin:10px 0px 15px 5px;}

  温馨提示:与内边距的设置相同,这些值的顺序是从上外边距(top)开始围着元素顺时针旋转

  2.为margin设置一个百分比数值

  p {margin:10%;}

  与内边距一样,外边距的百分数野是相对于父元素的width计算的。上面这个例子为p元素设置的外边距是其父元素的width的10%。

  提示:margin的默认值是0,所以如果没有为margin声明一个值,就不会出现外边距。

  但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。如果你没有对元素的外边距作出生命,浏览器会应用自己默认的外边距,可能是8px,6px等。当然,只要你作了声明,就会覆盖浏览器的默认样式。

  三、讨论值复制

  我们在介绍内边距得时候,曾经提到“值复制”这个概念。今天我们就详细解说一下。

  值复制有什么作用呢?其作用就是,有时,我们会定义一些重复的值,为了避免样式文件过大,节省字符。这时通过值复制就能不用重复输入这些数字了。

  例如:

  p {margin:0.5em 1em 0.5em 1em;}

  p {margin:0.5em 1em;}

  上面这两条规则是等价的,第二条规则的这两个值可以取代第一条规则的4个值。

  这是如何做到的呢?CSS定义了一些规则,允许为外边距指定少于4个值。

       规则如下:

  如果缺少左外边距的值,则使用右外边距的值。

  如果缺少下外边距的值,则使用上外边距的值。

  如果缺少右外边距的值,则使用上外边距的值。

  下图提供了更直观的方法来了解这一点:

简述CSS之外边距_CSS外边距_margin属性_理论基础_课课家

  换句话说,值复制有三种情况:

  第一种:为外边距指定了3个值,则左外边距会从右外边距复制得到。

  第二种:为外边距指定了2个值,则左外边距会从右外边距复制得到复制得到,下外边距会上外边距复制得到。

  第三种:为外边距指定1个值,那么其他3个外边距都由上外边距复制得到。

  利用这个简单的机制,您只需指定必要的值,而不必全部都应用4个值。

       例如

  h1 {margin:0.25em 1em 0.5em;} /*等价于0.25em 1em 0.5em 1em*/

  h2 {margin:0.5em 1em;} /*等价于0.5em 1em 0.5em 1em*/

  p {margin:1px;} /*等价于1px 1px 1px 1px*/

  特别提示:值复制可不是万能,如果你想把p元素的上外边距和左外边距设置为20像素,下外边距和右外边距设置为30像素。

       在这种情况下,必须写作

  p {margin:20px 30px 30px 20px;}

  这样才能得到您想要的结果。

  四、单边外边距属性

  与内边距设置一样,外边距也是可以实现单边设置的,

  您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:

  margin-top

  margin-right

  margin-bottom

  margin-left

  一个规则中可以使用多个这种单边属性,例如:

  h2 {

  margin-top:20px;

  margin-right:30px;

  margin-bottom:30px;

  margin-left:20px;

  }

  当然,对于这种情况,使用margin可能更简单方便:

  p{margin:20px 30px 30px 20px;}

  但无论使用单边属性还是使用margin,得到的结果都一样。最重要是应该选择对自己来说更容易、更熟悉的的一种方法。

  提示:Netscape和IE对body标签定义的默认边距(margin)值是8px。而Opera不是这样。相反地,Opera将内部填充(padding)的默认值定义为8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于Opera中,那么必须对body的padding进行自定义。

#p#分页标题#e#

  上面说了这么多理论,可能大家对外边距设置的效果没有什么直观印象。对此下面给大家一个简单设置段落外边距的实例,我们一起来看看效果。

  实例:

设置外边距实例

  运行结果如下:

实例代码运行效果

  俗话说得好,师傅带入门,修行靠自己,关于外边距的属性设置,小编就简单介绍到这里了。由于各个浏览器对外边距的默认值有所不同,为了能使网页在各个浏览器都能完美展示,这就需要我们对外边距的值有很好掌控能力。而如何合理设置外边距的值,就需要大家不断地去尝试与探索了。

 

    关键字:

天才代写-代写联系方式