登录  /  注册
CSS 的overflow:hidden 属性详细解释
php中文网
发布: 2016-07-11 08:43:59
原创
1251人浏览过

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而其实它还有清除浮动这个功能。

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-type" content="text/html" charset="utf-8" />
 4     <title>taobao demotitle>
 5     <style type="text/css">
 6      body{font:12px/1.5 tahoma,arial,sans-serif}    
 7      a{text-decoration: none;}
 8      .search-tips{float: right;}
 9      .search-tips a{color: #6c6c6c;}
10      .search-button{float:right;}
11      .btn-search{width:149px;height:44px;border: 0;cursor: pointer;}
12      .search-common-pannel{
13          height: 44px;
14         
padding: 3px 0px 3px 0px; //设置边框距离
15 } 16 .search-common-pannel input{ 17 height: 44px; 18 line-height: 44px; 19 width: 100%; 20 border:0; 21 outline: 0; 22 background-color: #fff; 23 } 24 style> 25 head> 26 <body> 27 <div class="search-container"> 28 <div class="search-pannel"> 29 <form> 30 <div class="search-button"> 31 <button class="btn-search" type="submit">button> 32 div> 33 <div class="search-common-pannel"> 34 <input type="text" name=""> 35 <i>i> 36 div> 37 form> 38 div> 39 div> 40 body> 41 html>
登录后复制

这段代码是一个做淘宝搜索框中的一段代码,这里overflow:hidden就起到了一个清除浮动的效果。 具体代码可以看慕课网http://www.imooc.com/video/282里的教程

来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学