css的一些奇淫技巧（一）

布局

水平垂直居中？最快的水平垂直居中方法是什么？

①大部分人都不太关注的 Grid 布局：

<div class="container">
   <div class="box"></div>
</div>

相关css代码：

    .container {
        width: 100%;
        height: 100vh;
        display: grid;
        place-content:center
    }
    .box{
        width: 80px;
        height: 80px;
        background-color:#000
    }

效果实现：

 

②巧用自动 margin

<div class="container">
   <div class="box"></div>
</div>

相关css代码：

    .container {
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .box{
        width: 80px;
        height: 80px;
        background-color:#000;
        margin: auto;
    }

效果如下：

在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去

其他布局

 这种左右布局的格式也很常见，来看一下怎么实现的吧

        <ul class="nav">
            <li>导航A</li>
            <li>导航B</li>
            <li>导航C</li>
            <li>导航D</li>
            <li class="login">登陆</li>
            <li>注册</li>
        </ul>

css样式：

    .nav{
        height: 60px;
        background-color:skyblue;
        display: flex;
        align-items: center;
    }
    .login{
        margin-left: auto;
    }

即可实现这种效果。

上下结构也可以使用，下方为吸附在底部的效果也很常见 常规我们可能使用position: fixed;现在来换一种方式吧

 

    <div class="container">
            <div class="real-box">
                ...
            </div>
            <div class="footer"></div>
    </div>

相关css代码

     .container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .footer{
        margin-top: auto;
        flex-shrink: 0;
        height: 30px;
        background-color:deeppink
    }

 即可实现该效果

阴影

使用阴影可以轻松得到图片本身，并且任意改变颜色及大小

<div class="container">
            <div class="box"></div>
    </div>

 css样式：

.box{
        width: 80px;
        height: 80px;
        background-color:#000;
        box-shadow:
        80px 80px 0 0 yellow,
        -80px 80px 0 10px green;
    }

即可获得上述效果的实现。

给图片盒子添加多层边框

 css样式：

.box{
        width: 80px;
        height: 80px;
        background-color:#000;
        box-shadow:
            0 0 0 2px red,
            0 0 0 4px orange,
            0 0 0 6px yellow,
            0 0 0 8px green,
            0 0 0 10px cyan;
    }

即可实现上述效果