CSS box-sizing與background-clip解決背景顯示范圍的問題

maochunguang 發(fā)布于2019-08-02 16:17 / 3493人閱讀

摘要：過去在學(xué)習(xí)的時(shí)候，首要任務(wù)就是要理解，因?yàn)槭抢镱^很重要的模型概念，描述了與的空間定位，今天的項(xiàng)目竟然卡在一個(gè)簡(jiǎn)單的小問題，因此就用一篇文章做個(gè)紀(jì)錄提醒自己不要忘記，也避免之后遭遇到又會(huì)卡住了。

過去在學(xué)習(xí)CSS的時(shí)候，首要任務(wù)就是要理解“box model”，因?yàn)閎ox model是CSS里頭很重要的模型概念，描述了padding、margin、border與content的空間定位，今天的項(xiàng)目竟然卡在一個(gè)簡(jiǎn)單的小問題，因此就用一篇文章做個(gè)紀(jì)錄提醒自己不要忘記，也避免之后遭遇到又會(huì)卡住了。（下圖就是CSS的box model）

今天遇到的問題是出在我用了一個(gè)半透明的border，但卻無(wú)法順利地透過并顯示背景的圖案或顏色，后來(lái)發(fā)現(xiàn)原來(lái)box預(yù)設(shè)的border，其實(shí)是在這個(gè)box之內(nèi)的，雖然border在box的內(nèi)部，但其實(shí)與剛剛的box model并沒有相違背，因?yàn)閎order包住的空間，仍然是padding與content，只是如果把border變成半透明，就會(huì)把原本box的底色給呈現(xiàn)出來(lái)。（如下圖）

為了讓border可以順利的在外面顯示背景的圖案或顏色，就需要用到box-sizing與background-clip這兩個(gè)CSS3的屬性來(lái)設(shè)定，就讓我們來(lái)分別看看這兩個(gè)屬性該如何使用：

box-sizing

box-sizing有兩個(gè)值可以設(shè)定，分別是：content-box（預(yù)設(shè)值）與border-box，如果在content-box的情形下，我們?cè)O(shè)定了box的padding或border，box就會(huì)被撐開，因?yàn)閜adding和border是長(zhǎng)在box內(nèi)的，不過如果我們將box-sizing設(shè)定為border-box，那么就會(huì)一直維持原始的大小，但相對(duì)的也就會(huì)壓縮內(nèi)部的空間，我自己在設(shè)計(jì)網(wǎng)頁(yè)的習(xí)慣，都會(huì)預(yù)先把所有的div設(shè)為border-box，如此一來(lái)才能更方便去計(jì)算大小，也能避免內(nèi)容的東西加了padding就把外框變大了，然后再根據(jù)當(dāng)下的情況，去決定是否要改為content-box。

下面的示例是用三個(gè)示例來(lái)對(duì)照參考，半透明的藍(lán)色方塊是原始的大小，第一張圖設(shè)定了padding:20px；，第二張圖除了padding:20px之外，還有設(shè)定了border:10px dotted rgba（255,0,0，.5）；，第三張圖則是與第二張圖同樣的設(shè)定，但box-sizing設(shè)為border-box，經(jīng)由對(duì)照，就可以很明顯的發(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;
}

background-clip

嚴(yán)格說起來(lái)background-clip與box-sizing應(yīng)該是八竿子打不著邊，但因?yàn)樵谠O(shè)計(jì)一個(gè)box的時(shí)候，往往都會(huì)border、padding和margin混合使用，也因?yàn)檫@個(gè)CSS3的屬性，讓我剎那間不知道是哪里寫錯(cuò)了，結(jié)果原來(lái)是自己忘了屬性該怎么使用。

background-clip共有三個(gè)設(shè)定值，分別是：border-box（預(yù)設(shè)值）、padding-box、content-box，很有趣的是，剛剛的box-sizing預(yù)設(shè)值為content-box，這里的預(yù)設(shè)值卻變成了border-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：

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;
}

小結(jié)

以上就是看似無(wú)關(guān)卻又有關(guān)的background-clip與box-sizing，相信理解了之后，遇到box的尺寸大小調(diào)整，就能夠更得心應(yīng)手了！

云服務(wù)器 GPU云服務(wù)器解決問題的方法云計(jì)算解決的問題短視頻問題的解決措施數(shù)據(jù)分析解決的問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/55046.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

maochunguang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Java基礎(chǔ)語(yǔ)法筆記

閱讀 1261·2021-09-04 16:41
AHJCDN：免備案CDN，無(wú)視DDOS/CC攻擊的CDN，香港/美國(guó)GIA高速節(jié)點(diǎn)，提供免費(fèi)套餐

閱讀 2421·2021-09-02 10:18
Yoshino: 一個(gè)基于React的可定制化的PC組件庫(kù)

閱讀 927·2019-08-29 16:40
html&css面試筆記

閱讀 2623·2019-08-29 16:14
Visual Studio Code 裝飾器提示“experimentalDecorators”的解

閱讀 914·2019-08-26 13:41
使用node打造自己的命令行工具方法教程

閱讀 1308·2019-08-26 12:24
今天，我明白了JS事件循環(huán)機(jī)制

閱讀 739·2019-08-26 10:24
JavaScript 中的 forEach 源碼

閱讀 2879·2019-08-23 17:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS box-sizing與background-clip解決背景顯示范圍的問題

相關(guān)文章