CSS定位

2017-10-27 本文已影响0人 Co_zy

先记录一下之前没用过的background图片

background: url('img/flower.jpg');
background-size: contain;

background-size有auto, contain, cover三种,其中contain可以正常显示,cover会拉伸图片,可以看一下对比

cover

contain

相对定位

坐标点位于左上角,一个没有体积的点,相当于移动了点,就移动了块,
relative相对于自己之前本应该在的位置
无论发生什么偏移,原来的位置仍然存在,可以再后面的绝对定位中,对比加深理解
用一个例子展示一下,初始状态如下,我们让花向左下角移动

相应代码

    position: relative;
    left: 80px;
    top: 80px;

left,top是距离左侧,距离顶部多少多少像素

绝对定位

先看一个示例,我们在AB之间加一个花,并且加一个背景颜色

此时body内代码结构如下

<div class="bg">
    <div class="flower-red"></div>
    <div class="block-1">A</div>
    <div class="flower-yellow"></div>
    <div class="block-2">B</div>
    <div class="block-3">C</div>
</div>

然后更改一下黄花的定位(注意此时画的颜色和上面相对定位的不一样了)

.flower-yellow{
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    background: url('img/flower.jpg');
    background-size: contain;
    position: absolute;
}

变成如下,注意黄花和B是同时存在的,如果黄花是免扣的图效果会更明显.