網(wǎng)頁設(shè)計中的外邊距

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

外邊距

網(wǎng)頁設(shè)計中大多數(shù)正常流元素間出現(xiàn)的間隔都是因為存在元素外邊距,設(shè)置外邊距會在元素外創(chuàng)建額外的“空白"?!翱瞻住蓖ǔV覆荒芊牌渌氐膮^(qū)域,而且在這個區(qū)域中可以看到父元素的背景。

設(shè)置外邊距的最簡單的辦法就是使用屬性margin。

margin值:[<length>I<percentage>I auto]{1,4}|inherit

初始值:未定義

應(yīng)用于:所有元素

繼承性:無

百分?jǐn)?shù):相對于包含塊的width

計算值:見各個屬性

外邊距設(shè)置為auto的效果在第7章已詳細(xì)討論過,所以這里不再重復(fù)。另外,網(wǎng)頁設(shè)計中更常見的做法是為外邊距設(shè)置長度值。假設(shè)你想將h1元素的外邊距設(shè)置為1/4英寸。

h1(margin:0.25in;background-color:silver;}

這樣會在h1元素的各個邊上設(shè)置一個1/4英寸寬的空白。

margin可以接受任何長度度量。可以是像素、英寸,毫米或em。不過,margin的默認(rèn)值是0,所以如果沒有為margin聲明一個值,就不會出現(xiàn)外邊距。

不過,在實際中,網(wǎng)站制作人員對許多元素已經(jīng)提供了預(yù)定的樣式,外邊距也不例外。例如,在支持網(wǎng)站建設(shè)CSS的瀏覽器中。外邊距會在每個段落元素的上面和下面生成“空行”。因此,如果沒有為P元素聲明外邊距,瀏覽器可能會自己應(yīng)用某個外邊距。當(dāng)然,只要你特別做了聲明,就會覆蓋默認(rèn)樣式。

最后一點,還可以為margin設(shè)置一個百分?jǐn)?shù)值。這個值類型的詳細(xì)內(nèi)容將在后面的“百分?jǐn)?shù)和外邊距"一節(jié)中討論。

長度值和外邊距

前面提到過,設(shè)置元素的外邊距時,可以使用任何長度值。例如,要在段落元素外圍應(yīng)用一個10像素的空白區(qū),這相當(dāng)簡單。以下規(guī)則會為段落指定一個銀色背景和一個10像素的外邊距,如圖8-6所示:

P{background-color:silver;margin:10px;}

(同樣地,增加背景色是為了幫助顯示內(nèi)容區(qū),這里的虛線只是用于說明,在瀏覽器中并不真正出現(xiàn)。)如圖8-6所示,為內(nèi)容區(qū)的各邊增加了10像素的空白。這個結(jié)果有些類似于HTML中使用hspace和vspace屬性。實際上,可以使用margin設(shè)置一個圖像周圍的額外空間。假設(shè)希望所有圖像周圍都有1em的空白:

img(margin:1em;)

這就大功告成了。

有時,網(wǎng)站制作人員可能希望一個元素各邊上的空白不同。這也很簡單。如果希望所有h1元素的上外邊距為10像素,右外邊距為20像素,下外邊距為15像素,左外邊距為5像素,只需以下規(guī)則:h1{margin:10px 20px 15px 5px;}

這些值的順序很重要,應(yīng)當(dāng)遵循以下摸式:margin:top right bottom left

要記住這個模式有個好辦法,就是記住這4個值是從上(top)開始圍著元素順時針旋轉(zhuǎn)的。一定要以這個順序應(yīng)用值,所以要得到你想要的效果,就必須正確地安排值的順序。

注意:網(wǎng)頁設(shè)計中還有一種很容易的方法可以記住應(yīng)當(dāng)以什么順序聲明各邊的外邊距,這就是要記住,以正確的順序設(shè)置各邊外邊距有助于你避免“TRouBLe”,即TRBL,這代表“Top Right Bottom Left".

也可以混合使用各種類型的長度值。一個規(guī)則中并不限制只能使用一種長度類型,如下所示:

h2{margin:14px 5em 0.1in 3ex;}/*value variety!*/圖8-7顯示了這個聲明的效果,這里提供了一點注解。

百分?jǐn)?shù)和外邊距

前面已經(jīng)提到,可以對元素的外邊距設(shè)置百分?jǐn)?shù)值。百分?jǐn)?shù)是相對于父元素的width計算的,所以如果父元素的width以某種方式發(fā)生改變,百分?jǐn)?shù)也會改變。例如,假設(shè)有以下規(guī)則,如圖8-8所示:

p{margin:10%;}

<div style="width:200px;border:1px dotted;">

<p>This paragraph is contained within a DIV that has a width of 200 pixels,

so its margin will be 10%of the width of the paragraph's parent(the DIV).

Given the declared width of 200 pixels,the margin will be 20 pixels on all sides.</p>

</div>

<div style="width:100px;border:1px dotted;">

<p>This paragraph is contained within a DIV with a width of 100 pixels,so its margin will still be 10%of the width of the paragraph's parent.There will,therefore,be half as much margin on this paragraph as that on the first paragraph.</p>

</div>

與之對照,再考慮另一種情況,沒有為元素聲明width。在這種情況下,元素框的總寬度(包括外邊距)取決于父元素的的width。這有可能得到“流式”頁面,即元素的外邊距會擴大或縮小以適應(yīng)父元素(或顯示畫布)的實際大小。如果對一個文檔設(shè)置樣式,使其元素使用百分?jǐn)?shù)外邊距,當(dāng)用戶修改瀏覽器窗口的寬度時,外邊距會隨之?dāng)U大或縮小。具體的設(shè)計選擇取決于你。

你可能已經(jīng)注意到,圖8-8中的段落有些奇怪。不僅其左右兩邊的外邊距會根據(jù)父元素的寬度改變,上下外邊距也會隨之改變。在CSS中這是期望行為。再來看屬性定義,可以看到,百分?jǐn)?shù)值定義為相對于父元素的width。這不僅應(yīng)用于左右外邊距,也應(yīng)用于上下外邊距。因此,網(wǎng)頁設(shè)計給定以下樣式和標(biāo)記,段落的上外邊距將是50px:

div p{margin-top:10%;}

<div style="width:500px;">

<p>This is a paragraph,and its top margin is 10%the width of its parent e1ement.</p>

</div>

如果div的width改變,段落的上外邊距也會改變??瓷先ビ行┢婀?,是不是?這樣來考慮,我們認(rèn)為,正常流中的大多數(shù)元素都會足夠高以包含其后代元素(包括其外邊距)。如果一個元素的上下外邊距是父元素的height的一個百分?jǐn)?shù),就可能導(dǎo)致一個無限循環(huán),父元素的height會增加,以適應(yīng)后代元素上下外邊距的增加,而相應(yīng)地,上下外邊距又必須增加,以適應(yīng)新的父元素height,如此繼續(xù)。規(guī)范的作者沒有簡單地忽略上下外邊距百分?jǐn)?shù),而是決定讓它與父元素的width相關(guān),不會根據(jù)其后代元素的width而改變。

注意:對于定位元素,上下外邊距如果是百分?jǐn)?shù)值,其處理會有所不同,更多的詳細(xì)內(nèi)容參見第10章。

還可以混合使用百分?jǐn)?shù)和長度值。因此,為了將h1元素設(shè)置為上下外邊距都是0.5em,而左右外邊距為瀏覽器窗口寬度的10%,可以如下聲明。

h1 {margin:0.5em 10% 0.5em 10%;}

在此,盡管上下外邊距總保持不變,不過左右外邊距會根據(jù)窗口的寬度改變。當(dāng)然,這里假設(shè)所有h1元素都是body元素的子元素,而body與瀏覽器窗口寬度相等。簡單地說,h1元素的左右外邊距將是h1父元素寬度的10%。

下面再來看這個規(guī)則:

h1 {margin:0.5em 10% 0.5em 10%;}

看上去有些冗余,是不是?畢竟,必須把相同的一對值鍵入兩次。幸運的是,網(wǎng)站制作CSS提供了一種很容易的方法來避免這樣做。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的外邊距

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

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

下一篇:網(wǎng)頁設(shè)計中的值復(fù)制

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