溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中的zoom和overflow:auto屬性有什么用

發(fā)布時(shí)間：2023-01-06 09:17:59 來源：億速云 閱讀：119 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了CSS中的zoom和overflow:auto屬性有什么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS中的zoom和overflow:auto屬性有什么用文章都會(huì)有所收獲，下面我們一起來看看吧。

前言

其實(shí)在CSS中的Zoom這個(gè)屬性一般不為人知，甚至有些CSS手冊(cè)中都查詢不到。其實(shí)Zoom屬性是IE瀏覽器的專有屬性，F(xiàn)irefox等瀏覽器不支持。它可以設(shè)置或檢索對(duì)象的縮放比例。除此之外，它還有其他一些作用，比如觸發(fā)ie的hasLayout屬性，清除浮動(dòng)、清除margin的重疊等。

因?yàn)閆oom屬性是IE瀏覽器的專有屬性，所以他清除浮動(dòng)作用只適用于IE瀏覽器，而Firefox、google等瀏覽器則需要使用overflow:auto屬性來清除浮動(dòng)。所以要達(dá)到兼容IE6、IE7、IE8、Firefox、google瀏覽器的時(shí)候就必需使用這兩個(gè)屬性。

我們?cè)谥貥?gòu)頁(yè)面的時(shí)候經(jīng)常會(huì)使用到一個(gè)大容器里面包含多個(gè)浮動(dòng)小容器的布局，但是如果外面這個(gè)大容器的沒有設(shè)置固定的高度值，那么大容器高度不會(huì)隨著里面小容器高度變化而變化，產(chǎn)生內(nèi)容溢出的現(xiàn)象，這時(shí)只需要清除浮動(dòng)就會(huì)恢復(fù)正常。所以只要給外面大容器加上overflow:auto的屬性，可以解決IE7和火狐瀏覽器下的清除浮動(dòng)問題，但是IE6下不生效，所以我們還需要使用zoom這個(gè)IE的私有屬性來達(dá)到徹底清楚浮動(dòng)的兼容效果。

實(shí)例代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog</title>
<style type="text/css">
.box{ 
     width:300px;
  height:auto;
  background-color: #000000;
  margin:100px auto;
  padding:5px;

  }
.box h3{ width:300px; line-height:24px; color:#CCCCCC;}  
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}     
  
</style>
</head>

<body>


<div class="box">
<h3>這個(gè)沒加overflow:auto和zoom:1屬性，沒有清除浮動(dòng)，底下的li產(chǎn)生溢出重疊現(xiàn)象</h3>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
</div>

<div class="box za">
<h3>這個(gè)加overflow:auto和zoom:1屬性，清除浮動(dòng)，正常</h3>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
<div class="xx">福州酒吧萬圣節(jié)派對(duì)活動(dòng)</div>
</div>

</body>
</html>

css的基本語(yǔ)法是什么

css的基本語(yǔ)法是：

1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；

2、選擇器通常是需要改變樣式的HTML元素；

3、每條聲明由一個(gè)屬性和一個(gè)值組成；

4、屬性和屬性值被冒號(hào)分隔開。

關(guān)于“CSS中的zoom和overflow:auto屬性有什么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS中的zoom和overflow:auto屬性有什么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手