<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          網頁設計中替換元素的放置和大小

          • 2019-03-19 17:52:43
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.1c4w.com

          網站建設中非替換元素和替換元素的定位規則大不相同。這是因為替換元素有固有的高度和寬度,因此其大小不會改變,除非創作人員有意顯式地修改。因此,在替換元素定位中沒有“恰當收放”行為的概念。

          確定替換元素位置和大小時,所涉及的行為用以下規則描述最為容易,這組規則按順序分別:

          如果width設置為auto,width的實際使用值由元素內容的固有寬度決定。因此,如果一個圖像的寬度是50像素,使用值則計算為50px。如果網站建設顯式聲明了width (也就是說,設置為100px或50%),則width設置為該值。

          在從左向右讀的語言中,如果left值為auto,要把auto替換為靜態位置。在從右向左讀的語言中,則把right的auto值替換為靜態位置。

          如果left或right仍為auto(也就是說,未在上一步中被替換),則將margin-left 或margin-right的auto值替換為0。

          如果此時margin-left和margin-right都還定義為auto,則把它們設置為相等的值,從而將元素在其包含塊中居中。

          在此之后,如果只剰下一個auto值,則將其修改為等于等式的余下部分(使等式滿足)。

          這與非替換元素絕對定位時的基本行為相同(只要假設非替換元素有一個顯式的寬度)。因此,下面兩個元素會有相同的寬度和位置,假設圖像的固有寬度是100像素(見圖10-50):

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

          <img src="frown.gif" alt="a frowny face" style='position: absolute; Cop: 0; left: 50px; margin: 0;">

          <div style="position: absolute; top: 0; left: 50px; width: lOOpx; height: 100px; margin: 0;"> it's a div!

          </div>

          </div>

          圖10-50:絕對定位一個替換元素

          與非替換元素一樣,如果值過度受限,網頁設計員就會忽略right的值(對于從左向右讀的語言),而在從右向左讀的語言中會忽略left的值。因此,在以下例子中,right的聲明值會被計算值50px覆蓋:

          <div style="position: relative; width: 300px;">

          <img src="frown.gif" alt="a frowny face"

          Style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px; margin: 0;">

          類似地,沿垂直軸的布局受以下一坦規則控制:

          如果網頁設計height設置為auto, height的計算值由元素內容的固有高度確定。因此,對于一個50像素高的圖像,其height計算為50px。如果height顯式聲明為某個值(如lOOpx或50W,則height會設置為該值。

          如果top的值為auto,將其替換為替換元素的靜態位置。

          如果bottom的值為auto,將margin-top或margin-bottom的所有auto值替換為0。

          如果此時margin-top和margin-bottom都還定義為auto,將其設置為相等的值,從而使元素在其包含塊中居中。

          在此之后,如果網頁設計僅剩下一個auto值,則將其修改為等于等式中的余下部分(使等式滿足)。

          與非替換元素一樣,如果值過度受限,網頁設計員會忽略bottom。

          因此,以下標記會得到如圖10-51所示的結果:

          <div style="position: relative; height: 200px; width: 200px; border: 1px solid;"><img src="one.gi£' alt="one" widths"25" heights"25" style="position: absolute; top: 0; left: 0.; margin: 0;">

          <img src="two.gif" alt=.two" width="25' style="position: absolute; top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">

          <img src="three.gif alt=" three- heights"25" style="posxtion: absolute; left: 0; width: lOOpx; margin: 10px; bottom: 0;">

          <img src="four.gif_ alc=" four" style="position: absolute; top: 0; height: lOOpx; right: 0; width: 50px;">

          <img src="five.gif" alt="five" style:"position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;">

          當前文章標題:網頁設計中替換元素的放置和大小

          當前URL:http://www.1c4w.com/news/wzzz/replace--element.html

          上一篇:網頁設計中非替換元素的放置和大小

          下一篇:網頁設計中Z軸上的放置

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放