float和position

时间：2016-07-10 18:15:33 阅读：101 评论：0 收藏：0 [点我收藏+]

标签：

好久没有更新了，今天继续来看看css中的难点：浮动和定位，一直没有怎么弄懂；

　　一、

  <style type="text/css">
        body{
            margin: 0;
        }
       div{
            height: 100px;
            width: 100px;
        }
        .rel{
            background-color: chocolate;
            display: inline-block;
        }
        .abs{
            background-color: aqua;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="rel"></div>
    <div class="abs"></div>
</body>

　　技术分享

问题1：为什么会有中间8px的间距呢，当设置margin-left或margin-right：-8px时，间距会消失；

技术分享

二、相对定位：

   <style type="text/css">
        body{
            margin: 0;
        }
       div{
            height: 100px;
            width: 100px;
        }
        .rel{
            background-color: chocolate;
            display: inline-block;
            position: relative;
            left:50px;
            top:50px;
        }
        .abs{
            background-color: aqua;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="rel"></div>
    <div class="abs"></div>
</body>

技术分享

二、使用相对定位，没有脱离文档流，

技术分享

三、将其换为绝对定位则变为了不一样的样式：

<style type="text/css">
        body{
            margin: 0;
        }
       div{
            height: 100px;
            width: 100px;
        }
        .rel{
            background-color: chocolate;
            display: inline-block;
            position: absolute;   从相对定位换为绝对定位之后，样式变化了；
            left:50px;
            top:50px;
        }
        .abs{
            background-color: aqua;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="rel"></div>
    <div class="abs"></div>
</body>

技术分享

从上面可知盒子一脱离了文档流；

四：将盒子一包裹在另外一个大盒子里面：

    <style type="text/css">
        body{
            margin: 0;
        }
       div{
            height: 100px;
            width: 100px;
        }
        .rel{
            background-color: chocolate;
            display: inline-block;
            position: absolute;
            left:50px;
            top:50px;
        }
        .abs{
            background-color: aqua;
            display: inline-block;
        }
        .outer{
            height: 300px;
            width: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="rel"></div>
    </div>
    <div class="abs"></div>
</body>

技术分享

我们从上面可以知道盒子2被挤下来了，因为外面的大盒子是一个块级元素；

　　那么有什么办法可以让盒子2再上去呢？

1、加一个float：left；

技术分享

2、display：inline-block；

技术分享

从上面我们知道这两种设置方式有明显的区别：

五、我们再来看一个另外的区别：

技术分享

接下来我们再来看：盒子1是脱离文档流的，我们加高它的值，如下图所示：

　　技术分享

接下来我们再来看，更改代码如下所示：

    <style type="text/css">
        body{
            margin: 0;
        }
       div{
            height: 100px;
            width: 100px;
        }
        .rel{
            background-color: chocolate;
            display: inline-block;
            position: absolute;
            left:50px;
            top:50px;
        }
        .abs{
            background-color: aqua;
            display: inline-block;
        }
        .outer{
            height: 300px;
            width: 300px;
            background-color: antiquewhite;
            display: inline-block;
            position: relative;
        }
    </style>
</head>
<body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="outer">
        <div class="rel"></div>
    </div>
    <div class="abs"></div>
</body>