網(wǎng)頁設(shè)計中的水平元素

  • 2018-10-15 10:08:35
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

塊級元素的表現(xiàn)有時可以預(yù)測,有時則很讓人驚訝。例如,元素沿橫軸和豎軸擺放時,其處理就可能不同,為了充分了解如何處理塊級元素,必須對一些邊界和區(qū)域很清楚。

一般地,網(wǎng)頁設(shè)計中一個元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界的距離,height則是從上內(nèi)邊界到下內(nèi)邊界的距離。這些屬性都可以應(yīng)用到元素。

不同的寬度、高度、內(nèi)邊距和外邊距相結(jié)合,就可以確定文檔的布局。在大多數(shù)情況下,文檔的高度和寬度由瀏覽器自動確定,這要基于可用的顯示區(qū)域和其他一些因素。當然在CSS網(wǎng)站制作中,可以更直接地控制元素的大小以及顯示方式。對于水平和垂直布局,可以選擇不同的效果,所以我們將分別介紹。

水平格式化

水平格式化往往比你想象得更復(fù)雜。其部分復(fù)雜性在于width影響的是內(nèi)容區(qū)的寬度,而不是整個可見的元素框??紤]以下例子:

<p style="widch: 200px;">wideness?</p>

這行代碼使段落的內(nèi)容區(qū)寬度為200像素。如果為元素指定一個背景,就能很清楚地看出。不過,如果網(wǎng)頁設(shè)計中還指定了內(nèi)邊距、邊框或外邊距,這些都會增加到寬度值。假設(shè)指定如下:

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

可見元素框的寬度現(xiàn)在是220像素,因為在內(nèi)容的左邊和右邊分別增加了10像素的內(nèi)邊距。外邊距則會在左右兩邊再延伸20像素,使整個元素框的寬度為260像素。

一定要知道這樣會隱式地增加width值,理解這一點很重要。大多數(shù)用戶認為,width 是指可見元素框的寬度,如果為一個元素聲明了內(nèi)邊距、邊框以及寬度,他們指定的寬度值則是左外邊界到右外邊界的距離。但在CSS中并不是這樣。一定要牢牢記住這一點,以免以后糊涂。

注意:在寫作本書時,CSS的Box Model模塊提供了一些建議,提出了一些方法來允許創(chuàng)作人員決定width是指內(nèi)容寬度還是可見框?qū)挾取?/p>

對此有一個很簡單的規(guī)則,正常流中塊級元素框的水平部分總和就等于父元素的width。假設(shè)一個div中有兩個段落,這兩個段落的外邊距設(shè)置為1em。段落的內(nèi)容寬度(width 的值)再加上其左、右內(nèi)邊距,邊框或外邊距,加在一起正好是div內(nèi)容區(qū)的width,

假設(shè)div的width為30em,那么各段落內(nèi)容寬度、內(nèi)邊距,邊框或外邊距的總和就是30em。在圖7-3中,段落外的“空白”實際上是其外邊距。如果div有內(nèi)邊距,還會有更大的空白,不過這里div沒有內(nèi)邊距。稍后就會討論內(nèi)邊距。

水平屬性

網(wǎng)頁設(shè)計中水平格式化的“7大屬性”是:margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。這些屬性與塊級框的水平布局有關(guān),如圖7-4所示。

這7個屬性的值加在一起必須是元素包含塊的寬度,這往往是塊元素的父元素的width 值(因為塊級元素的父元素幾乎都是塊級元素。

圖7-3:元素框與其父元素的width相同

圖7-4:水平格式化的“7大屬性”

在這7個屬性中,只有3個屬性可以設(shè)置為auto:元素內(nèi)容的width,以及左、右外邊距。其余屬性必須設(shè)置為特定的值,或者默認寬度為0,圖7-5顯示了框中的哪些部分可以取值為auto,而哪些部分不能。

圖7-5:可以設(shè)置為auto的水平屬性

width必須設(shè)置為auto或某種類型的非負值。如果在水平格式化中確實使用了auto,會得到不同的效果。

注意:CSS網(wǎng)站制作中允許瀏覽器為width設(shè)置一個最小值,塊級元素的width不能小于這個值,對于不同瀏覽器,這個最小值可能不同,因為在規(guī)范中對此沒有定義。

當前文章標題:網(wǎng)頁設(shè)計中的水平元素

當前URL:http://m.supportcoffeeroasters.com/news/wzzz/Horizontal-elements.html

上一篇:網(wǎng)頁設(shè)計中的基本框

下一篇:網(wǎng)頁設(shè)計中的auto設(shè)置

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