css — 定位、背景图、水平垂直居中_鹿岛_前端开发者

目录
  • 1. 定位
  • 1. 定位

  • 1.1 静态定位
  • 1.1 静态定位

  • 1.2 相对定位 relative
  • 1.2 相对定位 relative

  • 1.3 绝对定位 absolute
  • 1.3 绝对定位 absolute

  • 1.4 固定定位 fixed
  • 1.4 固定定位 fixed

  • 1.5 z-index
  • 1.5 z-index

  • 2. 背景图
  • 2. 背景图

  • 3. 水平垂直居中
  • 3. 水平垂直居中

  • 3.1 行内元素水平居中显示
  • 3.1 行内元素水平居中显示

  • 3.2 块级元素水平垂直居中
  • 3.2 块级元素水平垂直居中

    1. 定位

    position:static | relative | absolute | fixed;

    static 静态定位

    relative 相对

    absolute 绝对

    fixed 固定

    1.1 静态定位

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

    1.2 相对定位 relative

    1.特征:

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

    • 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>
    

    <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描述,它的参考点是以浏览器的左下角为参考点
  • 1.如果没有定位的祖先盒子,以body为参考点
  • 2.如果单独设置了一个盒子为绝对定位:
    • 1.以top描述,它的参考点是以body的(0,0)为参考点
    • 2.以bottom描述,它的参考点是以浏览器的左下角为参考点
    • 1.以top描述,它的参考点是以body的(0,0)为参考点
    • 2.以bottom描述,它的参考点是以浏览器的左下角为参考点
  • 1.以top描述,它的参考点是以body的(0,0)为参考点
  • 2.以bottom描述,它的参考点是以浏览器的左下角为参考点
  • 2.子绝父相

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

    3.特征:

    • 1.脱标
    • 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>
    .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>
    

    <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.提高层级
  • 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>
    

    <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>
    

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

  • 语法:
    • 1.background-position:值1 值2;
    • 2.background-position:position position;
    • 1.background-position:值1 值2;
    • 2.background-position:position position;
  • 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>
    

    <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)

    • 加载量比较大

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

  • 静态图片,不随用户信息的变化而变化

  • 静态图片,不随用户信息的变化而变化

  • 小图片,图片容量比较小(2~3k)

  • 小图片,图片容量比较小(2~3k)

  • 加载量比较大

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

  • 加载量比较大

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

    优点:

    • 有效的减少HTTP请求数量
    • 加速内容显示
  • 有效的减少HTTP请求数量
  • 加速内容显示
  • 雪碧图的实现原理:

    • 它通过css的背景属性的backrground-position的来控制雪碧图的显示。
    • 控制一个层,可显示的区域范围大消息,通过一个窗口,进行背景图的移动。
  • 它通过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>
    

    <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;
    }
    

    p {
    width: 200px;
    height: 200px;
    background: #666;
    color: #fff;
    line-height: 200px;
    text-align: center;
    }

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

    display:table-cell;vertical-align:middle

    .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    

    .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>
    
    

    <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>
    

    <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>
    

    <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>

    » 本文来自:前端开发者 » 《css — 定位、背景图、水平垂直居中_鹿岛_前端开发者》
    » 本文链接地址:https://www.rokub.com/73231.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!