hover生成border造成的元素移動如何解決

hover生成border造成的元素移動如何解決？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

前言

我們有時候會遇到 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 是生效的，但是元素中的內容因為突然添加的邊框而被擠開了，我們的盒模型從外到內依次是 margin ， border ， padding ， content ，所以新加入的 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-shadow 或者 outline 也是一種選擇，

.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;
}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。