前言
我們有時候會遇到 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;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
