Home > Article > Web Front-end > How to use zoom attribute or overflow:auto in CSS
How to use zoom attribute or overflow:auto in CSS
- php中世界最好的语言Original
- 2018-03-22 16:36:112445browse
This time I will bring you how to use the zoom attribute or overflow:auto in CSS. What are the precautions for using the zoom attribute or overflow:auto in CSS? The following is a practical case, let’s take a look. one time.
Preface
In fact, the Zoom attribute in CSS is generally unknown, and it cannot even be found in some CSS manuals. In fact, the Zoom attribute is a proprietary attribute ofIE browser and is not supported by Firefox and other browsers. It sets or retrieves the object's scaling. In addition, it also has other functions, such as triggering the hasLayout attribute of ie, clearing floats, clearing margin overlap, etc.
Because the Zoom attribute is a proprietary attribute of IE browser, its floating function is only applicable to IE browser, while Firefox, Google and other browsers need to use the overflow:auto attribute to clear floating. Therefore, these two attributes must be used to achieve compatibility with IE6, IE7, IE8, Firefox, and Google browsers. When we reconstruct the page, we often use the layout of a large container containing multiple floating small containers. However, if the large container outside does not have a fixed height value, then the height of the large container will not be As the height of the small container inside changes, the content will overflow. At this time, you only need to clear the float and it will return to normal. Therefore, as long as the overflow:auto attribute is added to the large external container, the problem of clearing floats under IE7 andExample code
<!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>
##I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Summary of commonly used color gradient methods
The above is the detailed content of How to use zoom attribute or overflow:auto in CSS. For more information, please follow other related articles on the PHP Chinese website!