详细分析css float 属性以及position:absolute 的区别

1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。div一个典型的块级元素,会单独占据一行。

先看看最基本的块级元素如何排列的。html代码,以下样式都是基于此。

复制代码 代码如下:


<div>
        <div>
        框框1
        </div>
        <div>
        框框2
        </div>
        <div>
        框框3
        </div>
</div>

css代码:

复制代码 代码如下:


.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green
    }

执行结果:

详细分析css float 属性以及position:absolute 的区别

由于div是块级元素,所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。有两种方式可以实现。第一种将display:inlin-block;

复制代码 代码如下:


.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    display:inline-block
    }

执行结果:

详细分析css float 属性以及position:absolute 的区别

至于中间的缝隙,追溯到本质原因是元素之间的空白符引起的,所以在父元素设置fone-size的大小,可以调节空白缝隙的大小。

复制代码 代码如下:


.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:34px;
}

将font-size:34px之后,那么缝隙会变宽。

执行结果:

详细分析css float 属性以及position:absolute 的区别

同理,要去掉缝隙,那么需要将font-size:0;

复制代码 代码如下:


.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:0
}

执行结果:

详细分析css float 属性以及position:absolute 的区别

如此便实现了想要的布局,框里边的文字也跟着消失了,同样也证明文字的大小影响缝隙。只需要在子元素里重新设置就可以了。当然今天的重点并不是这个。同样的效果float:left;也可以轻松实现。

复制代码 代码如下:


<style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

执行结果:

详细分析css float 属性以及position:absolute 的区别

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzpwx.html