zoukankan      html  css  js  c++  java
  • 05-CSS盒子圆角、阴影、浮动

    1、盒子圆角:border-radius:50%
     
    2、盒子阴影: box-shadow::2px  2px  2px  2px  red;
                           分别对应-->水平阴影、垂直阴影、模糊阴影(虚实)、阴影尺寸(影子大小)、阴影颜色;
                           inset:内/外阴影
     
    3、浮动:float
         正常文档流:自上而下  (浮动不会脱离父元素跑出来)
         浮动属性的元素会脱离标准普通流的控制,不占位置,影响正常流
         目的:让三个div在一行显示:float:left;搭配父div使用,此时父亲div必须有高度(如果用display:inline-block三个盒子间有缝隙)
         
        -->特性:浮动使得元素默认转换为行内块,=display:inline-block; 如果给行内元素添加浮动,不需转换也有高宽。
                       (行内元素靠内容撑开高宽)
     
    (1)清除浮动
             目的:如果父元素靠子元素高度撑开( 父元素因为子级元素浮动引起的内部高度为0的问题),不方便确定高度的,要清除浮动解决父元素因为子元素引起的高度为0的问题。
             选择器{clear:属性值(left、right、both);}
     
      (a)额外标签法: 
                  通过在浮动元素末尾添加一个空标签,如<div ></div>,或者其他标签br等也可。清除了浮动,父亲去自动检测孩子的高度,以最高为标准。但是每个清除都要写一次。
     
      (b)父级添加overflow属性方法:
                   overflow:hiddenautoscroll;
     
      (c)使用after伪元素清除浮动:(ie6-7不支持)
               正常浏览器:
               .clearfix:after{
                           content: "";
                           diaplay: block;
                           height: 0; 
                           clear: both;
                           visibility: hidden; 
                  }
               ie6:
               .clearfix{ *zoom: 1;  }  *是ie7下的版本所识别
     
               给父div添加的,<div class="clearfix">
     
      (d)使用before和after双伪元素清除浮动:
                .clearfix: before, .clearfix: after{
                      content: "" ;
                      display: table;
                  }
                 .clearfix: after{
                      clear: both;
                  }
                 .clearfix{ *zoom: 1;  }
                 给父div添加的,<div class="clearfix">
                    
     
     
     
     
     
  • 相关阅读:
    TestNg JAVA 自动化单元测试框架Demo
    Python Unittest 自动化单元测试框架Demo
    Mac 安装工具包brew
    Mac 终端提示You have not agreed to the Xcode license agreements
    查看 ios 真机调试log,导出log
    Python WxPython 的安装以及使用
    RTMP协议抓包详解
    流媒体协议地址获取 rtmp
    手游-放开那三国socket协议分析
    jquery.tochart.js
  • 原文地址:https://www.cnblogs.com/chencaiyun/p/13224752.html
Copyright © 2011-2022 走看看