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

2024-11-07 来源：个人技术集锦

上一篇中我们学习了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;

显示全文

全部栏目