css4

時間 2019-12-12
標籤 css4 css 欄目 CSS 简体版
原文原文鏈接
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的使用
    一、z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
    二、只有定位了的元素，纔能有z-index,也就是說，無論相對定位，
        絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
    三、z-index值沒有單位，就是一個正整數，默認的z-index值爲0，
        若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，
        誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
    四、從父現象：父親慫了，兒子再牛逼也沒用
        <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
相關標籤/搜索
css4
CSS
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。