不常见的css技巧

·  阅读 64

使用position + left: 0;top: 0;bottom: 0;right: 0 达到全屏幕或者居中

        .div1{
            position: relative;
            width: 600px;
            height: 600px;
            background: yellow;
        }
        .div2{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: red;
            margin: auto;
        }
    <div class="div1">
        <div class="div2">
        </div>
    </div>
复制代码

效果如下:把div1的margin,width,height,就会跟父元素一样宽高 1646228809(1).jpg

使用position+transform: translate(-50%,-50%)居中

        .div2{
            width:100px;
            height:100px;
            background:red;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .div1{
            position: relative;
            width: 600px;
            height: 600px;
            background: yellow;
        }
    <div class="div1">
        <div class="div2">
        </div>
    </div>
复制代码

transform改变position:fixed,使其不能固定

        .div2{
            width:100px;height:100px;background:red;position:fixed;
        }
        .div1{
            transform:scale(1);
            position: relative;
            width: 600px;
            height: 600px;
            background: yellow;
        }
    <div class="div1">
        <div class="div2">
        </div>
    </div>
复制代码

水平横向滚动方法

float:left

<body>
    <div class="box">
        <div>
            <div style="background: yellow;"></div>
            <div style="background: pink;"></div>
            <div style="background: blue;"></div>
            <div style="background: black;"></div>            
        </div>
    </div>
</body>
</html>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: red;
        overflow: hidden; 
        overflow-x: scroll;
    }
    .box>div{
        float: left;
        width: 500px;
        height: 90px; 
    }
    .box>div>div{
        display: inline-block;
        width: 100px;
        height: 90px; 
    }    
</style>
复制代码

display: flex;flex: none;

<body>
    <div class="box">
       <div style="background: yellow;"></div>
       <div style="background: red;"></div>
       <div style="background: blue;"></div>
       <div style="background: black;"></div>
    </div>
</body>
</html>
<style>
    .box{
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: row;
        background: red;
        overflow: hidden; 
        overflow-x: scroll;
    }
    .box>div{
        flex: none;
        width: 100px;
        height: 90px; 
    }
</style>
复制代码

white-space: nowrap

<body>
    <div class="box">
       <div style="background: yellow;"></div>
       <div style="background: pink;"></div>
       <div style="background: blue;"></div>
       <div style="background: black;"></div>
    </div>
</body>
</html>
<style>
    .box{
        width: 100px;
        height: 100px;
        white-space: nowrap;
        background: red;
        overflow: hidden; 
        overflow-x: scroll;
    }
    .box>div{
        display: inline-block;
        width: 100px;
        height: 90px; 
    }
</style>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改