• 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

1 在頁面中從左到右從上到下依次排列元素（快級元素獨占一行）

2

float:left|right
position:absolute|fixed    

都讓元素脫離文檔流 需要注意的是position:relative 并沒有脫離文檔流仍然會占據(jù)中間

• 有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？

position:absolute:絕對定位 依據(jù)離自己最近一個不為static 定位的父元素
在使用雙欄，三欄布局的時候我們會使用到 或者想要一些彈出層 但是又不想對當(dāng)前布局產(chǎn)生影響

position:fixed:絕對定位 根據(jù)瀏覽器的窗口來定位
想要一直展示在頁面的元素 不隨滾動而變 如對話框 導(dǎo)航等

position:relative 相對定位 相對于自身來定位
當(dāng)我們想要微調(diào)一個元素 但是又不想變動周圍其他元素的時候 或者一些相對自身的動畫效果

• absolute, relative, fixed 偏移的參考點分別是什么

absolute 依據(jù)離自己最近一個不為static 定位的父元素

relative 相對于自身原來的位置來定位

fixed 相對于瀏覽器窗口

• z-index 有什么作用? 如何使用?
  相當(dāng)于xzy 中的z軸
  可以控制重疊元素的次序 只有作用在絕對定位元素上才有用

• position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
  使用margin之后元素不再占據(jù)原來的空間
  使用position:relative 元素仍然占據(jù)原來的空間

案例：
http://js.jirengu.com/hogoyujeki/1/edit

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

.div1{
    width: 50px;
    height: 50px;
    border: 1px solid;
    position:absolute;
    right: 50%;
    top: 50%;
    margin-right:-25px;
    margin-top:-25px;
}

.div2{
    width: 50px;
    height: 50px;
    border:1px solid red;
    margin: 0 auto;
    margin-top:50vh;
    position: relative;
    top: -25px;
}

兩種方法

http://js.jirengu.com/yeledipiho/1/edit?html,css,output

• 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?

浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示

浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊

浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊

浮動元素對于其他浮動元素是外邊距靠齊

Paste_Image.png

對于沒有內(nèi)容的元素會忽略浮動元素和浮動元素重疊在一起

Paste_Image.png

對于有內(nèi)容的元素會背景和邊框部分和浮動元素發(fā)生重疊，而內(nèi)容跟浮動元素外邊距靠齊

Paste_Image.png

• 清除浮動指什么? 如何清除浮動?
  清除浮動是指清除浮動造成的影響

在需要清除浮動的元素加上

clear:both;

 .clearfix:afer{
    content: "";
    clear: both;
    display: block;

}

在需要清除浮動的父級元素加上fixclear類名

本教程版權(quán)歸菲龍?zhí)诫?yún)和饑人谷所有，轉(zhuǎn)載須說明來源