欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于CSS absolute與relative不得不說的話

  發(fā)布時間：2016-07-21 08:59:43   作者：佚名   我要評論
下面小編就為大家?guī)硪黄P(guān)于CSS absolute與relative不得不說的話。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

寫在開篇：

absolute說：“relative，我這輩子都不想看見你！”

為什么呢？它們明明那么相親相愛，形影不離，這之中到底發(fā)生了什么不為人知的故事，竟然讓absolute如此討厭relative？

要想找到問題的答案，請跟我來。。。

relative對absolute的限制之一

absolute，擁有top、right、bottom、left四項技能，從此天高任鳥飛，海闊任魚躍；本來想去哪兒就去哪兒，自由自在，生活是那么地美好。

直到有一天，在出去玩的路上，遇到一個relative，跳出來大喊一聲；“此山是我開，此樹是我栽，要從此路過，留下買路財！”

然后，我們可愛噠absolute小朋友就乖乖地屈服了。

但是無良的relative收到好處居然還不放行，死活不讓absolute過去。。。額，這個故事就是這樣子的。。。相信大家都懂的。。。

額，還是寫個demo吧，看這里：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative對absolute的限制1</title>  
  6.         <style>  
  7.             .box {   
  8.                 width:500px;   
  9.                 height:250px;   
  10.                 background-color: pink;   
  11.                 margin:30px auto 50px;   
  12.                 line-height: 250px;   
  13.                 text-align:center;   
  14.             }   
  15.   
  16.             .box p {   
  17.                 display: inline-block;   
  18.                 vertical-align: middle;   
  19.                 width:300px;   
  20.                 font-size: 16px;   
  21.                 line-height: 1.5;   
  22.                 text-align: left;   
  23.             }   
  24.   
  25.             .box2 p {   
  26.                 margin-left: 30px;   
  27.             }   
  28.   
  29.             .box img {   
  30.                 position: absolute;   
  31.                 left:0;   
  32.                 top:0;   
  33.             }   
  34.   
  35.             .box2 {   
  36.                 position: relative;   
  37.             }   
  38.   
  39.         </style>  
  40.     </head>  
  41.     <body>  
  42.         <div class="box box1">  
  43.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  44.             <p>今天，absolute小朋友出去玩啦，開啟left:0; top:0; 這個組合技能，一切順利，到達(dá)了天邊。</p>  
  45.         </div>  
  46.   
  47.         <div class="box box2">  
  48.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  49.             <p>今天，absolute小朋友又出去玩啦，同樣開啟left:0; top:0; 這個組合技能，但是天公不作美，出門就碰到relative這個壞家伙，于是止步于relative的地方。</p>  
  50.         </div>  
  51.     </body>  
  52. </html>  

relative對absolute的限制之二

上回說到，absolute小朋友用top、right、bottom、left四項技能出去玩的時候被relative半路給截住了。

這次absolute小伙伴吸取了教訓(xùn)，不用那四項技能了，用margin負(fù)值技能，一樣能跑出去玩。

很好，雖然房子周圍有overflow:hidden的魔法結(jié)界，但是我們的absolute小朋友直接無視之，從容通過，大家鼓掌！??！

但是，但是，但是那個無良的relative又來啦。

還好，還好，還好這次的是margin負(fù)值技能，absolute小朋友成功突破了relative的限制，跑出去啦。。。

額，好像有什么不對。。。

我跑出去那部分身體怎么不見啦？

demo在這里：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative對absolute的限制2</title>  
  6.         <style>  
  7.             .box {   
  8.                 width:500px;   
  9.                 height:250px;   
  10.                 background-color: pink;   
  11.                 margin:50px auto 50px;   
  12.                 overflow: hidden;                   
  13.             }   
  14.   
  15.             .box p {   
  16.                 margin: 20px 30px 20px 120px;   
  17.                 text-align: left;   
  18.             }   
  19.   
  20.             .box img {   
  21.                 position: absolute;   
  22.                 margin-left:-30px;   
  23.                 margin-top: -45px;   
  24.             }   
  25.   
  26.             .box2 {   
  27.                 position: relative;   
  28.             }   
  29.   
  30.         </style>  
  31.     </head>  
  32.     <body>  
  33.         <div class="box box1">  
  34.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  35.             <p>今天，absolute小朋友出去玩啦。</p>  
  36.             <p>鑒于上次用top、right、bottom、left技能的時候遇到了relative，導(dǎo)致出不去的尷尬，今天用的是margin負(fù)值技能。</p>  
  37.             <p>雖然房子周圍設(shè)置了overflow:hidden，但這位強(qiáng)大的小朋友依然跑出去啦。</p>  
  38.         </div>  
  39.   
  40.         <div class="box box2">  
  41.             <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  42.             <p>今天，absolute小朋友又出去玩啦，同樣用的是margin負(fù)值技能。</p>  
  43.             <p>房子周圍也是設(shè)置了overflow:hidden屬性的，但是這位強(qiáng)大的小朋友依然跑出去啦。</p>  
  44.             <p>咦，什么情況，我房子外邊的那部分身體呢？</p>  
  45.             <p>我擦嘞，relative你什么時候來的？</p>  
  46.         </div>  
  47.     </body>  
  48. </html>  

經(jīng)過這兩次事件，absolute小朋友就開始討厭relative小伙伴了，用一句耳熟能詳?shù)脑拋碚f就是，“我再也不想看見你啦”！

請給absolute自由

absolute小朋友天生就會飛，使用top、right、bottom、left想去哪兒就去哪兒。

absolute小朋友還會margin負(fù)值精確定位，想怎么玩就怎么玩。

absolute小朋友那么可愛，不信你看：

這么Q，這么萌，為什么要被限制住呢，寶寶向往天空和自由??！??！??！?。“?！

absolute說：“relative，我再也不想看見你了！”

但是，理想很豐滿，現(xiàn)實很骨感。。。

absolute是不可能得償所愿的，在定位的時候，或多或少都會使用relative來限制absolute，畢竟absolute實在太會飛了，不限制不行的啊。

不過，限制歸限制，這只是relative和absolute兩個人的恩怨，千萬不要影響到其它花花草草。

所以，我們在使用relative+absolute定位的時候，要遵循relative影響最小化原則。

來個例子，如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>relative影響最小化</title>  
  6.         <style>  
  7.             * {   
  8.                 margin:0;   
  9.             }   
  10.   
  11.             .wraper {   
  12.                 width:800px;   
  13.                 margin:50px auto;   
  14.                 background-color: #ccc;   
  15.                 border: 3px solid green;   
  16.             }   
  17.   
  18.             .box {   
  19.                 width:500px;   
  20.                 margin:50px auto;   
  21.                 background-color: orange;   
  22.                 border: 3px solid black;   
  23.             }   
  24.   
  25.             img {   
  26.                 border:1px solid blue;   
  27.                 margin:10px;   
  28.             }   
  29.   
  30.             p {   
  31.                 padding-left:10px;   
  32.                 margin:10px;   
  33.             }   
  34.   
  35.             .absolute {   
  36.                 position: absolute;   
  37.             }   
  38.   
  39.             .box2 .absolute {   
  40.                 margin-left: -3px;   
  41.                 margin-top: -3px;   
  42.             }   
  43.   
  44.             .box3 .absolute {   
  45.                 margin-top:-3px;   
  46.                 margin-left:450px;    
  47.             }   
  48.   
  49.             .box4 .relative {   
  50.                 position: relative;   
  51.                 border:2px solid red;   
  52.             }   
  53.   
  54.             .box4 .absolute {   
  55.                 top:-10px;   
  56.                 right:-10px;   
  57.             }   
  58.         </style>  
  59.     </head>  
  60.     <body>  
  61.         <div class="wraper">  
  62.             <div class="box box1">  
  63.                 <img src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  64.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  65.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  66.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  67.                 <p>這是沒有任何定位，正常流的樣子。</p>  
  68.                 <p>后續(xù)。。。</p>  
  69.             </div>  
  70.         </div><!--關(guān)閉wraper-->  
  71.         <div class="wraper">  
  72.             <div class="box box2">  
  73.                 <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  74.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  75.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  76.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  77.                 <p>如果我們要將圖像定位到黑色邊框的左上角，應(yīng)該怎么辦？</p>  
  78.                 <p>很簡單，絕對定位，不加任何偏移量，用margin微調(diào)，完成！</p>  
  79.             </div>  
  80.         </div><!--關(guān)閉wraper-->  
  81.         <div class="wraper">  
  82.             <div class="box box3">  
  83.                 <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  84.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  85.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  86.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  87.                 <p>如果我們要將圖像定位到黑色邊框的右上角，應(yīng)該怎么辦？</p>  
  88.                 <p>第一種方法，像剛才那樣，直接絕對定位，再用margin調(diào)整；   
  89.                 這種方法需要消耗一點(diǎn)腦細(xì)胞，算一算到底應(yīng)該位移多少像素。</p>  
  90.             </div>  
  91.         </div><!--關(guān)閉wraper-->  
  92.         <div class="wraper">  
  93.             <div class="box box4">  
  94.                 <div class="relative">  
  95.                     <img class="absolute" src="http://image.tianjimedia.com/uploadImages/2012/237/4134F4528419.jpg" alt="A picture" style="width:50px;height:30px" />  
  96.                 </div>  
  97.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  98.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  99.                 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" />  
  100.                 <p>第二種方法，就是大家喜聞樂見的relative+absolute定位啦。</p>  
  101.                 <p>不過，看在absolute那么討厭relative的面子上，relative就只欺負(fù)它一個就好了，千千萬萬不要影響到其它花花草草。</p>  
  102.                 <p>具體來說，給這個需要定位的圖像外加一層div，設(shè)置relative，讓這個relative只影響需要絕對定位的元素。</p>  
  103.                 <p>relative影響最小化！</p>  
  104.             </div>  
  105.         </div><!--關(guān)閉wraper-->  
  106.     </body>  
  107. </html>  

以上這篇關(guān)于CSS absolute與relative不得不說的話就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/20/5688949.html

相關(guān)文章

  • CSS position:absolute全面了解

    下面小編就為大家?guī)硪黄狢SS position:absolute全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-20

  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又
    2014-11-28

  • css中postion的fixed與absolute區(qū)別詳解

    這篇文章主要介紹了css中postion的fixed與absolute區(qū)別詳解,需要的朋友可以參考下
    2014-06-18

  • css中定位中的absolute和relative是什么意思

    做一些浮動層等特殊特殊效果時要考慮到定位問題就要用到Position屬性，其有四個屬性值：static、fixed、absolute和relative，想必后面兩個大家都熟悉吧
    2014-04-15

  • css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用

    position屬性的相關(guān)定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友
    2013-04-08

  • CSS position屬性absolute relative等五個值的解釋

    目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的
    2012-12-15

最新評論