DIV學習筆記.doc

float屬性是CSS布局中非常重要的一個屬性，用于控制對象的浮動布局方式，我們的大部分div布局基本上都通過float的控制來實現(xiàn)布局float的可選參數(shù)為：none/left/right 清除浮動。如class是設(shè)置標簽的類 id是設(shè)置標簽的標識 class屬性用于指定元素屬于何種樣式的類。 如樣式表可以加入 .baobaocolor:lime;background:#ff80c0使用方法：class=baobao id屬性用于定義一個元素的獨特的樣式。如一個CSS規(guī)則#binbinfont-size:larger使用方 法：id=binbin id是一個標簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，如果一個屋子有2個人同名，就會出現(xiàn)混淆； class是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服； 概念上說就是不一樣的： id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。 id屬性是定義標簽的名字，這樣javascript就可以利用id來調(diào)用標簽的其他屬性了，class是定義改標簽的CSS樣式的。 絕對定位使用position屬性來實現(xiàn)。position用于設(shè)置對象的定位方式可用值：static/absolute/relative對頁面中的每一個對象而言，默認position屬性都是static。如果將對象設(shè)置為position:absolute，對象將脫離文檔流，根據(jù)整個頁面的位置進行重新定位。當使用此屬性時，可以使用top,right,bottom,left即上右下左四個方向的距離值，以確定對象的具體位置，看如下CSS：新的元素ul，在導航之前，先簡要了解一下ul元素。ul是css而已中使用得很廣泛的一種元素主要用來描述列表型內(nèi)容，每一個表示其中的內(nèi)容為一個列表塊，塊中的每一條列表數(shù)據(jù)用來描述display:inline-block簡單來說就是將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。但是這個屬性目前不是所有的瀏覽器都支持，只有Opera和Safari支持，F(xiàn)ireFox3和IE8據(jù)說將會支持，F(xiàn)irefox2和IE使用特殊辦法可以實現(xiàn)這種效果，下面就來探討一下在Firefox2中有-moz-inline-stack和-moz-inline-box實現(xiàn)，但是這兩個私有屬性在某些情況下都會有異常，具體如下：1、display:-moz-inline-stack“當它所應(yīng)用的外包裝器（wrapper）的display為inline的時候，它所包含的a或button將無法點擊或無法選取，需要通過position:relative還hack掉這個bug”-烏龍茶2、display:-moz-inline-box使用這一屬性后，text-align就會出問題，必須使用Firefox的私有屬性 -moz-box-align來解決所以，建議不要使用-moz-inline-box，還是使用-moz-inline-stack在IE（以下IE8除外）下，如果對內(nèi)聯(lián)元素，比如a或span元素，使用inline-block屬性是有效的，似乎IE是支持的，其實是觸發(fā)了IE的layout，從而擁有了inline-block屬性的表癥。這樣我們就有了一種在IE下實現(xiàn)display:inline-block效果的兩種方法：1、先用display:inline-block屬性觸發(fā)塊元素，然后再定義display:inline，讓塊元素呈遞為內(nèi)聯(lián)對象（原理：這是IE的一個經(jīng)典bug，如果先定義了display:inline-block，然后再設(shè)置display回inline或block，layout不會消失），代碼如下：div display:inline-block;div display:inline;2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對象(display:inline)，然后通過zoom:1觸發(fā)塊元素的layout，代碼如下：div display:inline; zoom:1;那么為了能夠讓所有瀏覽器支持display:inline-block，綜合一下，最終的實現(xiàn)代碼如下（參考懌飛：模擬兼容性的 inline-block 屬性）：display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下觸發(fā)IE下inline 元素的 hasLayout*/display:-moz-inline-stack; /* Firefox 的私有屬性，需要時還必須用到position:relative解決上面提到的bug */zoom:1; /*同樣是IE 下觸發(fā) hasLayout*/*display:inline; /*一旦IE 下觸發(fā)了 hasLayout，設(shè)置 block 元素為 inline 會使 display:inline 效果與 display:inline-block 相似*/*擴展一下一些其他可能用到的屬性*/text-indent:-9999px;*text-indent:0;font-size:0;line-height:0; /* 如需隱藏文字，可用這四個屬性 */*另外上面隱藏文字，還可以用更簡化的方法：line-height:超級大值;font-size:0; */overflow:hidden; /* 隱藏溢出的內(nèi)容 */vertical-align:middle; /* 行內(nèi)垂直居中，針對 Opera 比較大的偏離 */width:？px; /*？為任意非auto值*/height:？px; /*？為任意非auto值*/margin是外部距離，而padding則是內(nèi)部距離 那么前面就沒有小圓點。list-style:none，這一 句是取消列表前點，因為我們不需要這些點。margin:0px，這一句是刪除UL的縮進，這樣做可以使所有的列表內(nèi)容都不縮進。 clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性：clear:left/rightdiv ul li 的嵌套順序 就是的三角關(guān)系。我的經(jīng)驗就是在最外面，里面 是，然后再是，當然里面又可以嵌套什么的，但是并不建議你嵌套很多 東西。當你符合這樣的規(guī)則的時候，那些倒霉的，不聽話的間隙就不會在里面出現(xiàn)了，當你僅僅是里面放，而不 用的時候，你會發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6和IE7會憑空多一些間距。但很多情況你來到下一行，間隙就沒了，但是前 面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變IE的Margin，然后調(diào)整Firefox下面的Padding，以便使得兩者顯示起來得效果很相 似，但是你得CSS將變得臭長無比，你不得不多考慮更多可能出現(xiàn)這種問題補救措施，雖然你知道千篇一律來兼容它們，但是你會煩得要命。具體嵌套寫法遵循上面得嵌套方式， 然后在CSS 里面告訴 ul Margin:0px;Padding:0px;list-style.:none;，其中l(wèi)ist-style.:none是不 讓標記的最前方顯示圓點或者數(shù)字等目錄類型的標記，因為IE和Firefox顯示出來默認效果有些不一樣。因此這樣不需要做任何手 腳，你的IE6、和IE7、Firefox顯示出來的東西(外距，間距，高度，寬度)就幾乎沒什么區(qū)別了，也許細心的你會在某一個時刻發(fā)現(xiàn)一、兩個象素的 差別，但那已經(jīng)很完美了，不需要你通過調(diào)整大片的CSS來控制它們的顯示了，你愿意，你可以僅僅兼容一兩個地方，而且通常這種兼容可以適應(yīng)各