您现在的位置:首页 >> 前端 >> 内容

CSS 的overflow:hidden 属性详细解释

时间:2016/7/11 9:06:49 点击:

  核心提示:overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而其实它还有清除浮动这个功能。1 html 2 head 3 meta http-...

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

1 <html>
 2 <head>
 3     <meta http-equiv="Content-type" content="text/html" charset="utf-8" />
 4     <title>taobao demo</title>
 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         <!--overflow: hidden;--><br>           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     <p class="search-container">
28         <p class="search-pannel">
29             <form>                
30                 <p class="search-button">
31                   <button class="btn-search" type="submit"></button>
32                 </p>
33                 <p class="search-common-pannel">
34                    <input type="text" name="">
35                    <i></i>     
36                 </p>    
37             </form>
38         </p>
39     </p>
40 </body>
41 </html>

这段代码是一个做淘宝搜索框中的一段代码,这里overflow:hidden就起到了一个清除浮动的效果。 

 

Tags:CS SS S的 的O 
作者:网络 来源:不详