<u id="g9yg5"></u>

<video id="g9yg5"></video>

<source id="g9yg5"></source>
<b id="g9yg5"><acronym id="g9yg5"><bdo id="g9yg5"></bdo></acronym></b>

    1. <source id="g9yg5"><track id="g9yg5"><ins id="g9yg5"></ins></track></source>

      常用技巧margin負外邊距的使用方法(margin,web開發)

      時間:2024-04-23 06:25:45 作者 : 石家莊SEO 分類 : web開發
      • TAG :

      css中的負邊距(negative margin)是布局中的一個常用技巧,只要運用得合理常常會有意想不到的效果。很多特殊的css布局方法都依賴于負邊距,所以掌握它的用法對于前端的同學來說,那是必須的。

      負邊距在普通文檔流中的作用和效果

      那些沒有脫離文檔流的元素(指不是浮動元素也不是絕對定位、固定定位的元素等),其在頁面中的位置是跟隨者文檔流的變化而變化的??聪旅孢@幅圖:

      常用技巧margin負外邊距的使用方法

      負邊距對這些由文檔流控制的元素的作用是,會使它們在文檔流中的位置發生偏移,但這種偏移不同于相對定位,通過相對定位偏移后,其仍然會堅守著它原來占據的空間,不會讓文檔流的其它元素乘虛而入。而通過負邊距進行偏移的元素,它會放棄偏移前占據的空間,這樣它后面文檔流中的其它元素就會“流”過來填充這部分空間。還是通過例子來說明吧?,F在我們把上圖中的塊狀元素、行內元素以及inline-block元素都設一個負邊距 margin:-10px; 看看會發生什么:

      常用技巧margin負外邊距的使用方法

      我們看到,黑灰色的塊狀元素好像向左和向上都分別嵌入了瀏覽器窗口的邊界里10px,然后塊狀元素下面的文字也爬到了它身上,行內元素向左移動蓋住了它前面的一個字,它后面的文字也有一部分覆蓋在了它身上,inline-block的位置變化也很明顯。

      好了,這點相信大家早就心知肚明了,就是負的邊距好像能減小元素在文檔流中的尺寸一樣,但事實上,它的尺寸大小并沒變,只是文檔流在計算元素位置的時候,會認為負邊距把元素的尺寸減小了,因為位置也就發生變化了。這只是打個很形象的比喻,幫助大家理解一下。還要注意的是,文檔流只能是后面的流向前面的,即文檔流只能向左或向上流動,不能向下或向右移動。

      所以,一切只要是由文檔流決定的東西,負邊距就能起作用了。

      比如,一個沒有設定高度的塊狀元素,其高度是自動的,具體來說就是由它里面的文檔流最后的位置決定的。假設它里面有一個出于文檔流中的子元素,高度為100px;那這時這個父元素的高度就等于子元素的高度100px了,如果子元素繼續增高,那么父元素也會跟著增高??墒侨绻@時子元素設一個負的margin-bottom,比如-20px,因為負邊距會影響到文檔流,本來文檔流的高度是從父元素的最頂端到子元素的最底端這段高度,現在子元素有一個margin-bottom:-20px;就相當于文檔流要向上退后20px,這樣整個文檔流的高度就減少了20px了,那么父元素的高度也會跟著減少20px。在標準瀏覽器中,這還需要父元素擁有一個overflow:hidden的屬性才能辦到,在IE瀏覽器中則不需要。所以以前所說的多列等高布局就是利用這個原理來實現的。

      總之一句話,在文檔流中,元素的最終邊界是由margin決定的,margin為負的時候就相當于元素的邊界向里收,文檔流認的只是這個邊界,不會管你實際的尺寸是多少。

      左和右的負邊距對元素寬度的影響

      負邊距不僅能影響元素在文檔流中的位置,還能增加元素的寬度!

      這個作用能實現的前提是:該元素沒有設定width屬性(當然width:auto是可以的)。

      比如下圖的黑灰色部分是一個塊狀元素,它沒有設定寬度。它被包裹在一個寬度為400px,且水平居中的父元素中。

      常用技巧margin負外邊距的使用方法

      現在給這個元素的設一個margin-right:-100px;

      常用技巧margin負外邊距的使用方法

      我們看到它的寬度的確變長100px;然后再給它設一個margin-left:-100px;

      常用技巧margin負外邊距的使用方法

      我們看到它變得更寬了。

      負的margin會改變元素的寬度,這的確很讓人費解,如果說負邊距會改變元素在文檔流中的位置還是很好理解的話,那改變寬度這種現象還真的蠻讓人不可思議的。

      那這貨有什么用途呢?我就舉一個例子吧。

      常用技巧margin負外邊距的使用方法

      想要創建上圖中黑框內的幾個元素按順序排下來,中間帶些間隔的布局要怎么做?,當然最簡單省事的方法就是利用浮動了。我們把黑框里面的子元素向左浮動,然后設一個合適的margin-right,是不是就辦到了呢?但因為外邊黑框的寬度是固定的,就是里面四個子元素的寬度加上三列間隔的寬度,所以靠近右邊邊界的子元素就不應該有正向的margin-right了,否則這一行就只能容納三個子元素了。有人說那這還不簡單,給靠近右邊界的那些子元素加一個class,把它的margin-right設為0不就行了。這當然可以,但如果這些子元素是在模板中通過循環動態輸出的,那在循環的時候還得判斷哪些子元素是靠近右邊邊界的,如果是就加上一個class。這樣做的話是不是就有點麻煩了?所以解決辦法是加大子元素的父容器的寬度,讓它能夠容納一行中有四個子元素加上四列間隔的寬度,然后最外面的的黑框的那個容器設一個overflow:hidden就行了。上面說了負的左右邊距能加大元素的寬度,所以給子元素的父容器設一個合適的負的margin-right就可以了。當然你也可以直接在css中把子元素的父容器的寬度設寬一些,舉這個例子只是為了說明負邊距也是一種方法??聪峦暾拇a:

      代碼如下:


      <style>
      body,ul,li{ padding:0; margin:0;}
      ul,li{ list-style:none;}
      .container{ height:210px; width:460px; border:5px solid #000;}
      ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一個負的margin-right,相當于把ul的寬度增加了20px*/
      li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
      </style>
      <div class="container">
      <ul>
      <li>子元素1</li>
      <li>子元素2</li>
      <li>子元素3</li>
      <li>子元素4</li>
      <li>子元素5</li>
      <li>子元素6</li>
      <li>子元素7</li>
      <li>子元素8</li>
      </ul>
      </div>

      負邊距對浮動元素的影響

      負邊距對浮動元素的影響與負邊距對文檔流中元素的影響其實是差不多的。文檔流中元素的位置由文檔流的走向決定,浮動的元素也可以看成有一個“浮動流”存在,不過浮動流既可以向左,也可以向右。

      比如下圖是三個向左浮動的元素,寬高都是100px:

      常用技巧margin負外邊距的使用方法

      現在把它們都設一個margin-right:-50px; 然后會變成這樣子:

      常用技巧margin負外邊距的使用方法

      我們看到后面的元素疊到了前面的元素上。

      再看下面的圖:

      常用技巧margin負外邊距的使用方法

      我們把瀏覽器縮小了,然后因為寬度不夠,元素3掉下來了。我們給元素3設一個margin-left:-80px;看看會怎么樣

      常用技巧margin負外邊距的使用方法

      這時我們看到元素3上去了,而且還覆蓋了元素2的一部分。繼續元素3設為margin-left:-100px

      常用技巧margin負外邊距的使用方法

      這時元素3完全覆蓋住了元素2,當元素3設為:margin-left:-200px時:

      常用技巧margin負外邊距的使用方法

      我們看到元素3繼續向左移動并覆蓋住了元素1。

      現在想必大家都明白了負邊距對浮動元素位置的影響了吧。所以那些說得很好聽的什么圣杯布局、雙飛翼布局啊什么的,都是利用這個原理實現的。就是某個元素雖然是寫在了后面,但可以通過負邊距讓它在瀏覽器顯示的時候是在前面的。這個以后可以再慢慢講。

      負邊距對絕對定位元素的影響

      絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離,這個元素自身的邊界指的就是margin定義的邊界,所以,如果margin為正的時候,那它的邊界是向外擴的,如果margin為負的時候,則它的邊界是向里收的。利用這點,就有了經典的利用絕對定位來居中的方法:

      常用技巧margin負外邊距的使用方法

      看下效果:

      常用技巧margin負外邊距的使用方法

      但該方法的缺點是必須要知道要居中元素的高度和寬度。

       </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
      本文:常用技巧margin負外邊距的使用方法的詳細內容,希望對您有所幫助,信息來源于網絡。
      上一篇:如何使用條件注釋判斷IE瀏覽器版本適用于IE5.0及以上版本下一篇:

      11 人圍觀 / 0 條評論 ↓快速評論↓

      (必須)

      (必須,保密)

      阿貍1 阿貍2 阿貍3 阿貍4 阿貍5 阿貍6 阿貍7 阿貍8 阿貍9 阿貍10 阿貍11 阿貍12 阿貍13 阿貍14 阿貍15 阿貍16 阿貍17 阿貍18
      中文字幕第63久久_欧美乱人伦视频中文字幕_337p大胆精品_午夜亚洲福利在线老司机

      <u id="g9yg5"></u>

      <video id="g9yg5"></video>

      <source id="g9yg5"></source>
      <b id="g9yg5"><acronym id="g9yg5"><bdo id="g9yg5"></bdo></acronym></b>

      1. <source id="g9yg5"><track id="g9yg5"><ins id="g9yg5"></ins></track></source>