問答：
1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
文檔流就是Html中的元素 按照自上而下 從左到右的的順序進行排版
脫離文檔流的方法
- 浮動
float:left/left - 定位
position: absolute;/relative; / fixed; /sticky;
2.有幾種定位方式，分別是如何實現定位的，使用場景如何？
- static 默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
- relative 生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:40px會向元素的 left 位置添加40px
div.relative{
position:relative;
top:40px;
left:50px;
}
效果如下，其中紅色代表原來位置
Paste_Image.png
- absolute 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定
left top
Paste_Image.png
right bottom
Paste_Image.png
left bottom
Paste_Image.png
right top
Paste_Image.png
- fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定
div.fixed{
position:fixed;
right:20px;
top:40px;
}
Paste_Image.png
-
sticky CSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置
fixed 的兼容性不好 大多數瀏覽器不支持
Paste_Image.png
3.absolute, relative, fixed 偏移的參考點分別是什么
absolute 參考點是離他最近的定義了 position 并且值不是static 的父級元素
relative 的參考點是是相對與元素本身正常位置的定義
fixed 的參考點是瀏覽器窗口
4.z-index 有什么作用? 如何使用?
z-index 可以改變瀏覽器的層疊順序 ，z-index 大的覆蓋小的。
5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
margin和position:relative都可以使元素位置偏移
- 使用position:relative會使元素在原有基礎上進行偏移但是文檔流的位置還是在偏移前的位置，使用margin屬性的時候文檔流的位置已經做出改變
所以在沒有設置浮動的情況下 使用 relative 會遮擋住普通元素，而使用margin不會遮擋普通元素
Paste_Image.png - position:relative 是相對與本身元素的位置進行偏移，margin是 改變元素之間的相對位置
在div 設置float:left屬性后 relative和margin都會覆蓋前面的普通元素，
但是 relative會在以前的位置像是留下了一個占位一樣，后面的元素不會補位，
而margin左偏移后沒有留下占位，后面的元素會補位跟過來
Paste_Image.png
6.如何讓一個固定寬高的元素在頁面上垂直水平居中?
1.在元素外邊加一個div 設置position：relative
2.在元素上設置
position：absolute ;
top: 50%;
left: 50%;
margin-left: -100px; /*寬度一半*/
margin-top: -100px;/*高度一半*/
7.浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
浮動元素不在文檔流中
- 對于其他浮動元素，會占位 （2 遇到1 以后沒有跑到1的位置）
Paste_Image.png
- 對于普通元素來說由于浮動元素不占據文檔流 ，普通元素會占據文檔流的位置
*如果父級元素的寬度不夠的時候，會另起一行
Paste_Image.png
- 還有一種情況我們需要注意 如果 盒 1的高度過高的時候會將盒3擠到一個奇怪的位置，我們在使用浮動排版時要注意 限定浮動元素的高度+浮動元素上加入overfloat屬性 避免浮動元素由子元素撐開的過高
Paste_Image.png
- 對于同級的行內元素例如
<p>標簽來說 會產生包裹的效果。
Paste_Image.png
8.清除浮動指什么? 如何清除浮動?
對元素清理實際上為前面的浮動元素留出了垂直空間,這樣可以解決我們之前的一個問題，看前面的圖片的時候我們發現div內的所有元素浮動的話就會不占據文檔空間，這樣父元素，高度為0，可能很多效果也不見了
使用clear方法清除浮動
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
}
