<output id="jbxdv"></output>

      1. 網頁設計中的增加框屬性

        • 2018-11-01 17:21:35
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        從前面的討論可以了解到,內邊距、外邊距和邊框都可以應用于網頁設計行內非替換元素。行內元素的這些方面根本不會影響行框的高度。如果對一個無內外邊距的span元素應用某個邊框,可能得到如圖7-40所示的結果。

        網站建設行內元素的邊框邊界由font-size而不是line-height控制。換句話說,如果一個span元素的font-size為12px, line-height為36px,其內容區就是12px高,邊框將包圍該內容區。

        或者,可以為行內元素指定內邊距,這會把邊框從文本本身拉開:

        span {border: 1px solid black; padding: 4px;}

        注意,這個內邊距并沒有改變內容區的具體形狀,不過它會影響這個元素行內框的高度。類似地,網頁設計中向一個行內元素增加邊框也不會影響行框的生成和布局。

        至于外邊距,實際上,外邊距不會應用到行內非替換元素的頂端和底端,它們不影響行框的高度。不過,行內元素的兩端則是另一回事。

        注意:CSS2.1中明確指定了外邊距的放置,它定義了margin-top和margin-bottom (可以應用到不是行內非替換元素的所有其他元素),而不是簡單地說用戶代理應當忽略上、下外邊距。

        應當還記得,行內元素基本上會作為一行放置,然后分成多個部分,所以,如果向一個行內元素應用外邊距,這些外邊距將出現在其開始和末尾,分別為左、右外邊距。內邊距也出現在邊界上。因此,網頁設計盡管內邊距和外邊距(以及邊框)不影響行高,但是它們確實能影響一個元素內容的布局,可能將文本推離其左右兩端。實際上,如果左、右外邊距為負,可能會把文本拉近行內元素,甚至導致重疊。

        可以把行內元素想成是一個紙片,外圍有一些塑料邊。在多行上顯示行內元素就像是把一個大紙片剪成一些小紙片。不過,每個小紙片上不會增加額外的塑料邊。小紙片上的塑料邊還是最初那個大紙片上的塑料邊,所以看上去只是原來紙片(行內元素)最前和最后兩端上出現塑料邊。

        所以,網站建設如果行內元素有一個背景,而且內邊距足夠大以至于行背景重疊,此時會發生什么情況呢?看下面的例子:

        p {font-size: 15px; line-height: 1em;}

        p span {background:#999; padding-top: 10px; padding-bottom: 10px;}

        span元素中的所有文本都有15像素高的內容區,而且為各內容區的頂部和底部各增加了10像素的內邊距。這些額外的像素不會增加行框的高度,這原本很好,不過這里有背景色。

        網站建設CSS 2.1明確指出行框按文檔的順序繪制:“這會導致后續行的邊框在前面行的邊框和文本上繪制?!边@個原則同樣適用于背景,如圖7-43所示。另一方面,CSS2允許用戶代理“‘切掉’邊框和內邊距區(也就是不顯示邊框和內邊距)”。因此,具體結果可能很大程度上取決于用戶代理遵循哪一個規范。

        當前文章標題:網頁設計中的增加框屬性

        當前URL:http://www.freenetsites.com/news/wzzz/Increase- box.html

        上一篇:網頁設計中的行高

        下一篇:網頁設計中的內容區

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>