文檔流的概念，如何讓元素脫離文檔流
- 文檔流指的是瀏覽器按照html的內容按順序解析并呈現(xiàn)票渠，遇到行內元素就往行內放逐哈，遇到塊級元素就空一行放置，依次排列问顷；
- 定位中的fixed昂秃、定位中的absolute禀梳、浮動都可以讓元素脫離文檔流。
定位方式簡介
- 有
static肠骆、fixed算途、absolute、relative這四種定位方式蚀腿； -
static是靜止嘴瓤，不進行定位，元素還是處于正常的文檔流中莉钙，忽略上下左右的偏移和z-index聲明廓脆，是默認值。 -
fixed是把元素固定住磁玉，是相對于瀏覽器來定位的停忿，會脫離文檔流，可以使用left蚊伞、right席赂、top、bottom來改變固定的位置时迫；一般用于廣告颅停、一些固定提示欄等你想要固定持續(xù)顯示的內容。 -
absolute是相對于上一個使用定位（static除外）的祖先元素進行定位的别垮，如果沒有使用定位的祖先元素便监，就相對于html文檔頁面進行定位，會脫離文檔流碳想，同樣使用left烧董、right、top胧奔、bottom來設定偏移的位置逊移；一般用于使用相對位置的場景，在父元素上加個relative龙填，在給子元素設定absolute進行相對偏移胳泉。 -
relative是相對于元素自身在文檔流中的位置進行偏移的，注意它并不會脫離文檔流岩遗，使用left扇商、right、top宿礁、bottom來設定相對偏移的位置案铺，一般用于微調整元素自身位置。
absolute, relative, fixed 偏移的參考點
-
absolute,relative,fixed偏移的參考點分別是上一個使用除static以外定位的祖先元素（若沒有找到梆靖，則相對于html元素即文檔）控汉、元素自身原本在文檔流中的位置笔诵、瀏覽器窗口。
z-index 的使用
- 可以設定元素的堆疊順序（可以理解為Z軸高度姑子，越高離我們視野就越近乎婿，高度比它小的就被蓋住了），值越大街佑，堆疊優(yōu)先級越高谢翎；使用時將你所要展示出來的元素的z-index值設得比其他遮擋它的元素的值大就可以。
position:relative和負margin使元素位置發(fā)生偏移的區(qū)別
-
position:relative是單單把作用到的元素進行一個位置偏移舆乔，而其他的元素不會因此發(fā)生位置的改變岳服；而負margin是調整外邊距，這樣會影響到它周圍元素布局和位置希俩。
讓一個固定寬高的元素在頁面上垂直水平居中
- 用
position: absolute設置這個元素相對于頁面的top和left為50%，此時該元素的左上角這個點就垂直水平居中了纲辽，之后再用-margin讓其往左颜武、往上分別移動其寬高的一半，達到垂直水平居中的目的拖吼。
浮動元素的特征及對其他元素的影響
- 浮動元素會脫離文檔流鳞上，不占據(jù)空間；
- 其他浮動元素跟它處于同一層吊档，會緊挨著它的邊框放置篙议，如果有其他元素有清除浮動，則會另起一行放置怠硼；
- 普通元素因它脫離文檔流鬼贱，所以會認為它不存在，會頂上它的位置香璃，所以普通元素的一部分會被擋渍饽选；
- 文字遇到浮動元素邊框會避開另起一行有環(huán)繞效果葡秒。
清除浮動
- 清除浮動指的是用clear屬性來設置是否允許它自身周圍存在浮動元素姻乓，這樣可以讓浮動元素因被排斥或排斥其他浮動元素而再往下占據(jù)一行，從而消除對其他元素的影響眯牧；可以設置clear：left蹋岩、right、both來選擇不允許哪一邊存在浮動元素学少。
