浮動渠牲、定位相關(guān)基礎(chǔ)知識問答

一、問答

（一）文檔流的概念指什么步悠？有哪種方式可以讓元素脫離文檔流?

文檔流指的是將窗口分成一行一行签杈，元素按從左至右或從上至下的順序擺放即為文檔流。

有以下方式可以脫離文檔流：
1鼎兽、使用float答姥；
如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .normal-div{
        height: 400px;
        border: 20px solid red;
        background-color: pink;
    }
    .float-div{
        height: 100px;
        width: 100px;
        border: 10px solid green;
        background-color: #ccc;
        float: right;
    }

    
    </style>
</head>
<body>
 <div class="normal-div">我是正常的塊級元素div</div>
 <div class="float-div"> 我是浮動的塊級元素div</div>
</body>
</html>

float脫離文檔流1.png

按正常的文檔流，float-div應(yīng)該位于normal-div的左下方谚咬，結(jié)果其位于右下方了鹦付，且該兩個垂直的div外邊距也未進行折疊；
另：1择卦、值得注意的是float-div并沒有浮動到normal-div的右上方敲长，因為瀏覽器渲染時先渲染normal-div，渲染完成后再渲染float-div秉继，因此此時float-div會在normal-div的右下方祈噪；若將<div class="normal-div">我是正常的塊級元素div</div> 放在<div class="float-div"> 我是浮動的塊級元素div</div>的后面，在float-div則會在normal-div的右上角尚辑；

float脫離文檔流2.png

2辑鲤、使用絕對定位、固定定位腌巾；

如下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .normal-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 5px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 20px;
        left: 20px;
    }
    .absolute-div{
        height: 200px;
        border: 15px solid blue;
        position: absolute;
        top: 150px;
        right: 300px;
    }
    
    </style>
</head>
<body>

 <div class="normal-div">我是正常的塊級元素div</div>
 <div class="fixed-div">我是固定定位的塊級元素div</div>
 <div class="normal-div">我是正常的塊級元素div</div> 
 <div class="normal-div">我是正常的塊級元素div</div> 
 <div class="normal-div">我是正常的塊級元素div</div>
 <div class="absolute-div">我是絕對定位的塊級元素div</div> 
 <div class="normal-div">我是正常的塊級元素div</div> 
 <div class="normal-div">我是正常的塊級元素div</div> 
</body>
</html>

固定及絕對定位脫離文檔流.png

（二）有幾種定位方式，分別是如何實現(xiàn)定位的铲觉，使用場景如何澈蝙？

有四種定位方式
1、static 靜態(tài)定位方式
其為文檔的默認定位方式撵幽，不會脫離文檔流灯荧，其會忽略top、 right盐杂、 bottom逗载、 left哆窿、 z-index 等聲明；
2厉斟、absolute 絕對定位方式
使用該定位方式其會脫離文檔流挚躯，其會相對于static定位以外的第一個父元素進行定位，其支持top擦秽、 right码荔、 bottom、 left感挥、 z-index 等聲明缩搅；
3、relative 相對定位方式
其會相對其正常位置進行定位触幼，不會脫離文檔流硼瓣；
4、fixed 固定定位方式
相對窗口進行定位置谦，其不會隨著頁面翻動而移動堂鲤，其完全脫離文檔流；

（三）absolute, relative, fixed 偏移的參考點分別是什么霉祸？

1筑累、absolute偏移參考點
a、若指定了left/right丝蹭、top/bottom慢宗，其會參考除static以外的第一個父元素的原始坐標點，若父元素沒有定義定位方式其會往祖元素找里奔穿，若還沒找到則繼續(xù)往上找镜沽，直至找到為止，若均未找到贱田，則會參考瀏覽器的左上角原點坐標缅茉；
另：當存在嵌套關(guān)系時，比如一個div里包裹了一個absolute元素男摧，且該div定位方式已經(jīng)確定蔬墩，則absolute元素的參考點為div里內(nèi)容區(qū)的左上角為參考點，如下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }
    .absolute-div{
        height: 200px;
        border: 20px solid blue;
        position: absolute;
        top: 150px;
        left: 300px;
    }
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的塊級元素div</div>
 <div class="fixed-div">我是固定定位的塊級元素div</div>
 <div class="static-div">我是正常的塊級元素div</div>
 <div class="relative-div">我是相對定位的塊級元素div
    <div class="absolute-div">我是絕對定位的塊級元素div</div> 
 </div>

 <div class="static-div">我是正常的塊級元素div</div> 
 <div class="static-div">我是正常的塊級元素div</div> 
</body>
</html>

上述代碼中 absolute-div定義了position: top: 150px; left: 300px;

absolute-div坐標如下：（560px耗拓，660px）

absolute-div坐標.png

而relative-div坐標如下：（250px拇颅，500px）

relative-div坐標.png

兩者橫坐標相減得 310px；縱坐標相減得160px乔询；而relative-div的border寬度為10px樟插，因此此時absolute-div的參考點為relative-div的內(nèi)容區(qū)左上角；（將relative-div的border寬度變更為20px后，還是可以看出absolute-div的參考點為relative-div的內(nèi)容區(qū)左上角）

b黄锤、若未指定left/right搪缨、top/bottom，但指定了其父元素的定位方式鸵熟，則其會視內(nèi)容區(qū)的元素而定進行擺放副编；如上面代碼將absolute-div的position: top: 150px; left: 300px; 注釋掉后會形成這樣的情況：

注釋后.png

c、若未指定left/right旅赢、top/bottom齿桃，且其父元素及父元素以上均未指定定位方式，其會脫離文檔流煮盼，但其會定位在后出現(xiàn)的文檔流的原始坐標上短纵；如下述代碼中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }
    .absolute-div{
        height: 200px;
        border: 20px solid blue;
        position: absolute;


    }
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的塊級元素div</div>
 <div class="fixed-div">我是固定定位的塊級元素div</div>
 <div class="static-div">我是正常的塊級元素div</div>
 <div class="relative-div">我是相對定位的塊級元素div </div>
 <div class="absolute-div">我是絕對定位的塊級元素div</div> 
 <div class="static-div">我是正常的塊級元素div</div> 
 <div class="static-div">我是正常的塊級元素div</div>
 <div class="static-div">我是正常的塊級元素div</div> 
</body>
</html>

運行后，可見下圖

未指定位置及定位方式.png

2僵控、relative偏移參考點

其參考點為其本身香到；運行如下代碼，可見其相對自身偏移了（250px报破，100px）悠就。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing:border-box;

    }
    .static-div{
        height: 200px;
        border: 10px solid red;
        background-color: pink;
    }
    .fixed-div{
        height: 40px;
        border: 10px solid green;
        background-color: #ccc;
        position: fixed;        
        top: 250px;
        left: 100px;
    }


    
    .relative-div{
        height: 200px;
        width: 400px;
        border: 10px solid yellow;
        background-color: #ccc;
        position: relative;
        top:100px;
        left:250px;
    }
    
    </style>
</head>
<body>

 <div class="static-div">我是正常的塊級元素div</div>
 <div class="fixed-div">我是固定定位的塊級元素div</div>
 <div class="static-div">我是正常的塊級元素div</div>
 <div class="relative-div">我是相對定位的塊級元素div </div>
 <div class="static-div">我是正常的塊級元素div</div> 
 <div class="static-div">我是正常的塊級元素div</div>
 <div class="static-div">我是正常的塊級元素div</div> 
</body>
</html>

相對定位.png

3、fixed 偏移參考點為瀏覽器窗口本身充易，與頁面無關(guān)梗脾，即滾動頁面其不會隨之移動，而是固定在窗口的指定位置上盹靴；

運行上述代碼后炸茧，可見fixed-div一直固定在（100px 250px）上不動；

fixed定位.png

（四）z-index 有什么作用? 如何使用?

其可設(shè)置各個定位元素面向用戶的層次順序稿静；其值越大梭冠，則表明越在頁面的外層；例如如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }
  .static-div{
      height: 200px;
      border: 10px solid red;
      background-color: pink;
      z-index: 0;
  }
  .fixed-div{
      height: 40px;
      border: 10px solid green;
      background-color: #ccc;
      position: fixed;        
      top: 250px;
      left: 100px;
      z-index: 1;
  }
  .absolute-div{
      height: 200px;
      border: 20px solid blue;
      position: absolute;
      top: 150px;
      left: 300px;

  }
  .relative-div{
      height: 200px;
      width: 400px;
      border: 10px solid yellow;
      background-color: #ccc;
      position: relative;
      top:100px;
      left:250px;
      z-index: 2;
  }

  </style>
</head>
<body>

<div class="static-div">我是正常的塊級元素div</div>
<div class="fixed-div">我是固定定位的塊級元素div</div>
<div class="static-div">我是正常的塊級元素div</div>
<div class="relative-div">我是相對定位的塊級元素div
  <div class="absolute-div">我是絕對定位的塊級元素div</div> 
</div>

<div class="static-div">我是正常的塊級元素div</div> 
<div class="static-div">我是正常的塊級元素div</div> 
</body>
</html>

z-index使用舉例.png

加入z-index后改备，relative-div在fixed-div的前面控漠，正常如果不設(shè)置的話，fixed-div應(yīng)該在relative-div的前面悬钳；

（五）position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別盐捷？

區(qū)別是使用position:relative ，該元素原來的位置不會脫離文檔流默勾，即使用時可能會出現(xiàn)空白的情況碉渡，而負margin則不存在這樣的情況；

（六）如何讓一個固定寬高的元素在頁面上垂直水平居中?

可采用絕對定位再使用負margin的方式灾测，具體見下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }

  .normal-div{
      height: 400px;
      width: 200px;
      border: 10px solid green;
      background-color: #ccc;
      position: absolute;
      top: 50%;
      left:50%;
      margin-left: -100px;
      margin-top: -200px;

  }

  </style>
</head>
<body>

<div class="normal-div">我是正常的塊級元素div</div>

</body>
</html>

運行結(jié)果如下：

垂直水平居中.png

（七）浮動元素有什么特征爆价？對其他浮動元素、普通元素媳搪、文字分別有什么影響?

浮動元素會脫離文檔流铭段；

碰到其他浮動元素其并不會忽略；
遇見塊級元素其會完全忽略浮動元素秦爆，但遇到塊級元素中的內(nèi)聯(lián)元素或直接的內(nèi)聯(lián)元素序愚，內(nèi)聯(lián)元素會環(huán)繞該浮動元素；
遇見文字時等限，文字會環(huán)繞在浮動元素周圍爸吮；

（八）清除浮動指什么? 如何清除浮動?

清除浮動指的是不允許對應(yīng)的元素（即該設(shè)置的元素）左邊、右邊或兩邊存在浮動元素望门；
1形娇、清除上級元素的浮動方法如下：clear:right/left/both ；
例如見下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
      margin: 0px;
      padding: 0px;
      box-sizing:border-box;

  }
  .normal-div{
    height: 200px;
    width: 1000px;
    border: 10px solid yellow;
    background-color: #ccc;
    clear: right;


  }
  .float-div{
    height: 200px;
    width: 400px;
    border: 10px solid green;
    background-color: pink;
    float: right;

  }

  </style>
</head>
<body>

<div class="normal-div">我是正常的塊級元素div</div>
<div class="float-div">我是<em>浮動的</em>塊級元素div</div>
<div class="normal-div">我是正常的塊級元素div</div>

</body>
</html>

清除浮動.png

上述代碼清除浮動后筹误，第二個normal-div 位置偏移至下一行了桐早，其右邊不再有浮動元素了。

2厨剪、清除父元素中的子元素的方法（在父元素中加清除浮動：逶汀）有如下幾種：

前后綴法

.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1; /* for ie 6,7*/
}

overflow法

 .clearfix{
    overflow:hidden;
    _zoom:1; /* for ie 6*/
}

二、代碼

（一）寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側(cè)邊欄寬度200px, 右側(cè)邊欄寬度700px
1祷膳、做完可參考范例
2陶衅、ps: 圖片左浮動，導(dǎo)航欄整體右浮動直晨，導(dǎo)航欄里面的li元素左浮動搀军。
3、ps: aside左浮動抡秆，main左浮動
4奕巍、凡是有浮動的地方，其直接父元素必須清除浮動

代碼詳見此處--按要求浮動或此處--按自己思路

（二）不適用背景圖片實現(xiàn)如下效果

Paste_Image.png

范例

代碼詳見此處---非偽類或此處--偽類法

**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封所有儒士，如需轉(zhuǎn)載請注明出處的止。謝謝！ *

最后編輯于：2017.12.03 08:54:37

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末着撩，一起剝皮案震驚了整個濱河市诅福，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌拖叙，老刑警劉巖氓润，帶你破解...
沈念sama閱讀 218,546評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異薯鳍，居然都是意外死亡咖气，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,224評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來崩溪，“玉大人浅役，你說我怎么就攤上這事×嫖ǎ” “怎么了觉既？”我有些...
開封第一講書人閱讀 164,911評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長乳幸。經(jīng)常有香客問我瞪讼，道長，這世上最難降的妖魔是什么粹断？我笑而不...
開封第一講書人閱讀 58,737評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任符欠，我火速辦了婚禮，結(jié)果婚禮上瓶埋，老公的妹妹穿的比我還像新娘背亥。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 67,753評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著俩滥，像睡著了一般晨炕。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,598評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼尖啡。笑死，一個胖子當著我的面吹牛剩膘，可吹牛的內(nèi)容都是我干的衅斩。我是一名探鬼主播，決...
沈念sama閱讀 40,338評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼怠褐，長吁一口氣：“原來是場噩夢啊……” “哼畏梆！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起奈懒，我...
開封第一講書人閱讀 39,249評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤奠涌，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后磷杏，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體溜畅，經(jīng)...
沈念sama閱讀 45,696評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,888評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年极祸，在試婚紗的時候發(fā)現(xiàn)自己被綠了慈格。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怠晴。...
茶點故事閱讀 40,013評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖浴捆，靈堂內(nèi)的尸體忽然破棺而出龄寞，到底是詐尸還是另有隱情，我是刑警寧澤汤功，帶...
沈念sama閱讀 35,731評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站溜哮，受9級特大地震影響滔金，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜茂嗓，卻給世界環(huán)境...
茶點故事閱讀 41,348評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一餐茵、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧述吸，春花似錦忿族、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,929評論 0贊 22
一樁弒父案道批，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至入撒，卻和暖如春隆豹，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背茅逮。一陣腳步聲響...
開封第一講書人閱讀 33,048評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工璃赡，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人献雅。一個月前我還...
沈念sama閱讀 48,203評論 3贊 370
代替公主和親
正文我出身青樓碉考，卻偏偏與公主長得像，于是被迫代替她去往敵國和親挺身。傳聞我的和親對象是個殘疾皇子侯谁，可洞房花燭夜當晚...
茶點故事閱讀 44,960評論 2贊 355

浮動、定位相關(guān)基礎(chǔ)知識問答