zoukankan      html  css  js  c++  java
  • 浮动(4)

    1.浮动
    folat:left/right/none
    注意:a:浮动元素会把当前的块级元素变成内联元素
    b:不在标准文档流中(不会按普通元素排版)

     1 <html>
     2     <head></head>
     3     <title></title>
     4     <style type="text/css">
     5         div{margin:10px;padding:5px;}
     6         #father{border:1px #000 solid;overflow:hidden;}
     7         /*.c1{border:1px #F00 dashed;
     8                 float:left;    
     9         }
    10         .c2{border:1px #00F dashed;
    11                 float:left;    
    12         }
    13         .c3{border:1px #060 dashed;
    14                 float:left;    
    15         }*/
    16         .c1{border:1px #F00 dashed;
    17                 float:left;    
    18         }
    19         .c2{border:1px #00F dashed;
    20                 float:right;    
    21         }
    22         .c3{border:1px #060 dashed;
    23                 float:left;    
    24         }
    25         .c4{
    26              border:1px #666 dashed;
    27              font-size:12px; 
    28              line-height:20px;
    29              clear:both;
    30              float:left;
    31             }
    32             .clear{
    33                         clear:both;
    34                         margin:0px;
    35                         padding:0px;    
    36             }
    37     </style>
    38     <body>
    39         <div id="father">
    40             <div class="c1"><img src="4.jpg" slt="日用品"/></div>
    41             <div class="c2"><img src="l.gif" slt="图书"/></div>
    42             <div class="c3"><img src="o.gif" slt="鞋子"/></div>
    43             <div class="c4">浮动的盒子......</div>
    44             <div class="clear"></div>
    45         </div>
    46     </body>
    47 </html>
    代码示例


    2.清除浮动(clear)
    both:清除左右浮动
    left:清除左浮动
    right:清除右浮动


    3.溢出处理(overflow)
    none:默认
    hidden:隐藏
    scroll:滚动
    auto:自动(滚动效果)
    注意:可以通过overflow:hidden设置浮动元素的文元素的高度,使它包裹整个浮动元素

     1 <html>
     2     <head></head>
     3     <style type="text/css">
     4         body{
     5                 font-size:12px;
     6                 line-height:22px;    
     7         }
     8         #c{
     9             200px;
    10             height:150px;
    11             border:1px #000 solid;    
    12             overflow:scroll;
    13         }
    14     </style>
    15     <body>
    16         <div id="c"><img src="4.jpg" alt=""/>
    17             <p>在CSS中使用overflow属性......xxxxxxxxxxxxxx</p>
    18         </div>
    19     </body>
    20 </html>
    代码示例
  • 相关阅读:
    gridview填加双击事件
    后台找前台服务器控件,客户端控件方法
    ie缓存是什么 和 清除ie缓存方法
    js 去掉空格的方法
    SQL 用户sa登录失败,该用户与可信sql server连接无关联
    (转)C#里面比较时间大小三种方法
    sql UNION 和 UNION ALL 的区别
    windows 计划任务 打开窗口
    mysql 优化8种方式
    javascript小括号表达式
  • 原文地址:https://www.cnblogs.com/yang82/p/6865971.html
Copyright © 2011-2022 走看看