国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

seanlook / 1768人閱讀

摘要:過去在學(xué)習(xí)的時候,首要任務(wù)就是要理解,因為是里頭很重要的模型概念,描述了與的空間定位,今天的項目竟然卡在一個簡單的小問題,因此就用一篇文章做個紀(jì)錄提醒自己不要忘記,也避免之后遭遇到又會卡住了。

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

今天遇到的問題是出在我用了一個半透明的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

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。

下面的示例是用三個示例來對照參考,半透明的藍色方塊是原始的大小,第一張圖設(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;
}

background-clip

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

小結(jié)

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

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/109443.html

相關(guān)文章

  • CSS box-sizingbackground-clip解決背景顯示范圍問題

    摘要:過去在學(xué)習(xí)的時候,首要任務(wù)就是要理解,因為是里頭很重要的模型概念,描述了與的空間定位,今天的項目竟然卡在一個簡單的小問題,因此就用一篇文章做個紀(jì)錄提醒自己不要忘記,也避免之后遭遇到又會卡住了。 過去在學(xué)習(xí)CSS的時候,首要任務(wù)就是要理解box model,因為box model是CSS里頭很重要的模型概念,描述了padding、margin、border與content的空間定位,今天...

    maochunguang 評論0 收藏0
  • CSS box-sizingbackground-clip解決背景顯示范圍問題

    摘要:過去在學(xué)習(xí)的時候,首要任務(wù)就是要理解,因為是里頭很重要的模型概念,描述了與的空間定位,今天的項目竟然卡在一個簡單的小問題,因此就用一篇文章做個紀(jì)錄提醒自己不要忘記,也避免之后遭遇到又會卡住了。 過去在學(xué)習(xí)CSS的時候,首要任務(wù)就是要理解box model,因為box model是CSS里頭很重要的模型概念,描述了padding、margin、border與content的空間定位,今天...

    zhaot 評論0 收藏0
  • 前端面試之CSS3新特性

    摘要:和這三個特性是新增的和動畫相關(guān)的特性。使用方式如下和變換類型可以有各種變換類型,即屬性值定義不進行轉(zhuǎn)換。設(shè)置列之間的寬度樣式和顏色規(guī)則和和用戶界面中,新的用戶界面特性包括重設(shè)元素尺寸盒尺寸以及輪廓等。 除了html5的新特性,CSS3的新特性也是面試中經(jīng)常被問到的。 選擇器 CSS3中新添加了很多選擇器,解決了很多之前需要用javascript才能解決的布局問題。 element1~...

    glumes 評論0 收藏0
  • CSS中Background淺析

    摘要:如果只指定其中一個值,另一個值會被設(shè)定為因此可以和混用。通過設(shè)定負(fù)的,背景圖像的一部分被拖拽到父元素之外,從而在父元素之內(nèi)顯示要顯示的內(nèi)容。隨著的普及,相信漸變將成為主流。可以顯示的顯示范圍。 作為一個有理想有包袱的頁面仔,正像鑫哥在這篇文章說說CSS學(xué)習(xí)中的瓶頸(強烈推薦)里說的 其實,廣大頁面屌絲們并不畏懼那些學(xué)習(xí)能力強的人,畏懼的是那些學(xué)習(xí)能力強,同時,尼瑪學(xué)習(xí)又拼命的人。頁面仔...

    objc94 評論0 收藏0
  • 回味background

    摘要:就目前為止,還沒有到好玩的地步,只要知道會蓋在上面,然后如果在后面寫半角英文逗號的話,就可以玩多背景圖了,比如。 background是在CSS中使用率很高的一個屬性之一,由最初的幾個簡單的屬性到現(xiàn)在新增了很多的屬性,比如background-size、background-origin以及background-clip等屬性,還可以設(shè)置多背景來達到更多的炫酷效果。 以下要談的...

    aboutU 評論0 收藏0

發(fā)表評論

0條評論

seanlook

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<