網(wǎng)頁(yè)設計中的值復制

  • 2018-11-22 15:41:10
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(wǎng)站建設中,有時(shí)為外邊距輸入的值會(huì )有些重復:

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

不過(guò),網(wǎng)頁(yè)設計人員不必像這樣重復地鍵入這對數字。不需要用上面的規則,你可以試試以下規則:

p(margin:0.25em 1em;}

這兩個(gè)值足以取代前面的4個(gè)值。但這是怎么做到的呢?網(wǎng)站建設CSS定義了一些規則,允許為外邊距指定少于4個(gè)值。規則如下:

如果缺少左外邊距的值,則使用右外邊距的值。

如果缺少下外邊距的值,則使用上外邊距的值。

如果缺少右外邊距的值,則使用上外邊距的值。

如果需要一種更直觀(guān)的方法來(lái)了解這一點(diǎn),可以看看圖8-10。

換句話(huà)說(shuō),如果網(wǎng)頁(yè)設計人員為外邊距指定了3個(gè)值,則第4個(gè)值(即左外邊距)會(huì )從第2個(gè)值(右外邊距)復制得到。如果給定了兩個(gè)值,第4個(gè)值會(huì )從第2個(gè)值復制得到,第3個(gè)值(下外邊距)會(huì )從第1個(gè)值(上外邊距)復制得到。最后一種情況,如果只給定了一個(gè)值,那么其他3個(gè)外邊距都由這個(gè)值(上外邊距)復制得到。

利用這種簡(jiǎn)單的機制,創(chuàng )作人員只需指定必要的值,而不必全部都應用4個(gè)值,如下所示:

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'*/

這種方法有一個(gè)小缺點(diǎn),網(wǎng)頁(yè)設計人員最后肯定會(huì )遇到這個(gè)問(wèn)題。假設想將h1元素的上外邊距和左外邊距設置為10像素,下外邊距和右外邊距設置為20像素。在這種情況下,必須寫(xiě)作:

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

這樣才能得到想要的效果,但是要把這些全部鍵入需要一點(diǎn)的時(shí)間。遺憾的是,在這種情況下,所需值的個(gè)數沒(méi)有辦法更少了。再來(lái)看另一個(gè)例子,在此你希望除了左外邊距以外所有其他外邊距都是auto(左外邊距為3em)。

h2{margin:auto auto auto 3em;}

同樣地,這樣才能得到你想要的效果,問(wèn)題在于,鍵入這些auto有些麻煩。你想做的只是控制元素單邊上的外邊距,這就引入了下一個(gè)話(huà)題。

當前文章標題:網(wǎng)頁(yè)設計中的值復制

當前URL:http://amzcoolest.com/news/wzzz/value-replication.html

上一篇:網(wǎng)頁(yè)設計中的外邊距

下一篇:網(wǎng)頁(yè)設計中的單邊外邊距屬性

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看