<acronym id="5er3x"></acronym>
        <track id="5er3x"><strike id="5er3x"></strike></track>
        <track id="5er3x"><ruby id="5er3x"></ruby></track>

          <p id="5er3x"></p>
        1. <bdo id="5er3x"><strike id="5er3x"><b id="5er3x"></b></strike></bdo>
        2. <acronym id="5er3x"><label id="5er3x"></label></acronym>

          網頁設計中的實用行為

          • 2019-02-18 16:54:53
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.iandjservices.com

          前面介紹的規則有一些有意思的后果,這些結果源干兩方面,一方面是規則中指出了一些要求,另一方面是規則中有些方面沒有談到。首先要討論網頁設計里浮動元素比其父元素高時會有什么結果。

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

          當然,這里并沒有什么反常的地方,不過圖10-15顯示了為第一個段落設置一個背景時會發生什么。

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

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

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

          <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>

          與此相關,考慮背景及其與文檔中之前出現的浮動元素的關系,見圖10-16所示。

          網頁設計里由于浮動元素同時處于流內和流外,所以這種情況肯定會發生。然后會怎樣呢?標題的內容由浮動元素“顯示”,不過,標題的元素寬度還是與父元素寬度相等。因此,其內容區將跨父元素的寬度,相應地,背景寬度也與父元素寬度相等。為了避免蓋在浮動元素下面,具體內容并不從其內容區左邊界開始顯示。

          當前文章標題:網頁設計中的實用行為

          當前URL:http://www.iandjservices.com/news/wzzz/practical-behavior.html

          上一篇:網頁設計中的浮動詳細內幕

          下一篇:網頁設計中的負外邊距2

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          久久中文字幕无码_中文字幕精品无码亚洲字2021_欧美国产日韩另类综合一区_欧美日韩亚洲乱国产综合AⅤ