網(wǎng)頁(yè)設(shè)計(jì)中非替換元素的放置和大小

  • 2019-03-18 16:44:39
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.iy5y368.cn

一般地,網(wǎng)站建設(shè)中元素的大小和位置取決于其包含塊。各個(gè)屬性(width、right、padding-left 等)的值也會(huì)有一些影響,不過(guò)最主要的還是其包含塊。

考慮一個(gè)定位元素的寬度和水平放置。這可以表示為一個(gè)等式:

left+margin-left+border-left-width+padding-left+width+padding-right+border-right- width+margin-right+right=包含塊的width。

這個(gè)計(jì)算是很合理的?;旧蠒?huì)由這個(gè)等式來(lái)確定正常流中塊級(jí)元素的大小,除非增加了left和right。所有這些屬性之間有什么關(guān)系呢?以下是一組規(guī)則。

首先,如果left、width和right都設(shè)置為auto,會(huì)得到上一節(jié)所示的結(jié)果:左邊界置于其靜態(tài)位置(假設(shè)使用從左向右讀的語(yǔ)言)。在從右向左讀的語(yǔ)言中,則是右邊界置千其靜態(tài)位置。元素的width設(shè)置為“收放得正好合適”,這說(shuō)明該元素的內(nèi)容區(qū)寬度恰好只能包含其內(nèi)容(而沒(méi)有多余空間)。這與表單元格的行為很類似。非靜態(tài)位置屬性要適當(dāng)設(shè)置,以保證余下的距離。例如:

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 0; right: auto; width:auto;

background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

</div>

這會(huì)得到如圖10-44所示的結(jié)果。

網(wǎng)站建設(shè)元素的頂端根據(jù)其包含塊的頂端放置,且元素的寬度剛好足夠包含內(nèi)容。從元素右邊界到包含塊右邊界之間余下的距離則是right的計(jì)算值。

假設(shè)左右外邊距都設(shè)置為auto,而left、width和right不是auto,如下例所示:

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: l0em; margin: 0 auto; background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

此時(shí),左右外邊距會(huì)設(shè)置為相等的值。這實(shí)際上會(huì)讓元素居中,如圖10-45所示。

這與正常流中的auto外邊距居中行為基本上是一樣的。所以,假設(shè)外邊距不為auto:

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em;

margin-left: 1em; margin-right: 1em; background: silver;">shrink-wrapped</span> thanks Co the way positioning rules work.

</div>

現(xiàn)在就有問(wèn)題了。網(wǎng)站建設(shè)定位元素span的屬性只增加為14em,而包含塊寬度為25em。這里有11em的差額,必須從某個(gè)地方彌補(bǔ)。

規(guī)則指出,在這種情況下,用戶代理會(huì)忽略right的值,并重置right的值。換句話說(shuō),其結(jié)果就好像聲明了以下規(guī)則一樣:

<span style="position: absolute; top: 0; left: 1em; right: 12em; width: 10em; margin-lefc: 1em; margin-right: 1em; background: silver;">shrink-vn:apped</span>

其結(jié)果如圖10-46所示,

如果某個(gè)外邊距保持為auto,則會(huì)改變這個(gè)外邊距。假設(shè)將樣式改為:

<span style="position: absolute; top: 0; left: lan; right: 1em; width: 10em; margin-left: 1em; margin-right: auto; background: silver;">shrink-wrapped</span>

視覺(jué)效果與圖10-46所示相同,只不過(guò)這是通過(guò)將右外邊距重新計(jì)算為12em得到的,而不是覆蓋為屬性right指定的值。另一方面,網(wǎng)頁(yè)設(shè)計(jì)人員如果將左外邊距置為auto,則會(huì)重置左外邊距,如圖10-47所示:

圖10-47:過(guò)度受限情況下忽略margin-left的值

一般地,如果網(wǎng)頁(yè)設(shè)計(jì)人員只把一個(gè)屬性設(shè)置為auto,就會(huì)修改這個(gè)屬性來(lái)滿足本節(jié)前面給出的等式。給定以下樣式,元素會(huì)延伸到必要的寬度,而不是“收縮”內(nèi)容:

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em; margin-left: auto; margin-right: 1em; background: silver;">shrink-wrapped</span>

到目前為止,我們實(shí)際上只考慮了水平軸的行為,不過(guò)對(duì)于垂直軸,規(guī)則非常類似。還是看前面的討論,只要將其旋轉(zhuǎn)90度就會(huì)得到幾乎相同的行為。例如,以下標(biāo)記會(huì)得到如圖10-48所示的結(jié)果:

<div styles"position: relative; width: 30em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 30%; background:#CCC;top: 0;"> element A </div>

<div aty-le='position: absolute; left: 35%; width: 30%; background:#AAA; top: 0; height: 50%;"> element B"

<div style="position: absolute; left: 70%; width: 30%; background:#CCC;height: 50%; bottom: 0;"> element C </div>

在第一個(gè)例子中,元素的高度收縮為內(nèi)容的高度。在第二個(gè)例子中,未指定的屬性(bottom)設(shè)置為適當(dāng)?shù)闹?,?lái)彌補(bǔ)定位元素底端與其包含塊底端之間的距離。在第三個(gè)例子中,未指定的屬性是top,所以由top來(lái)彌補(bǔ)定位元素頂端與其包含塊頂端之間的拒離。

對(duì)此,外邊距為auto可以得到垂直居中的效果。給定以下樣式,絕對(duì)定位元素div將在其包含塊中垂直居中,如圖10-49所示:

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 100%; background:#CCC; top: 0; height: 5em; bottom: 0; margin: auto 0;">

圖10-49:將外邊距為auto的絕對(duì)定位元素垂直居中

還要指出兩個(gè)小變化。在水平布局中,如果值設(shè)置為auto, right或left都可以根據(jù)其靜態(tài)位置放置。但在垂直布局中,只有top可以取靜態(tài)位置,出于某種原因,bottom 做不到。

注意:寫作本書時(shí),Internet Explorer的所有版本都不支持絕對(duì)定位元素通過(guò)將上下外邊距設(shè)置為auto來(lái)實(shí)現(xiàn)垂直居中的行為。

另外,如果一個(gè)絕對(duì)定位元素的大小在垂直方向上過(guò)度受限,將忽略bottom。因此,網(wǎng)站建設(shè)對(duì)于以下情況,bottom的聲明值會(huì)被計(jì)算值5em覆蓋:

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style:"position: absolute; left: 0; width: 100%; background:#CCC;top: 0; height; 5em; bottom: 0; margin: 0;"> element D </div>

</div>

如果屬性過(guò)度受限,沒(méi)有規(guī)定將top忽略。

當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中非替換元素的放置和大小

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/replace-element...html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的自動(dòng)邊偏移

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中替換元素的放置和大小

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