網(wǎng)頁(yè)設計中的百分數和替換元素

  • 2018-10-19 09:20:57
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

百分數

如果width,內邊距和外邊距設置為百分數值,會(huì )應用同樣的基本規則。值聲明為長(cháng)度還是百分數并不重要。

百分數可能很有用。假設你希望一個(gè)元素的內容是其包含塊寬度的2/3,左、右內邊距分別設置為5%,左外邊距為5%,余下的為右外邊距??梢詫?xiě)作:

<p style="width: 67%; padding-right: 5%; padding-lefc: 5%; margin-right: auto; margin-left: 5%;">playing percentages</p>

右外邊距會(huì )計算為包含塊寬度的18%(100%-67%-5%-5%-5%)。

不過(guò)網(wǎng)頁(yè)設計中,如果混合使用百分數和長(cháng)度單位,可能很麻煩??紤]以下例子:

<p style="width: 67%; padding-right: 2em; padding-left: 2em; margin-right: auto; margin-left: 5em;"> mixed lengths</p>

在這種情況下,元素框可能定義如下:

5em + 0 + 2em + 67%+ 2em + 0 + auto =包含塊寬度

為了讓右外邊距的寬度計算為0,元素包含塊的寬度必須是27.272727em (元素內容區寬度為18.272727em)。如果比這寬,右外邊距就會(huì )計算為一個(gè)正值,而比這窄時(shí),右外邊距則會(huì )計算為一個(gè)負值。

如果再加入長(cháng)度值,情況還會(huì )更為復雜,如下:

<p style="width: 67%; padding-right: 15px; padding-left: 10px; margin-right: auto; margin-left: 5em;">more mixed lengths</p>

另外,邊框的寬度不能是百分數,而只能是長(cháng)度,這就使情況更復雜了。網(wǎng)頁(yè)設計基本原則是:只使用百分數將無(wú)法創(chuàng )建完全靈活的元素布局(即所有屬性都可設置),除非你不想使用邊框。

替換元素

到目前為止,我們已經(jīng)介紹了網(wǎng)頁(yè)設計中正常文本流中非替換塊級元素的水平格式化。替換塊級元素管理起來(lái)更簡(jiǎn)單一些。非替換塊元素的所有規則同樣適用于替換塊元素,只有一個(gè)例外:如果width為auto,元素的寬度則是內容的固有寬度。下例中的圖像寬度是20像素,因為這正是原圖像的寬度:

<img src="smile.png" style="display: block; width: auto; margin: 0;">

如果實(shí)際圖像的寬度是100像素,那么元素的寬度也將是100像素。

可以為width指定一個(gè)特定值覆蓋這個(gè)規則。假設將前例修改如下,將這個(gè)圖像顯示3次,每一次的width值都不同:

<img src="smile.png" styles="display: block; width: 25px; margin: 0;">

<img src="smile.png" style="display: block; width: 50px; margin: 0;">

<img src="smile.png" style="display: block; width: 100px; margin: 0;">

結果如圖7-12所示。

注意,元素的高度也會(huì )增加。如果網(wǎng)頁(yè)設計中一個(gè)替換元素的width不同于其固有寬度,那么height值也會(huì )成比例變化,除非height自己也顯式設置為一個(gè)特定值。反過(guò)來(lái)也一樣:如果設置了height,但width保持為auto,則width將隨height的變化成比例調整。

當前文章標題:網(wǎng)頁(yè)設計中的百分數和替換元素

當前URL:http://amzcoolest.com/news/wzzz/percentage-replace.html

上一篇:網(wǎng)頁(yè)設計中的負外邊距

下一篇:網(wǎng)頁(yè)設計中的垂直屬性

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看