參考書籍：
? ? 《編寫高質(zhì)量代碼：web前端修煉之道》第四章
????《精通CSS：web高級標(biāo)準(zhǔn)解決方案》第三章
寫在前面的話：
? ? 1性锭、css中的三種基本定位機(jī)制：
? ? ? ? ? ? a趋惨、普通流：元素框的位置由其在HTML中的位置確定。
? ? ? ? ? ? b、浮動羔飞。
? ? ? ? ? ? c拼岳、絕對定位。
? ? 2窘游、行內(nèi)框在一行中水平排列唠椭，可以使用水平內(nèi)邊距、邊框及外邊距來設(shè)置他們的水平間距忍饰，但是贪嫂，垂直內(nèi)邊距、邊框及外邊距不影響行內(nèi)框的高度艾蓝，同樣力崇，對行內(nèi)框顯示設(shè)置的高度或?qū)挾纫膊粫А?/p>
? ? ? ? 由這一行所形成的框稱為行框斗塘。行框的高度總是足以容納它所包含的所有行內(nèi)框（及由高度最高的行內(nèi)框確定）。但是卻可以設(shè)置該行框的行高line-height亮靴。所以修改行內(nèi)框尺寸的方式：修改行高或者內(nèi)邊距馍盟、邊框、外邊距茧吊。
? ? ? ? ?3贞岭、沒有顯示定義也會創(chuàng)建塊級元素或者行框的情況：
? ? ? ? ? ? ? ? a、將一些文本添加到塊級元素的開頭（例如div）搓侄，這些文本會形成匿名塊框瞄桨。
<div>
????sometextpppp
? ? <p>hello</p>
</div>
? ? ? ? ? ? ? ? b、對于塊級元素的文本行讶踪，每行都會形成一個匿名行框芯侥，無法對匿名行框應(yīng)用樣式。
定位
寫在前面的話：
? ? ? ? 1俊柔、對于正常的文檔流還有這樣的一種表述方式：文檔看起來是二維結(jié)構(gòu)筹麸，但其實(shí)它是具有z軸的，并且由z-index來表示雏婶。默認(rèn)情況下物赶，元素都是處于z-index = 0 這一層。position：absolute/relative會激活元素的top留晚，left酵紫，bottom，right和z-index屬性（默認(rèn)情況下這些屬性是未激活的错维，設(shè)置了也不會生效）奖地。
? ? ? ? 2、設(shè)置了position：absolute/relative的元素會發(fā)生浮動赋焕，脫離z-index=0這一層参歹，而float設(shè)置了浮動元素，但其仍處于z-index=0這一層隆判，這也就是為什么浮動元素會影響到普通流中元素的布局犬庇。
? ? ? ? 3、摘自MDNposition的原文
????????????If both?top?and?bottom?are specified (technically, not?auto),?top?wins.
????????????If both?left?and?right?are specified,?left?wins when?direction?is?ltr?(English, horizontal Japanese, etc.) ????????and?right?wins when?direction?is?rtl?(Persian, Arabic, Hebrew, etc.).
（一）侨嘀、相對定位：relative
? ??????使用相對定位臭挽，元素仍占用他在普通文檔流中的空間，然后相對與它在普通流中的位置進(jìn)行定位咬腕。所以欢峰，移動該元素會覆蓋其他的元素。
（二）、絕對定位：absolute
? ? ? ? ? ? 1纽帖、絕對定位元素脫離了普通流宠漩，在普通流中不占據(jù)空間，普通流中的元素可視為該元素不存在抛计。
? ? ? ? ? ? 2哄孤、絕對定位元素相對于最近已定位（absolute/relative）父元素進(jìn)行定位，如果不存在這樣的元素吹截，則該元素相對于畫布或者HTML進(jìn)行定位瘦陈。
? ? ? ? ? ? 3、因?yàn)樗徽紦?jù)普通流中的位置波俄，所以它可能會覆蓋其他元素晨逝，可以通過設(shè)置z-index來設(shè)置堆疊次序。
（三）懦铺、固定定位：fixed
? ? 它是絕對定位的一種捉貌，不同的是它是相對于瀏覽器的視口進(jìn)行定位。
（四）冬念、浮動定位：float
? ? ? ? ? ? 1趁窃、浮動的框可以左右移動，直到他的外邊緣碰到包含框或者另一個浮動框急前。
? ? ? ? ? ? 2醒陆、浮動元素會覆蓋普通流中的元素。
? ? ? ? ? ? 3裆针、
? ? ? ? ? ? 4刨摩、
?浮動的清理：
? ? ? ? ? ? ? ? ? ? a、增加清除浮動元素世吨；
? ? ? ? ? ? ? ? ? ? b澡刹、觸發(fā)包含元素的BFC；
? ? ? ? ? ? ? ? ? ? c耘婚、給包含元素增加偽類：
