css效果小计

在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成，在这里将遇到的一些css做下记录，以便日后翻阅，如果其中的写法不对，或者有更优写法欢迎留言，不胜感激

　　1.关于用一个div做出双边框(由于outline-offset在ie下不被支持，所以该方法不支持IE)

　　　　html/css 部分

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

         #outline {

             width: 84px;

              height: 84px;

              border: 1px solid blue;

              outline: 1px solid brown;

              outline-offset: 5px;

        }

     </style>

 </head>

 <body>

     <div id="outline">outlie实现多重边框</div>

 </body>

 </html>

　　效果图：　　

　　其中：outline: 宽样式颜色；有这三个属性（想了解ouline具体属性建议查看：http://www.runoob.com/cssref/pr-outline.html）

　　　　使用outline制作外层边框之后记得使用margin将外层轮廓覆盖，因为轮廓是不占空间布局的，也就不会影响到元素的尺寸，

　　　　outline-offset: 2px ；是相对于border的偏移量值为正数则向外便宜如图，反之内偏移

　　2.清除浮动的方法集

　　　　1.第一种最为直接明了（但只能兼容IE8开始）在ie7以下需要利用 zoom 来达到清除浮动的目的，zoom该方法为IE的专有属性（可设置缩放），最重要的是可触发ie的haslayout属性，用于清除浮动造成的高度塌陷，margin重叠问题，（该属性在火狐下不被支持，webkit内核浏览器下也是可以适用的）

 <!doctype html>

 <!--[if IE 7]><html class="ie7"><![endif]-->

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         ul{

             list-style: none ;

         }

       .fbc li{

           float: left ;

       }

       /* 用于清除浮动带来的塌陷影响 在ie8开始兼容*/

       .clearboth:after{

           content: '' ;

           display: block ;

           visibility: hidden ;

           clear: both ;

       }

     /*为兼容IE7以下  我们需利用一下zoom*/

     .ie7 .zoom{

         zoom:1;

     }

     </style>

 </head>

 <body>

     <ul class="fbc clearboth zoom">

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

         <li>6</li>

         <li>7</li>

         <li>8</li>

     </ul>

     <span>应该换行</span>

 </body>

 </html>

　　2.第二种利用css的BFC规则来清除浮动（该方法兼容性最好，若要兼容ie7以下建议使用符合规则的css2属性即可）

　　　　BFC顾名思义（块级格式上下文），其规定内部核模型如何布局，且这个区域不会影响到外部

　　　　BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

　　哪些元素会生成BFC?

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{

            list-style: none ;

        }

        .fbc{

            /* display: table-cell ; */

            overflow: hidden ;

        }

      .fbc li{

          float: left ;

      }

    </style>

</head>

<body>

    <ul class="fbc ">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

    <span>应该换行</span>

</body>

</html>