CSS中Zoom屬性的一些介紹

2021-06-04 12:50:05 字數 1500 閱讀 3439

這裡我們介紹一下css中的zoom屬性,這個屬性一般不為人知,甚至有些css手冊中都查詢不到。

其實zoom屬性是ie瀏覽器的專有屬性,firefox等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動、清除margin的重疊等。

zoom的使用方法:

zoom : normal | number

normal :  預設值。使用物件的實際尺寸

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

.border

_zoom是

css hack中專對ie6起作用的部分。ie6瀏覽器會執行zoom:1表示物件的縮放比例,但這裡

overflow:hidden;和_zoom:1;是連起來用的,作用是清除border內部浮動。

同理,還可以使用同樣方法清除margin屬性在ie瀏覽器中的重疊問題。

css中zoom:1的作用

相容ie6、ie7、ie8瀏覽器,經常會遇到一些問題,可以使用zoom:1來解決,有如下作用:

觸發ie瀏覽器的haslayout

解決ie下的浮動,margin重疊等一些問題。

比如,本站使用div做一行兩列顯示,html**:

<

divclass

="h_mainbox"

>

<

h2>

推薦文章

h2>

<

ulclass

="mainlist"

>

<

li>

<

ahref

="#"

style

="color:#0000ff"

target

="_blank"

>

css庫吧

a>

li>

<

li>

<

ahref

="#"

style

="color:#0000ff"

target

="_blank"

>

原創<

/a>

li>

ul>

div>

css**:

.h_mainbox  

.h_mainbox h2

.h_mainbox h2

span  

.h_mainbox ul  

.mainlist  

.h_mainbox li  

加紅色的那裡就可以在ie6、ie7、ie8正常顯示效果了。

CSS中Zoom屬性的一些介紹

這裡我們介紹一下 css中的zoom屬性,這個屬性一般不為人知,甚至有些css手冊中都查詢不到。其實zoom屬性是ie瀏覽器的專有屬性,firefox 等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的h aslayout屬性,清除 浮動 清除margin...

CSS中的一些屬性

css背景屬性 css能夠描述背景,包括背景顏色 背景 背景重複方向等屬性,這些屬性為頁面背景的樣式控制提供了強大的支援,這些屬性包括如下所示 1 背景顏色屬性 background color 該屬性為html元素設定背景顏色。2 背景屬性 background image 該屬性為html元素設...

一些css的屬性

一些css的屬性 使整個頁面的元素都沒有頁邊距 margin 與填充距離 padding body 使整個頁面居中顯示 padding 12px 元件能與邊緣的距離 moz border radius 6px 6px 6px 6px 圓角 float left div同行顯示 margin 30px...