处理hover转化成border导致的元素挪动方式

日期:2021-02-28 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

序言

大家有时会遇到 hover 伪类给元素加上边框的情况下,元素中的內容产生位移,尽管大家设定了 box-sizing: border-box 而且要求了元素的宽高,可是內容仍然被边框挤开了。以下面这类状况:

<style type="text/css" media="screen">
    .test {
        height: 30vmin;
        width: 30vmin;
        background: lightblue;
        box-sizing: border-box;
    }
    .test:hover {
        border: 5px solid black;
    }
</style>
<div class="test">
    this is a div.
</div>

这里的缘故很显著,大家的元素尺寸并沒有变(假如沒有设定元素宽高或 box-sizing: border-box 则元素尺寸会更改), box-sizing: border-box 是起效的,可是元素中的內容由于忽然加上的边框而被挤开了,大家的盒实体模型由外到内先后是 marginborderpaddingcontent ,因此新添加的 border 必定将 content 缩小的更小,而且 content 的界限座标也变了,由于致使视觉效果上的內容挪动。因此处理难题的方法便是让边框的加上不危害 content 的部位。

为元素加上边框

轻率出現的边框更改了原来的合理布局,让內容挪动了,既然这般,大家能够在以前的合理布局中就让边框存在便可以了。

.test {
    height: 30vmin;
    width: 30vmin;
    background: lightblue;
    border: 5px solid transparent;
    box-sizing: border-box;
}
.test:hover {
    border: 5px solid black;
}

应用 box-shadow

应用不占有盒实体模型室内空间的 box-shadowoutline 也是1种挑选,

.test:hover {
    /* border: 5px solid black; */
    box-shadow: 0 0 0 5px black;
    outline: 5px solid black;
}

用 padding

大家能够根据更改 padding 尺寸来给 border 预留室内空间。

.test {
    height: 30vmin;
    width: 30vmin;
    background: lightblue;
    box-sizing: border-box;
    padding: 5px;
}
.test:hover {
    padding: 0;
    border: 5px solid black;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:Css完成消除波动的方式汇总 返回下一篇:没有了