css的这个属性还可以这么用!你可能不知道的负值技巧和细节

原创

叫我可儿呀

修改于 2020-04-17 10:09:49

7010

修改于 2020-04-17 10:09:49

文章被收录于专栏：前端,Java专栏

使用 outline-offset 属性实现加号

假设有这么一个初始代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            outline-offset: 10px;
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其效果如下:

然后再把这个outline-offset属性的值改为-118px,那么就会把边框变成一个加号

当然我这里为了效果显著一些,我加了一个动画效果来显示,如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            animation: move 3s infinite;

}   
@keyframes move {
    0% {
        outline-offset: 10px;
    }
   
    100% {
        outline-offset: -118px;
    }
}     
    </style>
</head>
<body>
    <div></div>
</body>
</html>其效果如下:

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    .g_container {

        position: absolute;

        margin: 100px 0 0 500px;

    .item {

        width: 100px;

        height: 100px;

        background-color: green;

        position: relative;

        border-radius: 50%;

   .item {

transform: rotate(0) translate(-80px, 0) ;

}

.item:nth-child(1) {

animation: rotate 3s infinite linear;

}

.item:nth-child(2) {

animation: rotate 3s infinite 1s linear;

}

.item:nth-child(3) {

animation: rotate 3s infinite 2s linear;

}

@keyframes rotate {

100% {

    transform: rotate(360deg) translate(-80px, 0) ;

}

</style>

</head>

<body>

<div class="g_container">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

</body>

</html>

看看效果：

![css2.1.gif](https://upload-images.jianshu.io/upload_images/22948501-f13c770cbb00c228.gif?imageMogr2/auto-orient/strip)

当然,如果想要让三个球同时运动,去掉这个延迟,那么可以改成这样的代码:

.item:nth-child(1) {

animation: rotate 3s infinite linear;

}

.item:nth-child(2) {

animation: rotate 3s infinite -1s linear;

}

.item:nth-child(3) {

animation: rotate 3s infinite -2s linear;

}

其效果我就不说了,就是同时运动,可参照上面的那个效果

## 负值 margin

负值 margin 在 CSS 中算是运用的比较多的，元素的外边距可以设置为负值。

在 flexbox 布局规范还没流行之前，实现多行等高布局还是需要下一番功夫的。其中一种方法便是使用正 padding 负 margin 相消的方法。

有如下一个布局：

![image](https://upload-images.jianshu.io/upload_images/22948501-a48a126a1ead3a8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

左右两栏的内容都是不确定的，也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。

OK，其中一种 Hack 办法便是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏：

.left {

...

padding-bottom: 9999px;

margin-bottom: -9999px;

}

.right {

...

padding-bottom: 9999px;

margin-bottom: -9999px;

}

可以做到无论左右两栏高度如何变化，高度较低的那一栏都会随着另外一栏变化。