積累一些遇到的知識點

一、常規流( normal flow )知識

1.ifc中文字的水平排列取決於：text-align,垂直方向排列取決於：vertical-align；

2.當塊級元素裡面包含乙個img的時候，總會在底部和父容器產生縫隙，這是由於父容器中的baseline決定的，起因是父容器的font-famliy、font-size。解決這個問題的方式是將img的vertical-align設定為：bottom top middle;

3.元素在相對定位下，left=-right;其他定位不行；而如果left和right衝突的時候，勝利的天平總會傾向於left，可如果direction存在的話，rtl right勝，ltr:left勝。

4.垂直方向上的margin，子元素間異向margin會重疊，這個無法避免。而子元素會和父容器之間會造成把父元素拉下水，想要避免，父容器觸發bfc。如圖所示：

事先*紅色的是父容器，子元素都有margin:10px，被綠色的拉下10px，而綠色和父容器之間沒有margin-top（其實這種情況就叫margin塌陷，margin collapse）。綠底和藍頂只有10px距離，不是20px。

紅色觸發了bfc，解決了紅被綠拉下水的問題，但是異向margin重疊現象依然存在。

二、包含塊（containing block）說白了就是找爹

1.包含塊是乙個相對的概念，如果html中各節點間無定位，那麼子元素的包含塊就是父容器，初始包含塊是html，這是怎麼都不會改變的。

2.如果子元素的position定義為 relative或static的話，那它的包含塊就是父容器。

3.如果子元素的position定義為fixed的情況下，那它的包含塊就是html。

4.如果子元素的position定義為absolute的情況下，那它的包含塊就是擁有position：absolute或relative的父容器。

5.如果子元素的position定義為absolute，且它的父容器為行級元素，那它的定位和行級父的實際所佔區域有關，因為會存在rtl和rtl的問題，所以每個瀏覽器不同。但是不會因此改變子元素的left right方向。

雙x都是絕對定位，灰色的span相對定位，外面的p標籤設定rtl或rlt。紅x：left:0 黃x:left:0 top:20px; 藍x：right:0;

ltr時：

火狐：

如果存在父容器折行，那只在第一行做這些事其他瀏覽器：

rtl時：

火狐還是不變，其他：

三、ie的寫作模式 writing-mode

這是乙個很有意思的屬性：看屬性值

豎排靠右貼頂,同時自定義p標籤的高度會被誇張的拉長。

變種：tb-lr:豎排靠左貼頂 bt-lr:豎排靠左貼低 bt-rl:豎排靠右貼低

lr-tb:

橫排靠左貼頂。

變種：rl-tb:橫排靠右貼頂 lr-bt：橫排靠左貼低 rl-bt:橫排靠右貼低

ps:此時定義direction無效。

x、其他

1.如果給行級元素加上浮動或絕對定位，那麼該行級元素的left top right bottom和width height將會有效。

2.function物件會有乙個caller變數，目的是反編譯出呼叫該函式的執行環境。看例子：

window.onload = function
() ;
callerdemo();
//this is a top function
function
callerdemo()  
else
}function
handlecaller()

3.還有乙個callee屬性，是屬於arguments的，它主要返回的是arguments所在的函式的執行環境，其實和caller的作用一樣，都是反編譯函式，但是caller返回的是改函式的執行函式，callee返回的是引數所在的函式。

window.onload = function
() ;
function
test(a, b, c)

4.css屬性選擇符：a.節點[屬性]包含該屬性的節點 b.節點[屬性=值]滿足節點屬性為這個值的節點

5.塊級元素內部有文字，文字的後面如果緊跟塊級子元素的話，該文字會**上匿名塊框，使文字和塊級子元素垂直排列。

積累 一些遇到的知識點