1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流概念：網(wǎng)頁布局最原始的一種元素自身所在位置的布局方向。內(nèi)聯(lián)元素從左到右從上到下，塊元素占據(jù)一行從上到下。如下圖：
Paste_Image.png
-
脫離文檔流方式：
-
浮動(float)：
Paste_Image.png
-
-
定位 (position)：
Paste_Image.png
2.有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？
1.position:static(默認(rèn)值)
Paste_Image.png
2.position:relative: 占據(jù)文檔流位置，用于微調(diào)自己的位置，且不會改變其他元素的位置。
Paste_Image.png
3.position:absolute:自身不占據(jù)文檔流位置，也不會改變其他元素的位置。
Paste_Image.png
4.position:fixed:自身不占位置，相對窗口來定位，比較適合做廣告框，讓人惡心的一直出現(xiàn)在屏幕上。
Paste_Image.png
3.absolute, relative, fixed偏移的參考點分別是什么？
前面內(nèi)容中有提及也都有圖示，這里就不做圖示了，簡單回答一下。
- absolute：不占據(jù)文檔流位置，相對它的祖先元素中第一個position值不為static的元素來偏移（不包括邊框）。
- relative：占據(jù)文檔流位置，相對自身占據(jù)的文檔流初始位置來做偏移。
- fixed：不占據(jù)文檔流位置，相對整個web窗口來做偏移。
4.z-index 有什么作用? 如何使用?
- 只對定位元素有效
z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設(shè)置的z-index會是無效的。 - 擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。(可以有負(fù)值)。
Paste_Image.png
Paste_Image.png
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別？
- 當(dāng)使用position:relative發(fā)生位移，首先自身占據(jù)位置不變，周邊其他元素不受影響。如下圖：
Paste_Image.png
- 當(dāng)使用margin發(fā)生位移時，自身占據(jù)位置改變，導(dǎo)致影響其他元素跟著改變位置。如下圖：
Paste_Image.png
6.如何讓一個固定寬高的元素在頁面上垂直水平居中?
- position:absolute+margin
Paste_Image.png
-position:fixed+margin點擊查看代碼
Paste_Image.png
7.浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
-
不占據(jù)文檔流塊元素位置，其他塊元素會無視它的存在正常顯示在本來的位置上，但是影響內(nèi)聯(lián)元素在文檔流中的位置。
Paste_Image.png - 對于其他浮動元素占據(jù)位置，根據(jù)代碼先后其他浮動元素緊跟其后。
Paste_Image.png
8.清除浮動指什么? 如何清除浮動?
-
清除浮動指的是將浮動元素拉回文檔流內(nèi)，讓它撐起浮動后在文檔流中所占用的位置。下圖可以看出不設(shè)置父容器寬高，浮動元素在父容器邊框外。
Paste_Image.png - 在兩個浮動元素后面添加一個沒有內(nèi)容的div， 通過clear:left，清除浮動。
Paste_Image.png
- 給浮動元素一個父容器，并使用E ::after，其實原理一樣，如下圖顯示：
代碼
Paste_Image.png
前面的代碼展示連接由于失誤，點擊顯示的都是最后這個連接（不明白為什么，難道每次寫新題目的代碼都要點擊new bin？）所以刪除了。
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源！
