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：hidden\auto\scroll；

 

　　（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">