hover生成border造成的元素移動如何解決
hover生成border造成的元素移動如何解決？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！
前言
我們有時候會遇到 hover 偽類給元素添加邊框的時候，元素中的內(nèi)容發(fā)生位移，雖然我們設(shè)置了 box-sizing: border-box 并且規(guī)定了元素的寬高，但是內(nèi)容依然被邊框擠開了。如下面這種情況：
.test {
height: 30vmin;
width: 30vmin;
background: lightblue;
box-sizing: border-box;
}
.test:hover {
border: 5px solid black;
}
this is a div.
這里的原因很明顯，我們的元素大小并沒有變（如果沒有設(shè)置元素寬高或者 box-sizing: border-box 則元素大小會改變）， box-sizing: border-box 是生效的，但是元素中的內(nèi)容因為突然添加的邊框而被擠開了，我們的盒模型從外到內(nèi)依次是 margin ， border ， padding ， content ，所以新加入的 border 必然將 content 壓縮的更小，并且 content 的邊界坐標(biāo)也變了，因為導(dǎo)致視覺上的內(nèi)容移動。所以解決問題的辦法就是讓邊框的添加不影響 content 的位置。
為元素添加邊框
貿(mào)然出現(xiàn)的邊框改變了原有的布局，讓內(nèi)容移動了，既然如此，我們可以在之前的布局中就讓邊框存在就可以了。
.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 預(yù)留空間。
.test {
height: 30vmin;
width: 30vmin;
background: lightblue;
box-sizing: border-box;
padding: 5px;
}
.test:hover {
padding: 0;
border: 5px solid black;
}看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。
當(dāng)前文章：hover生成border造成的元素移動如何解決
轉(zhuǎn)載注明：
http://weahome.cn/article/popdos.html
重慶分公司
重慶分公司
