強大的CSS: box-sizing與background-clip,解決背景顯示範圍的問題
過去在學習CSS的時候,首要任務就是要理解“box model”,因為box model是CSS裡頭很重要的模型概念,描述了padding、margin、border與content的空間定位,今天的專案竟然卡在一個簡單的小問題,因此就用一篇文章做個紀錄提醒自己不要忘記,也避免之後遭遇到又會卡住了。(下圖就是CSS的box model)
今天遇到的問題是出在我用了一個半透明的border,但卻無法順利地透過並顯示背景的圖案或顏色,後來發現原來box預設的border,其實是在這個box之內的,雖然border在box的內部,但其實與剛剛的box model並沒有相違背,因為border包住的空間,仍然是padding與content,只是如果把border變成半透明,就會把原本box的底色給呈現出來。(如下圖)
為了讓border可以順利的在外面顯示背景的圖案或顏色,就需要用到box-sizing與background-clip這兩個CSS3的屬性來設定,就讓我們來分別看看這兩個屬性該如何使用:
box-sizing
box-sizing有兩個值可以設定,分別是:content-box(預設值)與border-box,如果在content-box的情形下,我們設定了box的padding或border,box就會被撐開,因為padding和border是長在box內的,不過如果我們將box-sizing設定為border-box,那麼就會一直維持原始的大小,但相對的也就會壓縮內部的空間,我自己在設計網頁的習慣,都會預先把所有的div設為border-box,如此一來才能更方便去計算大小,也能避免內容的東西加了padding就把外框變大了,然後再根據當下的情況,去決定是否要改為content-box。
下面的示例是用三個示例來對照參考,半透明的藍色方塊是原始的大小,第一張圖設定了padding:20px;,第二張圖除了padding:20px之外,還有設定了border:10px dotted rgba(255,0,0,.5);,第三張圖則是與第二張圖同樣的設定,但box-sizing設為border-box,經由對照,就可以很明顯的發現彼此的差異。
HTML:
<div><div></div></div> <div class="box default"><div></div></div> <div class="box border-box"><div></div></div>
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;*/ /*預設值*/ } .border-box{ box-sizing:border-box; }
background-clip
嚴格說起來background-clip與box-sizing應該是八竿子打不著邊,但因為在設計一個box的時候,往往都會border、padding和margin混合使用,也因為這個CSS3的屬性,讓我剎那間不知道是哪裡寫錯了,結果原來是自己忘了屬性該怎麼使用。
background-clip共有三個設定值,分別是:border-box(預設值)、padding-box、content-box,很有趣的是,剛剛的box-sizing預設值為content-box,這裡的預設值卻變成了border-box,下面的三張圖,分別代表了這三個設定值的長相,我們可以看到,第一張圖在預設值的情形下,邊框之下就是原本box的底色(邊框是半透明的虛線),第二張圖設為padding-box,border下方就不會有box底色,最後一個設定為content-box,就只會出現content區域的背景,border與padding下的背景都會消失,這也是background(背景)clip(剪裁)的意義所在。
HTML:
<div class="box bg-border-box"><div></div></div> <div class="box bg-padding-box"><div></div></div> <div class="box bg-content-box"><div></div></div>
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; */ /*預設值*/ } .bg-padding-box{ background-clip:padding-box; } .bg-content-box{ background-clip:content-box; }
自己是一個五年的前端工程師,希望本文對你有幫助!
這裡推薦一下我的前端學習交流扣qun:731771211 ,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,每天分享技術
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2644859/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS中background背景色的作用範圍CSS
- 如何讓超出範圍的文字自動顯示為省略號(CSS)CSS
- win10 顯示器頻率超出範圍怎麼辦 win10顯示器頻率超出範圍怎麼解決Win10
- Win7系統顯示器頻率超出範圍怎麼辦?Win7系統顯示器頻率超出範圍的解決方法Win7
- 想把圖片當背景,但是其他控制元件背景設為透明色後,顯示的是背景顏色的問題解決控制元件
- 強大的CSS:顏色、背景和剪下CSS
- JIVE在WINDOWS下的中文顯示問題的解決Windows
- 解決json顯示日期帶T的問題。JSON
- JSP顯示中文問題的解決方案(轉)JS
- HPUX下,解決xmanager的顯示亂碼問題UX
- LiveCharts中文顯示亂碼問題的解決Echarts
- 顯示器超頻怎麼辦?電腦顯示器出錯提示頻率超出範圍的解決辦法
- CSS3背景裁切屬性——background-clipCSSS3
- 解決windows8無法全屏顯示的問題Windows
- 解決Raize日曆控制元件顯示的問題AI控制元件
- 解決Xmanager連線HPUX顯示亂碼的問題UX
- ORACLE中科學計數法顯示問題的解決Oracle
- 解決CentOS 中顯示亂碼問題CentOS
- 純 CSS 解決自定義 CheckBox 背景顏色問題CSS
- MySQL 缺失範圍問題MySql
- IOS下圖片不能顯示問題的解決辦法iOS
- 解決成功安裝ACS以後顯示空白的問題!
- 解決在PUTTY下Linux顯示亂碼的問題Linux
- 解決arcgis for android中feature不顯示的問題Android
- 無法安裝顯示卡驅動怎麼辦 顯示超出頻率範圍的解決辦法
- vue-element-admin 解決壓縮打包之後背景圖片不顯示問題Vue
- 【轉】css解決相容的問題CSS
- 【菜鳥學安卓】- TextView 顯示Html 一 解決圖片顯示不了的小問題安卓TextViewHTML
- Java解決Itext pdf中文不顯示問題Java
- pyecharts地圖功能,並解決顯示不全或只顯示南海諸島問題解決Echarts地圖
- 修改java或css後不生效,還是顯示修改之前的樣式,問題已解決JavaCSS
- 【問題&解決】手機網頁Html程式碼實現(解決顯示頁面很小的問題)網頁HTML
- AD9中元件無法顯示的問題解決元件
- 解決RAW在SQLPLUS上無法顯示的問題SQL
- MySQL 間斷範圍問題MySql
- MySQL連續範圍問題MySql
- 解決win7下面圖示顯示不正常的問題Win7
- Wampserver圖示是橙色的【問題與解決方案】Server