css4 

1.在写HTML文件前,先将原本丑陋的配置文件清了
    *{
        padding: 0;
        margin: 0;
    }
    body{
        font-size: 14px;

    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    input{
        border: 0;
        outline: 0;
    }

2.如何让一个绝对定位的盒子居中
    left:50%;
    margin-left:- 宽度的一半
3.固定定位(position:fixed)
    效果:脱标
    参考点:浏览器的左上角
    作用:
        小广告:
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <style>
                    .box{
                        
                        width: 300px;
                        height: 300px;
                        position: fixed;
                        top: 500px;
                        left:1226px;
                    }
                </style>
            </head>
            <body>
            <div class="box"></div>
        固定导航栏
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <style>
                    .box{
                        background-color: palevioletred;
                        width:100%;
                        height: 300px;
                        position: fixed;
                        top: 0;
                    }
                    body{
                        padding-top: 300px;
                    }
                </style>
            </head>
            <body>
            <div class="box"></div>
            <p>qwertyu</p>
            <p>as</p>
4.z-index的使用
    1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
    2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，
        绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
    3、z-index值没有单位，就是一个正整数，默认的z-index值为0，
        如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，
        谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    4、从父现象：父亲怂了，儿子再牛逼也没用
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .father,.father1{
                    width: 300px;
                    height: 300px;
                    background-color: palevioletred;
                    position: relative;
                }
                .child{
                    width: 200px;
                    height: 200px;
                    background-color: indianred;
                    position: absolute;
                    left:300px;
                    top:250px;
                    z-index: 1;
                }

                .child1 {
                    width: 200px;
                    height: 200px;
                    background-color: #cd9466;
                    position: absolute;
                    left: 300px;
                }
            </style>
        </head>
        <body>
        <div class="father">
            <div class="child">
                aaa
            </div>
        </div>
        <div class="father1">
            <div class="child1">
                aaa
            </div>
        </div>
5.小米页面小知识点
    设置在父盒子中垂直方向上的位置
        vertical-align:1px
    清除form表单中原始的样式
    box-shadow:5px 5px 5px #333















posted @ 2018-09-25 16:28  ★行者尚★  阅读(256)  评论(0)  编辑  收藏  举报