前端开发笔记（3）css基础（中）

上一篇中我们学习了html的标准文档流，下面我们先来看看如何脱离标准流。

脱离标准流

css中一共有三种方法脱离标准流

浮动
绝对定位
固定定位

浮动

我们要搞清楚什么是浮动，先来看一个标准文档流的例子

<style type="text/css">

    div{

        width:100px;

        height:100px;

        margin:10px;

        border:1px solid red;

    }

</style>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

浏览器执行效果：

会发现标准文档流这4个div不能并排，下面我们设置浮动让他们可以并排。

<style type="text/css">

        div{

            width:100px;

            height:100px;

            margin:10px;

            border:1px solid red;

            float:left;  /* 设置浮动（向左浮动） */

        }

    </style>

浏览器运行结果：

浮动的特点：

浮动的元素脱离标准流。（这个已经在上面看到了）

浮动的元素相互贴靠。

我们去掉上面样式中的margin看看是否使靠帖的

div{

    width:100px;

    height:100px;

    /* margin:10px; */

    border:1px solid red;

    float:left;  /* 设置浮动（向左浮动） */

}

浮动的元素有“字围”效果。

<head>

<style type="text/css">

    img{

        float:left;

    }

</style>

</head>

<body>

<img src="img1.jpg"/>

<p>

    这里是文字...(此处省略1000字)

</p>

</body>

浏览器执行结果：

绝对定位

演示一个绝对定位脱离标准流的例子，下面详细介绍几种定位。

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            border: 1px solid red;

            width:100px;

            height:100px;

            position:absolute;  /* 绝对定位 */

            top:20;

        }

        .div1{

            left:20;

        }

        .div2{

            left:120px;

        }

        .div3{

            left:230px;

        }

        .div4{

            left:340px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

    <div class="div4"></div>

</body>

固定定位

将上面例子中的position值改为fixed后效果和上面一样

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            border: 1px solid red;

            width:100px;

            height:100px;

            position:fixed;  /* 固定定位 */

            top:20;

        }

        .div1{

            left:20;

        }

        .div2{

            left:120px;

        }

        .div3{

            left:230px;

        }

        .div4{

            left:340px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

    <div class="div3"></div>

    <div class="div4"></div>

</body>

浮动的清除

清除浮动的原因

先来看一个小案例

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style type="text/css">

        li{

            float:left;

            background-color:yellow;

            padding:20px;

        }

    </style>

</head>

<body>

    <div>

         <ul>

             <li>HTML</li>

             <li>CSS</li>

             <li>JS</li>

             <li>HTML5</li>

             <li>APP</li>

         </ul>

  </div>

  <div>

         <ul>

             <li>数据结构</li>

             <li>设计模式</li>

             <li>操作系统</li>

         </ul>

   </div>

</body>

我们会发现上面的第二个div中的li元素会去贴靠第一个div中的最后一个元素。原因是因为div没有设置高度，那么此时你可能会问了，给div设置一个高度不就可以了，为什么要想办法去清除浮动呢？有的小朋友可能就问了，刚刚不是学习了怎么浮动，浮动能脱离标准文档流，现在怎么又要清除浮动了？

一般我们给容器不去设置固定的高度，而是由它的内容的高度自适应，这样才能适配到更多浏览器并且容易维护和修改。这只是清除浮动的一个原因，总之有的时候我们并不希望我们的块标签跟随着另一个标签，此时就需要清除浮动。

给父标签添加高度

给上面的案例中的div添加高度

div{

    height:50px;

}

浏览器执行结果：

这个方法并不为一种很好的清除浮动的方法，如果确实需要设置高度可以这样做。

clear:both;属性清除

将上面的div样式改为clear:both;

div{

    clear:both;

}

浏览器执行结果和上面一致，但是这种方法有一个不好的地方margin在一定程度上会存在失效。

div{

    clear:both;

    margin:50px;

}

会发现上面设置的margin没有效果

隔墙法

在两个div中间放置一个clear:both;样式的div

<style type="text/css">

        .splite{

            clear:both;

        }

        li{

            float:left;

            background-color:yellow;

            padding:20px;

        }

</style>

<body>

    <div>

         <ul>

             <li>HTML</li>

             <li>CSS</li>

             <li>JS</li>

             <li>HTML5</li>

             <li>APP</li>

         </ul>

    </div>

    <div class="splite"</div>  <!-- 这是一堵墙 -->

    <div>

         <ul>

             <li>数据结构</li>

             <li>设计模式</li>

             <li>操作系统</li>

         </ul>

   </div>

内墙法

内墙法和上面的隔墙法很相似，是将“这堵墙”放到了第一个div内部

<body>

    <div>

         <ul>

             <li>HTML</li>

             <li>CSS</li>

             <li>JS</li>

             <li>HTML5</li>

             <li>APP</li>

         </ul>

         <div class="splite"</div>  <!-- 这是一堵墙 -->

    </div>

    <div>

         <ul>

             <li>数据结构</li>

             <li>设计模式</li>

             <li>操作系统</li>

         </ul>

   </div>

overflow:hidden;属性清除

overflow:hidden;的本意是隐藏超出部分的内容，但是实际开发中发现这个属性可以巧妙的清除浮动。

<style type="text/css">

    div{

        overflow: hidden;

    }

    li{

        float:left;

        background-color:yellow;

        padding:20px;

    }

</style>

<body>

    <div>

         <ul>

             <li>HTML</li>

             <li>CSS</li>

             <li>JS</li>

             <li>HTML5</li>

             <li>APP</li>

         </ul>

    </div>

    <div>

         <ul>

             <li>数据结构</li>

             <li>设计模式</li>

             <li>操作系统</li>

         </ul>

   </div>

</body>

IE6不兼容overflow:hidden;清除浮动，解决办法添加一个属性zoom:1;

overflow: hidden;

_zoom:1;