前端基础02（css补充）

一.css知识点补充

　1.关于权重问题：比较行内标签与id选择器标签和类标签操作div盒子的优先级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" class="box" style="width: 200px;height: 200px;background-color:gray;">测试盒子</div>
</body>
</html>

优先级

　　由此可以看出，行内标签的优先级 > id选择器 > 类选择器 > div选择器，这之间的比较可以用权重系数来说明：

　　以【id class 标签】的个数来进行数数，比如id选择器就为：100，class类选择器就为：010，那么div标签选择器就为001，所以进行比较运算就得到了三者之间的优先级排序。

　2.background背景图像属性（直接看代码演示）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background背景图像</title>
</head>
    <style>
        .box{
            width: 1000px;
            height: 1000px;
            background-image: url("./veer.jpg"); /*设置背景图像属性*/
        }
    </style>
<body>
    <div class="box">

    </div>
</body>
</html>

　　在浏览器中打开效果如下：

　　可以看出，本来这个背景图片大小要比这个div得大小小得多，因此背景图片才会在水平方向和垂直方向平铺这个div,这里介绍一下backgroud no-repead属性设置默认不平铺，也可以设置图片在水平或者竖直方向上的偏移量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background背景图像</title>
</head>
    <style>
        .box{
            width: 1000px;
            height: 1000px;
            background-image: url("./veer.jpg"); /*设置背景图像属性*/
            background-repeat: no-repeat;   /*设置背景图像不平铺*/
            background-position-x: -200px;  /*设置图像x轴偏移*/
            background-position-y: -100px;  /*设置图像y轴偏移*/
            background-attachment: fixed;  /**当页面的其余部分滚动时，背景图像不会移动。/
        }
    </style>
<body>
    <div class="box">

    </div>
</body>
</html>

设置对象不平铺移动

　3.定位：

　　什么是定位？意思就是固定位置，模块与模块之间位置的固定，包括绝对定位和相对定位等，一般默认的不设置就是静态定位，position:static,相对定位：position：relative,绝对定位：position:absolute,固定定位：position:fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        /*清除默认格式*/
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*做子绝父相的参考
            不要用相对定位做压盖现象*/
            /*参考点：原来的位置*/
            position: relative; /*做相对定位*/
            top: 30px;
            left: 30px;
            /*margin-top: 30px;*/
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top: 30px;
            left: 30px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box">

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

    </div>

</body>
</html>

定位

　4.绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        /*清除默认格式*/
        *{
            padding: 0;
            margin: 0;
        }
        .fat{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 30px;
        }
        .box2{
            width: 200px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="fat">
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

绝对定位

　　注意单独设置绝对定位，是以页面的左上角为中心点，特点：脱离标准流，即不占位置，下边的div会顶上去。

　5.子绝父相（子代绝对定位，父代相对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父绝子相</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .fat{
            width: 500px;
            height: 500px;
            border: 2px solid red;
            position: relative;
            margin-left: 50px;
            margin-top: 50px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 10px;
        }
        .box2{
            width: 200px;
            height: 300px;
            background-color: green;
            /*position: absolute;*/
            /*top: 10px;*/
        }
    </style>
</head>
<body style="height: 2000px">
    <div class="fat">
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

子绝父相

　6.轮播图定位案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图定位案例</title>
    <style>
        /*清除默认格式*/
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            width: 100%;
            height: 100px;
        }
        ul{
            list-style: none;
        }
        .header .list{
            width: 100%;
            height: 100px;
            background-color: red;
            position: relative;
        }
        .list .site-category{
            position: absolute;
            width: 234px;
            height: 460px;
            background-color: rgba(0,0,0,.6);
            top: 100px;
            left: 0;
            z-index: 10;
        }
        .slider{
            width: 100%;
            height: 460px;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
            height: 100%;
        }
        .slider .lunbo{
            width: 100%;
            height: 460px;
            background:  url("小米.jpg") no-repeat 0 0;
            position: relative;
        }
        .lunbo span{
            position: absolute;
            width: 41px;
            height: 69px;
            background: url("icon-slides.png") no-repeat 0 0;
        }
        .lunbo span.prev{
            background-position: -83px 0;
            left: 234px;
            top: 50%;
        }
        .lunbo span.next{
            background-position: -128px 0;
            right: 0;
            top: 50%;
        }
        .lunbo span.prev:hover{
            background-position: 0 0;
        }
        .lunbo span.next:hover{
            background-position: -42px 0;
        }
        .lunbo .circle{
            position: absolute;
            bottom: 30px;
            right: 50px;
            width: 6px;
            height: 6px;
            background-color: rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 10px;
        }
        .lunbo .circle:hover{
            background: #fff;
            border: 1px solid #757575;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <ul class="list">
                <li>
                    <a href="#">816</a>
                    <div class="site-category">
                       <ul>
                           <li>1</li>
                           <li>2</li>
                           <li>3</li>
                       </ul>
                    </div>
                </li>
            </ul>

        </div>
    </div>
    <div class="slider">
        <div class="container">
            <div class="lunbo">
                <span class="prev"></span>
                <span class="next"></span>
                <span class="circle"></span>
            </div>
        </div>
    </div>
</body>
</html>

　7.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .top{
            width: 200px;
            height: 200px;
            background-color: red;
            /*固定定位盒子脱标
            参考点： 以浏览器的左上角
            */
            position: fixed;
            bottom: 10px;
            right: 30px;
            text-align: center;
            line-height: 200px;
            color: #fff;
            font-size: 18px;
        }
    </style>
</head>
<body style="height: 2000px;">

    <div class="top">回到顶部</div>

    <!--1.引包-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>


        console.log($);

        $('.top').click(function () {
            // alert(1)
            $('html,body').animate({
                scrollTop:'0'
            },1000);
        });
    </script>

</body>
</html>

固定定位

　8.固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .header{
            width:100%;
            height: 80px;
            background-color: red;
            position: fixed;
            top: 0;
            z-index: 9999;
        }
        .wrap{
            width: 100%;
            height: 500px;
            background-color: green;
            color: #fff;
        }
        .wrap p{
            position: relative;
            z-index: 3;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div class="header"></div>
    <div class="wrap">
        <p>内容区域</p>
    </div>
</body>
</html>

固定导航栏

　9.z-index优先显示标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性标签</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: relative;
            z-index: 10;
        }
        .sendie{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top:270px;
            left: 320px;
            z-index: 10;
        }
        .father2{
            width: 300px;
            height: 300px;
            border: 1px solid green;
            position: relative;
            z-index: 11;
        }
        .tailiang{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: -30px;
            left: 320px;
            z-index: 5;
        }
    </style>
</head>
<body style="height: 2000px">
    <div class="father">
        <div class="sendie">

        </div>
    </div>
    <div class="father2">
        <div class="tailiang">

        </div>
    </div>
</body>
</html>

z-index

　　z-index标签属性，先比较父辈的大小，如果父辈的优先级较高，那么无论子辈的优先级多高都不起作用。

posted @ 2018-08-20 16:03 淋汐去水阅读(110) 评论(0) 收藏举报

刷新页面返回顶部

简单的架构师养成之路