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

文檔流就是元素從左到右，從上到下排列；

元素脫離文檔流可以進行如下設置：position:absolute、position：fixed，float:left、float:right可以脫離文檔流。

二、有幾種定位方式，分別是如何實現定位的，使用場景如何？

定位方式有四種，position：static，默認的樣式，即元素正常出現在文檔流中；默認樣式時設置top、right、z-index不起作用。

position:absolute,絕對定位。即元素脫離文檔流，依據第一個定位樣式為非static的父容器進行定位，如果父容器都沒有設置position,則根據body進行設置；

position:relative，相對定位。元素不脫離文檔流，相對于自己原來的位置定位，但是之前的文檔流還在，后面的元素直接接著原來的位置排列，忽略偏移后的元素位置

position:fixed，固定定位。即元素脫離文檔流，相對于瀏覽器窗口進行定位。廣告位一般用fixed定位，不管滾動條如何滾動，元素始終在原來的位置，不會改變。

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

absolute偏移參考點是相對于第一個有定位設置（relative absolute fixed）的父元素，如果不存在已進行定位的父元素，那么相對于最初的根元素

relative相對于自己原來的位置（在文檔中的初始位置）進行偏移

fixed相對于瀏覽器窗口進行定位，無論滾動條怎么滾動，內容始終在原來的位置不會改變。

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

z-index設置元素的層疊，對要顯示的元素進行設置，避免遮蓋。在元素設置position：relative(absolute/fixed)時有效。

值越大，可以覆蓋值小的元素，即最大的可見，較小的被覆蓋，值可以為負值；都沒有設置時，誰在后面顯示誰

五、position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position:relative和負margin都可以設置偏移，但是position:relative脫離文檔流，不占位置，不影響其前后的元素；負margin占位置，會影響其后面元素。

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

讓固定寬高的元素再頁面上水平垂直居中，可以進行如下設置：

在position:absolute的前提下，設置top:50%；left:50%;margin-left:-寬度的一半；margin-top:-高度的一半（如果未設置position：absolute,無效）

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

浮動的元素可以向左或向右浮動，直到它的外邊緣碰到另一個元素或者另一個浮動元素或者邊框；

浮動元素脫離文檔流，對其他浮動元素來說，其他浮動元素會緊挨此元素進行相應的浮動；

浮動元素對其他普通元素來說，由于浮動元素不占位置，不保留原始位置，其他元素會直接占據其位置，從浮動元素原始位置左上角排列；

浮動元素對文字，文字會緊挨著向左浮動元素右側（向右浮動元素左側）排列，放不下的時候會下行。

八、清除浮動指什么? 如何清除浮動?

浮動會對后面的元素造成影響，清除浮動是指清除其他浮動元素對元素造成的影響；

clear:none(不清除浮動，允許該元素左右兩側有浮動元素);clear:left（清除元素左邊浮動，不允許左邊有浮動元素）;clear:right（清除元素右邊浮動，不允許該元素右邊右浮動元素）;clear:both（清除浮動，不允許該元素左右兩側有浮動元素）

本教程版權歸 崔敏嫣 和 饑人谷 所有，轉載須說明來源