js_css頁面定位歸納.doc

頁面定位問題在頁面表現(xiàn)中，常常遇到頁面或元素靜態(tài)或動態(tài)定位的問題，下面將對定位問題涉及到的CSS和JavaScript基礎(chǔ)知識進(jìn)行歸納。一 CSS相關(guān)的定位屬性1.1 box模型1.1.1 折疊的外邊距（margin）垂直的外邊距會折疊，但水平的則不會。（IE中外邊距和內(nèi)邊距也會折疊）1.1.2 盒子到底有多大IEFF/chromeheightborder + padding + content-height content-heightwidthborder + padding + content-width content-width1.1.3 默認(rèn)值很多元素都有默認(rèn)的外邊距或內(nèi)邊距，為方便定位，常常使用：*padding:0; margin:0;1.1.4 消失的padding-right當(dāng)出現(xiàn)水平滾動條時，F(xiàn)F(chrome)的padding-right為0，IE8則不會。1.1.5 Overflow屬性有四個可選值：visible(默認(rèn)) | hidden | scroll | auto當(dāng)盒子設(shè)置了高度或?qū)挾?，?dāng)內(nèi)容超過了這個值時：IEFF/Chromevisible盒子會給內(nèi)容撐大超出盒子的內(nèi)容是可見的，但會渲染的盒子的外面去，盒子外的內(nèi)容將不會受到影響Hidden會將所有超出盒子的所有內(nèi)容都給隱藏掉Scroll在水平和垂直方向上出現(xiàn)滾動條Auto在需要時才出現(xiàn)滾動條Overflow的另外一個常見的作用是用于清除浮動（見1.3.2）。另外在IE中無論是否需要，總是要添加一個滾動條，可以在body上添加樣式overflow:auto;清除。1.2 display 與 visiable屬性多數(shù)元素都有display屬性，或者為block或者為inline。元素能夠有改變其display值的能力，如將block元素改變?yōu)閕nline元素。當(dāng)display為none時，有必要將visible做比較。display:none 當(dāng)元素設(shè)置為此屬性時，該元素以及嵌套在其中的任何元素，都不會再顯示在頁面中。而且這個元素原先占據(jù)的任何空間都會被移除，就像不存在一樣。visibility:visible 會隱藏該元素，但這個元素占據(jù)的空間仍然會得到保留。1.3 浮動與清除1.3.1 float屬性float是將元素從常用規(guī)文檔中移出的一種方式。位于浮動元素之后的元素，會在空間充足的情況下向上移動到浮動元素旁邊。fload屬性有四個可用的值：left 和right 分別浮動元素到各自的方向，none (默認(rèn)的) 使元素不浮動，inherit 將會從父級元素獲取float值。浮動與絕對定位都是從文檔流中移出，但兩者的區(qū)別是是否占據(jù)文檔的空間，前者是占有的，后者就完全同相鄰的元素脫離了關(guān)系。1.3.2 清除浮動的技術(shù)1. clear clear能夠清楚元素的浮動。其原理是帶有清除樣式的元素的margin-top能夠被自動重寫并設(shè)置，從而使該元素只有可見部分會顯示在浮動元素下方。因此，如果我們?yōu)榍宄卦O(shè)置了上外邊距，這個上外邊距也將被clear聲明撤銷。但通過JS打印其marginTop值，仍為設(shè)置了的值。（此原理經(jīng)驗(yàn)證只適合FF和Chrome）;2. 空div方法。從字面來看，是一個空的 div。有時可能會用。3. overflow方法。在父元素上設(shè)置 overflow 這個 css 屬性。如果父元素的這個屬性設(shè)置為 auto 或者 hidden，父元素就會擴(kuò)展以包含浮動。這個方法有著較好的語義性，因?yàn)樗恍枰~外元素。但是，如果需要增加一個新的 div 來使用這個方法，其實(shí)就和空 div 方法一樣沒有語義了。而且要記住，overflow 屬性不是為了清除浮動而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動條。4. Aslett清除方法。這種方法使用CSS的:after偽元素清除非浮動的內(nèi)容，它需要在浮動元素的父級元素后加入一點(diǎn)看不見的內(nèi)容。具體代碼為：1.4 position屬性CSS中最常用的布局類屬性，一個是float(CSS浮動屬性Float詳解)，另一個就是CSS定位屬性position。position有4個值：static（默認(rèn)，正常的文檔流），absolute，fixed和relative。1. relative值可以通過設(shè)置元素的top/left/bottom/right來設(shè)置相對于原來默認(rèn)位置的偏移值。該元素并為移出文檔流，原來的位置不會給其它元素占據(jù)。2. 當(dāng)指定為position:absolute時，原始完成移出文檔流，不會占據(jù)文檔流的空間?？梢岳胻op/left/bottom/right相對于已定位的父級元素進(jìn)行相對定位。3.當(dāng)指定為position:fixed時，與絕對定位的區(qū)別在于定位的相對環(huán)境是窗口，所以在頁面滾動時不會隨之移動。ie6不支持此屬性，但可以有相關(guān)技巧予以修正。（值得強(qiáng)調(diào)的后三者定位環(huán)境的差異。相對定位時相對于自身原來的位置，絕對定位是相對于父級以定位的元素，即offsetParent，固定定位為window）4. 常用相對定位+絕對定位進(jìn)行定位。父元素設(shè)為position:relative，子元素設(shè)為position:fixed。其核心是讓絕對定位的元素的定位環(huán)境是其設(shè)為相對定位的父元素。5.Z-index: z-index 屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z 軸）上的層疊順序（stack order）。每一個定位元素都?xì)w屬于一個stacking context。根元素形成 root stacking context，而其他的 stacking context 則由定位元素產(chǎn)生（此定位元素的 z-index 被定義一個非 auto 的 z-index 值），定位子元素會以這個 local stacking context 為參考，用相同的規(guī)則來決定層疊順序。并且 stacking context 和 containing block 之間并沒有必然聯(lián)系。當(dāng) stacking context 一樣的時候，就用 z-index 的值來決定怎樣顯示，如果 z-index 也相同（即 stack level 相同），則按照檔中后來者居上的原則（back-to-front ）的順序來層疊。當(dāng)任何一個元素層疊另一個包含在不同 stacking context 元素時，則會以 stacking context 的層疊級別（stack level）來決定顯示的先后情況。也就是說，在相同的 stacking context 下才會用 z-index 來決定先后，不同時則由 stacking context 的 z-index 來決定。例如：定位元素 A（z-index:100）里面有定位元素 A1（z-index:300），而定位元素 B 和元素 A 兄弟關(guān)系（z-index:200）。你會發(fā)現(xiàn)無論 A1 的 z-index 是多大，也會被 z-index 是 200 的 B 所覆蓋，因?yàn)?A 的 z-index 只有 100。二 Dom相關(guān)的定位屬性2.1 認(rèn)識DOM相關(guān)的坐標(biāo)屬性（注：B=border， P=padding，C=content， S=滾動條）offsetTop : 該元素與offsetParent上空白距離，即兩元素border間(不包括)的距離；offsetLeft : 同上(左空白)；offsetHeight : 元素自身高度，即上下兩border（包括）間的距離，即（B+P+C(可見)+S）；offsetWidth : 同上(左右)；clientTop : 上邊寬(border-top-width);clientLeft : 左邊寬(border-left-width);clientHeight : 元素的高度，不包括border和滾動條，即(P(可見)+C);clientWidth : 同上（寬度）;scrollTop : 滾動條卷起的上高度;scrollLeft : 同上（左）;scrollHeight : 該元素在document中絕對高度(包括border)， 即(B+P+C(全部)+S);scrollWidth : 同上。*Height和*width是只讀屬性，*Top和*Left是可讀寫，可以調(diào)整具體值來進(jìn)行頁面定位。2.3 求元素在頁面當(dāng)中的絕對位置2.2.1 offsetParent與parentNode區(qū)別2.2.2 算法詳見all.js function calcPos(_aoDomObj)，算法原理是遞歸元素的offsetParent，疊加其到上一級offsetParent的offsetTop和offsetLeft