css常用屬性整理

1.字符縮進功能text-indent

(允許使用負值。如果使用負值,那麼首行會被縮進到左邊。)

2.設置行高 line-height(不允許負值)


※清除浮動的方法

1.clear:both

2.

Zoom屬性是IE瀏覽器的專有屬性,Firefox等瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的hasLayout屬性,清除浮動、清除margin的重疊等。

Zoom的使用方法:

zoom : normal | number

normal :  默認值。使用對象的實際尺寸

number :  百分數 | 無符號浮點實數。浮點實數值爲1.0或百分數爲100%時相當於此屬性的 normal 值 用白話講解就是zoom:後面的數字即放大的倍數,可以是數值,也可以是百分比。如:zoom:1,zoom:120%。 而這個屬性只要在IE中才起作用,所以很少用到它的實際用途,而最經常用到作用是清除浮動等,如:
.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}

_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執行zoom:1表示對象的縮放比例,但這裏
overflow:hidden;和_zoom:1;是連起來用的,作用是清除border內部浮動。

//------------------------ZOOM詳細參照

CSS中zoom:1的作用 ,小標籤大作用

CSS中zoom:1的作用
兼容IE6、IE7、IE8瀏覽器,經常會遇到一些問題,可以使用zoom:1來解決,有如下作用:
觸發IE瀏覽器的haslayout
解決ie下的浮動,margin重疊等一些問題。
比如,本站使用DIV做一行兩列顯示,HTML代碼:

<div class="h_mainbox"> <h2>推薦文章</h2> <ul class="mainlist"> <li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li> <li><a href="#" style="color:#0000FF" target="_blank">原創< /a></li> </ul> </div>

CSS代碼:

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden} .h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;} .h_mainbox h2 span { float:right; font-weight:normal;} .h_mainbox ul { padding:6px 0px; background:#fff;} .mainlist { overflow:auto; zoom:1;} .h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

加紅色的那裏就可以在IE6、IE7、IE8正常顯示效果了。
css中的zoom的作用
1、檢查頁面的標籤是否閉合
不要小看這條,也許折騰了你兩天都沒有解決的 CSS BUG 問題,卻僅僅源於這裏。畢竟頁面的模板一般都是由開發來嵌套的,而他們很容易犯此類問題。
快捷提示:可以用 Dreamweaver 打開文件檢查,一般沒有閉合的標籤,會***背景高亮。

  2、樣式排除法
有些複雜的頁面也許加載了 N 個外鏈 CSS 文件,那麼逐個刪除 CSS 文件,找到 BUG 觸發的具體 CSS 文件,縮小鎖定的範圍。

  對於剛纔鎖定的問題 CSS 樣式文件,逐行刪除具體的樣式定義,定位到具體的觸發樣式定義,甚至是具體的觸發樣式屬性。

  3、模塊確認法
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模塊,尋找到觸發問題的 HTML 模塊。

  4、檢查是否清除浮動
其實有不少的 CSS BUG 問題是因爲沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的,推薦使用 無額外 HTML 標籤的清除浮動的方法(儘量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動,會有太多的限制性)。

  5、檢查 IE 下是否觸發 haslayout
很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》(如果無法翻越穿越偉大的 GFW,可閱讀 藍色上的轉帖 )
快捷提示:如果觸發了 haslayout,IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值爲 -1。

  6、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景(一般黑色或紅色),進行調試。此方法是最常用的調試 CSS BUG 的方法之一,對於複雜 BUG 依舊適用。經濟實惠還環保^^
最後想強調一點的是,養成良好的書寫習慣,減少額外標籤,儘量語義,符合標準,其實可以爲我們減少很多額外的複雜 CSS BUG,更多的時候其實是我們自己給自己製造了麻煩。希望你遠離 BUG ,生活越來越美好。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章