CSS 解決背景顯示范圍的問題

1、css 解決背景顯示范圍的問題過去在學(xué)習(xí)css的時候，首要任務(wù)就是要理解box model，由于box model是css里頭很重要的模型概念，描述了padding、margin、border與content的空間定位，今日的項目居然卡在一個容易的小問題，因此就用一篇文章做個紀錄提示自己不要遺忘，也避開之后遭受到又會卡住了。（下圖就是css的box model）今日碰到的問題是出在我用了一個半透亮的border，但卻無法順當?shù)赝高^并顯示背景的圖案或色彩，后來發(fā)覺本來box預(yù)設(shè)的border，其實是在這個box之內(nèi)的，雖然border在box的內(nèi)部，但其實與剛剛的box model并沒有相違反，

2、由于border包住的空間，仍然是padding與content，只是假如把border變成半透亮，就會把原本box的底色給展現(xiàn)出來。（如下圖）為了讓border可以順當?shù)脑谕饷骘@示背景的圖案或色彩，就需要用到box-sizing與background-clip這兩個css3的屬性來設(shè)定，就讓我們來分離看看這兩個屬性該如何用法：box-sizingbox-sizing有兩個值可以設(shè)定，分離是：content-box（預(yù)設(shè)值）與border-box，假如在content-box的情形下，我們設(shè)定了box的padding或border，box就會被撐開，由于padding和border是長在box

3、內(nèi)的，不過假如我們將box-sizing設(shè)定為border-box，那么就會向來維持原始的大小，但相對的也就會壓縮內(nèi)部的空間，我自己在設(shè)計網(wǎng)頁的習(xí)慣，都會預(yù)先把全部的div設(shè)為border-box，如此一來才干更便利去計算大小，也能避開內(nèi)容的東西加了padding就把外框變大了，然后再按照當下的狀況，去打算是否要改為content-box。下面的示例是用三個示例來對比參考，半透亮的藍色方塊是原始的大小，第一張圖設(shè)定了padding:20px；，其次張圖除了padding:20px之外，還有設(shè)定了border:10px dotted rgba（255,0,0，.5）；，第三張圖則是與其次張圖同樣

4、的設(shè)定，但box-sizing設(shè)為border-box，經(jīng)由對比，就可以很顯然的發(fā)覺彼此的差異。html：css：divwidth:120px;height:120px;margin:20px 0 0 10px;padding:20px;display:inline-block;background:url(地址);div>divbackground:rgba(0,200,255,.4);margin:0;padding:0;.boxborder:10px dotted rgba(255,0,0,.5);.default/*box-sizing:content-box;*/ /*預(yù)設(shè)值*

5、/.border-boxbox-sizing:border-box;background-clip嚴格說起來background-clip與box-sizing應(yīng)當是八竿子打不著邊，但由于在設(shè)計一個box的時候，往往都會border、padding和margin混合用法，也由于這個css3的屬性，讓我剎那間不知道是哪里寫錯了，結(jié)果本來是自己忘了屬性該怎么用法。background-clip共有三個設(shè)定值，分離是：border-box（預(yù)設(shè)值）、padding-box、content-box，很好玩的是，剛剛的box-sizing預(yù)設(shè)值為content-box，這里的預(yù)設(shè)值卻變成了border-

6、box，下面的三張圖，分離代表了這三個設(shè)定值的長相，我們可以看到，第一張圖在預(yù)設(shè)值的情形下，邊框之下就是原本box的底色（邊框是半透亮的虛線），其次張圖設(shè)為padding-box，border下方就不會有box底色，最后一個設(shè)定為content-box，就只會浮現(xiàn)content區(qū)域的背景，border與padding下的背景都會消逝，這也是background（背景）clip（剪裁）的意義所在。html：css：divwidth:120px;height:120px;margin:20px 0 0 10px;display:inline-block;background:url(地址);padding:20px;div>divmargin:0;padding:0;background:rgba(0,200,255,.4);.bg-border-box/* background-clip:border-box; */ /*預(yù)設(shè)值*/.bg-padding-boxbackground-clip:padding-box;.bg-content-boxbackgroun