網(wǎng)頁設計中的塊級元素二

  • 2018-10-26 17:22:06
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

負外邊距

網(wǎng)頁設計中負外邊距確實對垂直格式化有影響,而且它們會影響外邊距如何合并。如果垂直外邊距都設置為負值,瀏覽器會取兩個外邊距絕對值的最大值。如果一個正外邊距與一個負外邊距合并,會從正外邊距減去這個負外邊距的絕對值。換句話說,負值要增加到正值,所得到的就是元素間的距離。圖7-21給出了兩個具體的例子。

圖7-21:負垂直外邊距的例子

注意,上、下外邊距為負時有一種“拉近”效果。實際上,這與負水平外邊距使元素超出其父元素沒有什么區(qū)別。請考慮:

p.neg {margin-top:-50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;}

<div style="width: 420px; background-color: silver;

padding: 10px; margin-top: 50px; border: 1px solid;">

<p class="neg"> A paragraph.

</p> A div.

</div>

如圖7-22所示,因為段落的上外邊距為負,所以它被向上“拉”了 50像素。注意,以上標記中在段落后面有一個div,這個div的內(nèi)容也向上拉了50像素。

圖7-22:負上外邊距的效果

負的下外邊距會使段落看上去被向下拉。將以下標記與圖7-23所示對照:

p.neg {margin-bottom:-50px; margin-right: 10px; margin-left: 10px; margin-top: 0; border: 3px solid gray;}

<div style="width: 420px; margin-top: 50px;">

<p class="neg"> A paragraph.

</p>

</div>

<p> The next paragraph.</p>

圖7-23:負下外邊距的效果

圖7-23中顯示,div后面的元素會根據(jù)div底端的位置放置。可以看到,相對于視覺上子元素(段落)的底端,實際上父元素div的底端在它之上。div后面下一個元素與div底端之間的距離是正確的。根據(jù)你使用的規(guī)則,確實應該如此。

下面來考慮一個例子,其中有一個列表項、一個無序列表以及一個標題,它們的外邊距都合并。在這里,為無序列表和標題指定了負外邊距:

li {margin-bottom: 20px;}

ul {margin-bottom:-15px;}

h1 {margin-top:-18px;}

兩個負外邊距中較大的一個(-18px)增加到了最大的正外邊距上(20px),這就得到了20px- 18px = 2px,因此,列表項內(nèi)容底端與h1內(nèi)容頂端之間只有2個像素的距離,如圖7-24所示。

圖7-24:正負外邊距合并詳解

網(wǎng)頁設計中還有一種行為沒有討論,如果由于負外邊距而導致元素彼此重疊,很難區(qū)分哪些元素在上面。你可能還會注意到,本節(jié)中所有例子都沒有使用背景色。如果確實使用了背景色,其內(nèi)容可能會被后面元素的背景色所覆蓋,這是一種可以預見的行為,因為瀏覽器總會按從前到后的順序顯示元素,所以文檔中后出現(xiàn)的正常流元素可能會覆蓋較早出現(xiàn)的元素(如果這兩個元素重疊),

列表項

網(wǎng)頁設計中列表項有自身的一些特殊規(guī)則。這些列表項前面通常有一個標志,如一個圓點或一個數(shù)字。這個標志實際上并不是列表項內(nèi)容區(qū)的一部分,所以如圖7-25所示的效果很常見。

圖7-25:列表項的內(nèi)容

網(wǎng)站建設對這些標志相對于文檔布局的放置和效果涉及很少,但網(wǎng)站建設引入了專門為解決這個問題而設計的一些屬性,如marker-offset:。不過,光有想法但缺少實現(xiàn),這就使得這個屬性在CSS2.1中又被去掉了,很有可能CSS的將來版本還會引入另外一種方法來定義內(nèi)容和標志之間的距離。因此,標志的放置不在創(chuàng)作人員的控制范圍內(nèi)(至少在寫作本書時是這樣)。

注意:第12章將更詳細地研究列表及如何設置列表的樣式。

網(wǎng)頁設計中與一個列表項元素關聯(lián)的標志可能在列表項內(nèi)容之外,也可能處理為內(nèi)容開始處的一個內(nèi)聯(lián)標志,這取決于屬性list-style-position的值,如果標志放在內(nèi)部,那么這個列表項相對于其相鄰列表項就像一個塊級元素一樣,如圖7-26所示。

圖7-26:標志放在列表內(nèi)部和外部

如果標志在內(nèi)容之外,它會放在與內(nèi)容左邊界有一定距離的位置上(對于從左向右讀的語言)。網(wǎng)頁設計中不論如何改變列表的樣式,標志與內(nèi)容邊界的距離都不變。有時,標志可能會放在列表元素本身之外,如圖7-26所示。

當前文章標題:網(wǎng)頁設計中的塊級元素二

當前URL:http://m.iy5y368.cn/news/wzzz/block-level-elements2.html

上一篇:網(wǎng)頁設計中的塊級元素一

下一篇:網(wǎng)頁設計中的行內(nèi)元素

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)