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

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

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

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

4、的設(shè)定，但box-sizing設(shè)為border-box，經(jīng)由對(duì)比，就可以很顯然的發(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嚴(yán)格說起來background-clip與box-sizing應(yīng)當(dāng)是八竿子打不著邊，但由于在設(shè)計(jì)一個(gè)box的時(shí)候，往往都會(huì)border、padding和margin混合用法，也由于這個(gè)css3的屬性，讓我剎那間不知道是哪里寫錯(cuò)了，結(jié)果本來是自己忘了屬性該怎么用法。background-clip共有三個(gè)設(shè)定值，分離是：border-box（預(yù)設(shè)值）、padding-box、content-box，很好玩的是，剛剛的box-sizing預(yù)設(shè)值為content-box，這里的預(yù)設(shè)值卻變成了border-

6、box，下面的三張圖，分離代表了這三個(gè)設(shè)定值的長(zhǎng)相，我們可以看到，第一張圖在預(yù)設(shè)值的情形下，邊框之下就是原本box的底色（邊框是半透亮的虛線），其次張圖設(shè)為padding-box，border下方就不會(huì)有box底色，最后一個(gè)設(shè)定為content-box，就只會(huì)浮現(xiàn)content區(qū)域的背景，border與padding下的背景都會(huì)消逝，這也是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