css — 定位、背景图、水平垂直居中

1. 定位
2. 背景图
3. 水平垂直居中
- 3.1 行内元素水平居中显示
- 3.2 块级元素水平垂直居中

1. 定位

position:static | relative | absolute | fixed;

static 静态定位

relative 相对

absolute 绝对

fixed 固定

1.1 静态定位

静态定位意味着“元素默认显示文档流的位置”。没有任何变化。

1.2 相对定位 relative

1.特征：

给一个标准文档流下的盒子单纯的设置相对定位，与普通的盒子没有任何区别
留“坑”，会影响页面布局

2.作用：

1.用于微调元素
2.做“子绝父相”布局方案的参考

3.参考点：

以原来的盒子为参考点

4.相对定位的值：top 、bottom 、left 、right

<style>

    .box {

        width: 500px;

        height: 600px;

        border: 1px solid #000;

    }

    .box .a {

        width: 200px;

        height: 200px;

        background-color: red;

    }

    .box .b {

        width: 200px;

        height: 200px;

        background-color: green;

        position: relative;

        top: 30px;

        left: 50px;

    }

    .box .c {

        width: 200px;

        height: 200px;

        background-color: blue;

    }

</style>

<body>

<div class="box">

    <div class="a"></div>

    <div class="b"></div>

    <div class="c"></div>

</div>

1.3 绝对定位 absolute

1.参考点：

判断是否有定位（相对定位，绝对定位，固定定位）的祖先盒子进行定位：

1.如果没有定位的祖先盒子，以body为参考点
2.如果单独设置了一个盒子为绝对定位：
- 1.以top描述，它的参考点是以body的（0，0）为参考点
- 2.以bottom描述，它的参考点是以浏览器的左下角为参考点

2.子绝父相

以最近的父辈元素的左上角为参考点进行定位

3.特征：

1.脱标
2.压盖
3.子绝父相

<style>

    .box {

        width: 500px;

        height: 600px;

        border: 1px solid #000;

        position: relative;

        float: right;

    }

    .box .a {

        width: 200px;

        height: 200px;

        background-color: red;

    }

    .box .b {

        width: 200px;

        height: 200px;

        background-color: green;

        position: absolute;

        top: 20px;

        left: 20px;

    }

    .box .c {

        width: 300px;

        height: 200px;

        background-color: blue;

    }

</style>

浮动和绝对定位的特征：

<style>

    /*span {*/

    /*background-color: red;*/

    /*!*float: left;*!*/

    /*position: absolute;*/

    /*width: 200px;*/

    /*height: 60px;*/

    /*}*/

    .container{

        width: 1226px;

        height: 100px;

        margin: 0 auto;

        background-color: #000;

    }

    .logo{

        width: 55px;

        height: 55px;

        background-color: #ff6700;

        float: left;

        margin-top: 20px;

    }

</style>

</head>

<body>

    <span>

        mjj

    </span>

    <div class="container">

        <div class="logo"></div>

    </div>

</body>

1.4 固定定位 fixed

它跟绝对定位基本相似，只有一个主要区别：绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。

1.特征：

1.脱标
2.固定不变
3.提高层级

2.参考点：

以浏览器的左上角为参考点

<style>

    body{

        padding-top: 100px;

    }

    .active{

        position: relative;

        background-color: yellowgreen;

    }

    .fix{

        width: 100%;

        height: 100px;

        background-color: red;

        position: fixed;

        top: 0;

        left: 0;

    }

</style>

<body>

    <p>MJJwusir</p>

    <p>wusir</p>

    <p class="active">YAOwusir</p>

	<div class="fix">固定不变</div>

    <p>wusir</p>

    <p>wusir</p>

</body>

1.5 z-index

1.z-index只应用在定位的元素，默认z-index:auto;(auto相当于0)

2.z-index取值为整数，数值越大，它的层级越高

3.如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系)

4.从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

/*从父现象*/

<style>

    .box1 {

        position: absolute;

        top: 0;

        left: 0;

        width: 200px;

        height: 60px;

        border: 2px solid blue;

        background-color: #000;

        z-index: 10;

    }

    .box2 {

        position: absolute;

        top: 20px;

        left: 0;

        width: 200px;

        height: 60px;

        border: 2px solid red;

        background-color: greenyellow;

        z-index: 6;

    }

</style>

<body>

    <div class="father1" style="position: relative;z-index: 2;">

        <span class="box1"></span>

    </div>

    <div class="father2" style="position: relative;z-index: 3;">

        <div class="box2"> </div>

    </div>

</body>

2. 背景图

1.背景图属性

1.background-image:url("图片地址"); 给一个元素设置一个或多个背景图像
2.background-repeat:
- 定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
- 属性值：
  - repeat 默认值。表示背景图水平和垂直方向都平铺
  - no-repeat 表示背景图水平和处置方向都不平铺
  - repeat-x 表示背景图只有水平方向上平铺
  - repeat-y 表示背景图只有垂直方向上平铺
3.background-position
- 表示背景图定位初始位置。background-position是background-position-x和background-position-y的综合属性。如果想使用background-position属性，那么必须先指定background-image属性。
- 语法：
  - 1.background-position:值1 值2;
  - 2.background-position:position position;

<style>

    .bg{

        width: 1200px;

        height:1200px;

        border: 1px solid #000;

        /*设置背景图*/

        background-image: url("xiaohua.jpg");

        background-repeat: no-repeat;

        /*调整背景图的位置*/

        /*background-position: -164px -106px;*/

        background-position: center center;

        color: green;

        font-weight: 700;

        font-size: 30px;

    }

</style>

2.CSS Sprite 雪碧图

CSS雪碧图技术：即CSS Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

使用雪碧图的使用场景:

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小(2~3k)
加载量比较大

一些大图不建议制作雪碧图

优点:

有效的减少HTTP请求数量
加速内容显示

雪碧图的实现原理:

它通过css的背景属性的backrground-position的来控制雪碧图的显示。
控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。

<style>

	.swiper {

            width: 100%;

            height: 460px;

        }

        .container {

            width: 1226px;

            position: relative;

            margin: 0 auto;

        }

        .swiper span {

            display: inline-block;

            width: 41px;

            height: 69px;

            background: url("icon-slides.png") no-repeat 0 0;

            position: absolute;

            margin-top: -34px;

            top: 50%;

            cursor: pointer;

        }

        .swiper span.prev {

            background-position: -83px 0;

            left: 234px;

        }

        .swiper span.next {

            background-position: -124px 0;

            right: 0;

        }

        .swiper span.prev:hover{

            background-position: 0 0;

        }

         .swiper span.next:hover{

            background-position: -42px 0;

        }

</style>

<div class="swiper">

    <div class="container">

        <span class="prev"></span>

        <span class="next"></span>

    </div>

</div>

3. 水平垂直居中

3.1 行内元素水平居中显示

1.第一种方式：line-height+text-align

p {

    width: 200px;

    height: 200px;

    background: #666;

    color: #fff;

    line-height: 200px;

    text-align: center;

}

2.第二种方式：给父元素设置display:table-cell;,并且设置vertical-align:middle

.box{

    width: 200px;

    height: 200px;

    border: 1px solid #000;

    display: table-cell;

    vertical-align: middle;

    text-align: center;

}

3.2 块级元素水平垂直居中

1.方法一：position+margin

<style>

    .father{

        width: 200px;

        height: 200px;

        background-color: red;

        position: relative;

    }

    .child{

        position: absolute;

        width: 100px;

        height: 100px;

        background-color: green;

        margin: auto;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

    }

</style>

<div class="father">

	<div class="child">我是个居中的盒子</div>

</div>

2.方法二：display:table-cell

<style type="text/css">

    .father{

        width: 200px;

        height: 200px;

        background-color: red;

        display: table-cell;

        vertical-align: middle;

        text-align: center;

    }

    .child{

        width: 100px;

        height: 100px;

        background-color: green;

        display: inline-block;

        vertical-align: middle;

    }

</style>

<div class="father">

	<div class="child">我是个居中的盒子</div>

</div>

3.第三种：纯position

<style>

    .father{

        width: 500px;

        height: 300px;

        background-color: red;

        position: relative;

    }

    .child{

        /*如何让一个绝对定位的垂直居中： top设置50%，margin-top设置当前盒子的一半，并且是负*/

        position: absolute;

        width: 100px;

        height: 140px;

        background-color: green;

        left: 50%;

        margin-left: -50px;

        top: 50%;

        margin-top: -70px;

    }

</style>

<div class="father">

	<div class="child">我是个居中的盒子</div>

</div>