Heim Web-Frontend CSS-Tutorial So verwenden Sie das Zoom-Attribut oder overflow:auto in CSS

So verwenden Sie das Zoom-Attribut oder overflow:auto in CSS

Mar 22, 2018 pm 04:36 PM
overflow zoom 使用方法

这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局,但是如果外面这个大容器的没有设置固定的高度值,那么大容器高度不会随着里面小容器高度变化而变化,产生内容溢出的现象,这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性,可以解决IE7和火狐浏览器下的清除浮动问题,但是IE6下不生效,所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。

实例代码

<!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 h2{ 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>
<p class="box">
<h2>这个没加overflow:auto和zoom:1属性,没有清除浮动,底下的li产生溢出重叠现象</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
<p class="box za">
<h2>这个加overflow:auto和zoom:1属性,清除浮动,正常</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
</body>
</html>
Nach dem Login kopieren

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

常用的颜色渐变方法总结

2D模拟实现摩天轮旋转动画特效

CSS3的box-sizing属性图文教程

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Zoom-Attribut oder overflow:auto in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Der Preis von Bitcoin seit seiner Geburt 2009–2025. Die umfassendste Zusammenfassung der historischen BTC-Preise Der Preis von Bitcoin seit seiner Geburt 2009–2025. Die umfassendste Zusammenfassung der historischen BTC-Preise Jan 15, 2025 pm 08:11 PM

Seit seiner Einführung im Jahr 2009 hat sich Bitcoin zu einem führenden Unternehmen in der Welt der Kryptowährungen entwickelt und sein Preis hat enorme Schwankungen erfahren. Um einen umfassenden historischen Überblick zu bieten, stellt dieser Artikel Bitcoin-Preisdaten von 2009 bis 2025 zusammen und deckt wichtige Marktereignisse, Änderungen der Marktstimmung und wichtige Faktoren ab, die die Preisbewegungen beeinflussen.

Überblick über den historischen Preis von Bitcoin seit seiner Geburt. Vollständige Sammlung historischer Preistrends von Bitcoin. Überblick über den historischen Preis von Bitcoin seit seiner Geburt. Vollständige Sammlung historischer Preistrends von Bitcoin. Jan 15, 2025 pm 08:14 PM

Bitcoin hat als Kryptowährung seit seiner Einführung erhebliche Marktvolatilität erlebt. Dieser Artikel bietet einen Überblick über den historischen Preis von Bitcoin seit seiner Geburt, um den Lesern zu helfen, seine Preistrends und Schlüsselmomente zu verstehen. Durch die Analyse der historischen Preisdaten von Bitcoin können wir die Einschätzung des Marktes über seinen Wert und die Faktoren, die seine Schwankungen beeinflussen, verstehen und eine Grundlage für zukünftige Investitionsentscheidungen schaffen.

Eine Liste der historischen Preise seit der Geburt von Bitcoin BTC Historical Price Trend Chart (neueste Zusammenfassung) Eine Liste der historischen Preise seit der Geburt von Bitcoin BTC Historical Price Trend Chart (neueste Zusammenfassung) Feb 11, 2025 pm 11:36 PM

Seit seiner Gründung im Jahr 2009 hat der Preis von Bitcoin im November 2021 auf 69.044,77 USD auf 69.044,77 USD gestiegen und im Dezember 2018 auf 3.191,22 USD gesunken. Ab Dezember 2024 hat der jüngste Preis 100.204 USD überschritten.

Der jüngste Preis für Bitcoin in den Jahren 2018-2024 USD Der jüngste Preis für Bitcoin in den Jahren 2018-2024 USD Feb 15, 2025 pm 07:12 PM

Echtzeit-Bitcoin-USD-Preis Faktoren, die den Bitcoin -Preis beeinflussen Indikatoren für die Vorhersage zukünftiger Bitcoin -Preise Hier finden Sie einige wichtige Informationen zum Preis von Bitcoin in den Jahren 2018-2024:

Die vollständigste Zusammenfassung der historischen Preisdetails seit der Geburt von Bitcoin (die neueste Version von 2025) Die vollständigste Zusammenfassung der historischen Preisdetails seit der Geburt von Bitcoin (die neueste Version von 2025) Feb 15, 2025 pm 06:45 PM

Wichtiger Knoten für Bitcoin Historical Price 3. Januar 2009: Genesis Block wurde generiert, das erste Bitcoin wurde mit einem Wert von USD 0 generiert. 5. Oktober: Als erste Bitcoin -Transaktion kaufte ein Programmierer zwei Pizzen mit 10.000 Bitcoins, entspricht 0,008 USD. 9. Februar 2010: Die Mt. Gox Exchange ging online und wurde zur Hauptplattform für den frühen Bitcoin -Handel. 22. Mai: Bitcoin bricht zum ersten Mal 1 $ durch. 17. Juli: Bitcoin-Preis fiel auf 0,008 USD und erreichte ein Allzeittief. 9. Februar 2011: Bitcoin Price bricht zum ersten Mal 10 US -Dollar durch. 10. April: Mt. Go

Wie kann die technische Fragen und Antworten in der Chatgpt -Ära auf Herausforderungen reagieren? Wie kann die technische Fragen und Antworten in der Chatgpt -Ära auf Herausforderungen reagieren? Apr 01, 2025 pm 11:51 PM

Die technische Q & A -Community in der Chatgpt -Ära: SegmentFaults Antwortstrategie Stackoverflow ...

Wie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen? Wie verwendet ich das Clip-Pfad-Attribut von CSS, um den 45-Grad-Kurveneffekt des Segmenters zu erreichen? Apr 04, 2025 pm 11:45 PM

Wie kann man den 45-Grad-Kurveneffekt des Segmenters erreichen? Bei der Implementierung des Segmenters verwandeln Sie den rechten Rand in eine 45-Grad-Kurve, wenn Sie auf die linke Schaltfläche klicken, und der Punkt ...

Wie kann man das Größensymbol durch CSS anpassen und es mit der Hintergrundfarbe einheitlich machen? Wie kann man das Größensymbol durch CSS anpassen und es mit der Hintergrundfarbe einheitlich machen? Apr 05, 2025 pm 02:30 PM

Die Methode zur Anpassung der Größe der Größe der Größe der Größe in CSS ist mit Hintergrundfarben einheitlich. In der täglichen Entwicklung begegnen wir häufig Situationen, in denen wir die Details der Benutzeroberfläche wie Anpassung anpassen müssen ...

See all articles