網(wǎng)頁設(shè)計(jì)中的實(shí)用行為

  • 2019-02-18 16:54:53
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

前面介紹的規(guī)則有一些有意思的后果,這些結(jié)果源干兩方面,一方面是規(guī)則中指出了一些要求,另一方面是規(guī)則中有些方面沒有談到。首先要討論網(wǎng)頁設(shè)計(jì)里浮動(dòng)元素比其父元素高時(shí)會有什么結(jié)果。

實(shí)際上,這種情況經(jīng)常發(fā)生,以一個(gè)小文檔為例,這個(gè)文檔只包含幾個(gè)段落和h3元素,其中第一個(gè)段落包含一個(gè)浮動(dòng)圖像。另外,這個(gè)浮動(dòng)圖像有5像素的外邊距(5px)。你可能認(rèn)為這個(gè)文檔應(yīng)該昆示如下,如S 10-14所示。

當(dāng)然,這里并沒有什么反常的地方,不過圖10-15顯示了為第一個(gè)段落設(shè)置一個(gè)背景時(shí)會發(fā)生什么。

這與第二個(gè)例子基本上沒有什么不同,只不過背景可見??梢钥吹?,網(wǎng)頁設(shè)計(jì)浮動(dòng)圖像超出了其父元素的底端。當(dāng)然,在第一個(gè)例子中也是如此,只不過第一個(gè)例子中不明顯,因?yàn)闊o法看到背景。前面討論的浮動(dòng)規(guī)則只處理了浮動(dòng)元素和其父元素的左。右和上邊界,而沒有涉及下邊界,這個(gè)遺漏是故意的,這就會得到如圖10-15中所示的行為。

警告:實(shí)際上,有些瀏覽器不能正確地做到這一點(diǎn)。相反,它們會增加父元素的高度,使浮動(dòng)元素能夠包含在父元素中,即使這會導(dǎo)致父元素中出現(xiàn)大量多余的空白。

網(wǎng)站建設(shè)CSS2.1澄清了浮動(dòng)元素行為的一個(gè)方面:浮動(dòng)元素會延伸,從而包含其所有后代浮動(dòng)元素(而網(wǎng)站建設(shè)CSS的先前版本沒有明確指出會發(fā)生什么情況)。所以,通過將父元素置為浮動(dòng)元素,就可以把浮動(dòng)元素包含在其父元素內(nèi),如下例所示:

<div style="float: left; width: 100%;">

<img src="hay.gif" style="float: left;">

The 'div' will stretch around the floated image because the 'div' has been floated.

</div>

與此相關(guān),考慮背景及其與文檔中之前出現(xiàn)的浮動(dòng)元素的關(guān)系,見圖10-16所示。

網(wǎng)頁設(shè)計(jì)里由于浮動(dòng)元素同時(shí)處于流內(nèi)和流外,所以這種情況肯定會發(fā)生。然后會怎樣呢?標(biāo)題的內(nèi)容由浮動(dòng)元素“顯示”,不過,標(biāo)題的元素寬度還是與父元素寬度相等。因此,其內(nèi)容區(qū)將跨父元素的寬度,相應(yīng)地,背景寬度也與父元素寬度相等。為了避免蓋在浮動(dòng)元素下面,具體內(nèi)容并不從其內(nèi)容區(qū)左邊界開始顯示。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的實(shí)用行為

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/practical-behavior.html

上一篇:網(wǎng)頁設(shè)計(jì)中的浮動(dòng)詳細(xì)內(nèi)幕

下一篇:網(wǎng)頁設(shè)計(jì)中的負(fù)外邊距2

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