過去在學(xué)習(xí)CSS的時候，首要任務(wù)就是要理解“box model”，因為box model是CSS里頭很重要的模型概念，描述了padding、margin、border與content的空間定位，今天的項目竟然卡在一個簡單的小問題，因此就用一篇文章做個紀(jì)錄提醒自己不要忘記，也避免之后遭遇到又會卡住了。（下圖就是CSS的box model）
創(chuàng)新互聯(lián)建站服務(wù)項目包括西寧網(wǎng)站建設(shè)、西寧網(wǎng)站制作、西寧網(wǎng)頁制作以及西寧網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，西寧網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到西寧省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
今天遇到的問題是出在我用了一個半透明的border，但卻無法順利地透過并顯示背景的圖案或顏色，后來發(fā)現(xiàn)原來box預(yù)設(shè)的border，其實是在這個box之內(nèi)的，雖然border在box的內(nèi)部，但其實與剛剛的box model并沒有相違背，因為border包住的空間，仍然是padding與content，只是如果把border變成半透明，就會把原本box的底色給呈現(xiàn)出來。（如下圖）
為了讓border可以順利的在外面顯示背景的圖案或顏色，就需要用到box-sizing與background-clip這兩個CSS3的屬性來設(shè)定，就讓我們來分別看看這兩個屬性該如何使用：
box-sizing有兩個值可以設(shè)定，分別是：content-box（預(yù)設(shè)值）與border-box，如果在content-box的情形下，我們設(shè)定了box的padding或border，box就會被撐開，因為padding和border是長在box內(nèi)的，不過如果我們將box-sizing設(shè)定為border-box，那么就會一直維持原始的大小，但相對的也就會壓縮內(nèi)部的空間，我自己在設(shè)計網(wǎng)頁的習(xí)慣，都會預(yù)先把所有的div設(shè)為border-box，如此一來才能更方便去計算大小，也能避免內(nèi)容的東西加了padding就把外框變大了，然后再根據(jù)當(dāng)下的情況，去決定是否要改為content-box。
下面的示例是用三個示例來對照參考，半透明的藍(lán)色方塊是原始的大小，第一張圖設(shè)定了padding:20px；，第二張圖除了padding:20px之外，還有設(shè)定了border:10px dotted rgba（255,0,0，.5）；，第三張圖則是與第二張圖同樣的設(shè)定，但box-sizing設(shè)為border-box，經(jīng)由對照，就可以很明顯的發(fā)現(xiàn)彼此的差異。
HTML：
CSS：
重慶分公司
重慶分公司
div{
width:120px;
height:120px;
margin:20px 0 0 10px;
padding:20px;
display:inline-block;
background:url(地址);
}
div>div{
background:rgba(0,200,255,.4);
margin:0;
padding:0;
}
.box{
border:10px dotted rgba(255,0,0,.5);
}
.default{
/*box-sizing:content-box;*/ /*預(yù)設(shè)值*/
}
.border-box{
box-sizing:border-box;
}
嚴(yán)格說起來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-box，下面的三張圖，分別代表了這三個設(shè)定值的長相，我們可以看到，第一張圖在預(yù)設(shè)值的情形下，邊框之下就是原本box的底色（邊框是半透明的虛線），第二張圖設(shè)為padding-box，border下方就不會有box底色，最后一個設(shè)定為content-box，就只會出現(xiàn)content區(qū)域的背景，border與padding下的背景都會消失，這也是background（背景）clip（剪裁）的意義所在。
HTML：
CSS：
div{
width:120px;
height:120px;
margin:20px 0 0 10px;
display:inline-block;
background:url(地址);
padding:20px;
}
div>div{
margin:0;
padding:0;
background:rgba(0,200,255,.4);
}
.bg-border-box{
/* background-clip:border-box; */ /*預(yù)設(shè)值*/
}
.bg-padding-box{
background-clip:padding-box;
}
.bg-content-box{
background-clip:content-box;
}
自己是一個五年的前端工程師,希望本文對你有幫助！
這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計模式】到移動端HTML5的項目實戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)
