网页设计中的值复制

  • 2018-11-22 15:41:10
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网站建设中,有时为外边距输入的值会有些重复:

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

不过,网页设计人员不必像这样重复地键入这对数字。不需要用上面的规则,你可以试试以下规则:

p(margin:0.25em 1em;}

这两个值足以取代前面的4个值。但这是怎么做到的呢?网站建设CSS定义了一些规则,允许为外边距指定少于4个值。规则如下:

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

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

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

如果需要一种更直观的方法来了解这一点,可以看看图8-10。

换句话说,如果网页设计人员为外边距指定了3个值,则第4个值(即左外边距)会从第2个值(右外边距)复制得到。如果给定了两个值,第4个值会从第2个值复制得到,第3个值(下外边距)会从第1个值(上外边距)复制得到。最后一种情况,如果只给定了一个值,那么其他3个外边距都由这个值(上外边距)复制得到。

利用这种简单的机制,创作人员只需指定必要的值,而不必全部都应用4个值,如下所示:

h1{margin:0.25em 0 0.5em;}/*same as'0.25em 0 0.5em 0'*/

h2{margin:0.15em 0.2em;}/*same as'O.l5em 0.2em 0.15em 0.2em'*/

P{margin:0.5em 10px;}/*same as'0.5em 10px 0.5em 10px'*/

p.close(margin:0.1em;}/*same as'0.1em 0.1em 0.1em 0.1em'*/

这种方法有一个小缺点,网页设计人员最后肯定会遇到这个问题。假设想将h1元素的上外边距和左外边距设置为10像素,下外边距和右外边距设置为20像素。在这种情况下,必须写作:

h1{margin:10px 20px 20px 10px;}./*can't be any shorter*/

这样才能得到想要的效果,但是要把这些全部键入需要一点的时间。遗憾的是,在这种情况下,所需值的个数没有办法更少了。再来看另一个例子,在此你希望除了左外边距以外所有其他外边距都是auto(左外边距为3em)。

h2{margin:auto auto auto 3em;}

同样地,这样才能得到你想要的效果,问题在于,键入这些auto有些麻烦。你想做的只是控制元素单边上的外边距,这就引入了下一个话题。

当前文章标题:网页设计中的值复制

当前URL:http://www.lyjtt.cn/news/wzzz/value-replication.html

上一篇:网页设计中的外边距

下一篇:网页设计中的单边外边距属性

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)