本篇内容主要讲解“CSS中zoom和overflow:auto属性怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中zoom和overflow:auto属性怎么用”吧!
实例代码
<!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>这个没加overflow:auto和zoom:1属性,没有清除浮动,底下的li产生溢出重叠现象</h3> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> </div> <div class="box za"> <h3>这个加overflow:auto和zoom:1属性,清除浮动,正常</h3> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> <div class="xx">福州酒吧万圣节派对活动</div> </div> </body> </html>
到此,相信大家对“CSS中zoom和overflow:auto属性怎么用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。