1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
答：文檔流是文檔在排列的時(shí)候所占據(jù)的位置，將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。脫離文檔流即表示元素不在應(yīng)該的那個(gè)位置了汪厨。采用浮動(dòng)布局時(shí)候的float滋饲，以及定位中position:fixed/absolute;都可以使元素脫離文檔流。
2.有幾種定位方式查库，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何黄琼？
3.absolute, relative, fixed偏移的參考點(diǎn)分別是什么樊销？
答：position屬性有以下四個(gè)較為常用的值，可以實(shí)現(xiàn)不同的定位方式：
- static-默認(rèn)值 沒(méi)有設(shè)置定位 元素會(huì)正常出現(xiàn)在文檔流中。
-
relative-相對(duì)定位现柠，元素不會(huì)脫離文檔流院领，相對(duì)自己原來(lái)的位置移動(dòng)。
relative -
absolute-絕對(duì)定位够吩，元素會(huì)脫離文檔流比然，相對(duì)于父容器進(jìn)行移動(dòng)（父元素沒(méi)有定位的元素則逐級(jí)向上查找）。
absolute -
fixed-絕對(duì)定位周循，根據(jù)瀏覽器視窗來(lái)定位强法。一般用于小聊天窗口，固定位置的廣告等等湾笛。
fixed
4.z-index 有什么作用? 如何使用?
答：z-index 是設(shè)置元素的層疊順序饮怯，數(shù)值越大在上面。
z-index就是網(wǎng)頁(yè)的z軸,當(dāng)你定義的CSS中有position屬性值為absolute嚎研、relative或fixed蓖墅，用z-index此取值方可生效。此屬性參數(shù)值越大临扮，則被層疊在最上面论矾。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
答：把Margin的值設(shè)置為負(fù)數(shù)，當(dāng)margin-top杆勇、margin-left為負(fù)值的時(shí)候贪壳，會(huì)把元素上移、左移蚜退，同時(shí)文檔流中的位置也發(fā)生相應(yīng)變化,而對(duì)position:relative的元素設(shè)置top闰靴、left后元素還占據(jù)原來(lái)位置。元素不會(huì)脫離文檔流钻注。
6.如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
答：
垂直居中一般利用絕對(duì)定位中的負(fù)邊距實(shí)現(xiàn)蚂且，首先用absolute把元素設(shè)置為絕對(duì)定位，再將top和left為50%队寇，再對(duì)元素設(shè)置其自身高度膘掰、長(zhǎng)度一般的負(fù)邊距章姓，使元素中心移動(dòng)到父元素中心佳遣，實(shí)現(xiàn)居中對(duì)齊。
7.浮動(dòng)元素有什么特征凡伊？對(duì)其他浮動(dòng)元素零渐、普通元素、文字分別有什么影響?
答：浮動(dòng)元素是脫離文檔流的系忙。如果碰到另一個(gè)浮動(dòng)元素或者邊框才會(huì)停止浮動(dòng)诵盼。如果碰到文字文字會(huì)圍繞在浮動(dòng)元素周圍并且下一個(gè)普通的元素會(huì)占據(jù)浮動(dòng)元素之前的位置。
8.清除浮動(dòng)指什么? 如何清除浮動(dòng)?
答：一般來(lái)說(shuō)如果我們不給父容器定義寬度，它會(huì)被包含的元素自動(dòng)撐開风宁。但如果元素變成浮動(dòng)元素了洁墙，容器不會(huì)被撐開。所以這時(shí)候要清除浮動(dòng)戒财。
1热监、背景不能顯示由于浮動(dòng)產(chǎn)生，如果對(duì)父級(jí)設(shè)置了（CSS background背景）CSS背景顏色或CSS背景圖片饮寞，而父級(jí)不能被撐開孝扛，所以導(dǎo)致CSS背景不能顯示。
2幽崩、邊框不能撐開如上圖中苦始，如果父級(jí)設(shè)置了CSS邊框屬性（css border），由于子級(jí)里使用了float屬性慌申，產(chǎn)生浮動(dòng)陌选，父級(jí)不能被撐開，導(dǎo)致邊框不能隨內(nèi)容而被撐開蹄溉。
3柠贤、margin padding設(shè)置值不能正確顯示由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding、css margin屬性的值不能正確表達(dá)类缤。特別是上下邊的padding和margin不能正確顯示臼勉。
使用以下語(yǔ)句清除浮動(dòng)：
clear:right（右邊不允許浮動(dòng)）/left（左邊不允許浮動(dòng)）/both（兩邊都不允許浮動(dòng)）
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源餐弱。
