CSS2-盒模型、背景圖片

yuanzhanghu 發(fā)布于2019-08-29 15:33 / 963人閱讀

摘要：合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。雪碧圖的使用背景圖與元素的原點重合。白色框是元素，綠色框是背景圖片。

盒模型屬性

margin外邊距（top,right,bottom,left）
border邊框(top,right,bottom,left)
padding內(nèi)邊距(top,right,bottom,left)
content內(nèi)容區(qū)(width,height)
margin,border,padding值的書寫方法：
margin-top/-right/-bottom/-left
margin:10px 11px 12px 13px; 上右下左的順序
margin:10px 12px;簡寫即上下10px,左右12px;
margin:10px; 即4個方向都是10px

關(guān)于margin的合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

IE 盒模型和W3C盒模型的區(qū)別

W3C盒模型（box-sizing:content-box）,寬度width=內(nèi)容區(qū)content的寬度

IE盒模型（box-sizing:border-box）,寬度width=border+padding+content內(nèi)容寬度

沒有DOCTYPE的怪異模式，IE瀏覽器默認使用“IE盒模型”，IE8及以下也使用IE盒模型。

CSS Sprite(雪碧圖|精靈圖)

CSS Sprite圖是把多個icon圖標圖片或頁面會重復(fù)用到的小圖片合并放在一張圖里面，通過background-position這個屬性調(diào)整背景圖片的位置來顯示合并大圖中的某個局部圖像區(qū)域。
作用是減少網(wǎng)絡(luò)請求，讓頁面加載更快，圖片只需請求一次，以后使用都調(diào)用緩存內(nèi)的圖片。與此類似減少請求另一種方法是把圖片（只適用于很小的圖標例如icon）轉(zhuǎn)換成base64的編碼，url直接引用這個編碼就能看見圖片。base64適用在圖標加載響應(yīng)要求較高的場景下使用。
雪碧圖的使用：背景圖與元素的原點重合。好比把床單的左上角與桌子的左上角對齊，多余的部分不要。（0，0）坐標原點位置，即外層塊元素的左上角，background-position位置設(shè)定是指圖片與坐標原點的偏移量。白色框是元素，綠色框是背景圖片。X坐標值為正則圖片左上角向右平移，為負則圖片左上角向左平移，Y坐標值為正則圖片左上角向下平移，為負則圖片左上角向上平移。

背景小技巧：在開發(fā)過程中用圖片做背景的同時，往往還要用圖片的主色調(diào)來作用元素的背景色，目的是背景圖片丟失的時候防止視覺效果變化太大。

img標簽和CSS背景使用圖片的區(qū)別

頁面上固定不變的東西如圖標icon、logo等用CSS背景圖片
對于經(jīng)常會改變的內(nèi)容（圖片是和內(nèi)容相關(guān)的），用戶img標簽圖片，比如VIP會員頭像等。

background: url(abc.png) 0 0 no-repeat;

background-image:url(http://xxx.jpg) 這里是url引用，而不是src引入要引號
background-position:0px 0px; 圖片偏移位置水平垂直均為0
background-repeat:repeat-x/repeat-y/no-repeat(水平重復(fù)/垂直重復(fù)/不重復(fù))

background-size的作用

background-size指定背景圖片實際顯示區(qū)域大小。
屬性值：像素值/百分比/cover/contain
cover圖片會覆蓋整個背景區(qū)域,不會留下邊白,即小于背景區(qū)域的圖片會放大充滿整個背景區(qū)域。contain圖片自適應(yīng)最好的顯示效果并被包裹在背景區(qū)域里，有可能會留下空白。

div元素水平居中，img圖片水平居中

塊級元素水平居中：margin：0 auto; 不考慮上下margin值時而直接使用:
margin-left:auto;
margin-right:auto;
圖片水平居中：對img標簽先包裹一個塊級父容器，再對塊級父容器使用text-align:center實現(xiàn)居中。text-align:center;設(shè)置元素內(nèi)的文本水平居中對齊。只對塊級元素里面的行內(nèi)元素生效（a,img,input,span）,注意這里居中是參照該行內(nèi)元素的父容器元素生效。text-align有5個值：left/right/center/justify/inherit，左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候，每行中的字間距可能不一致。

設(shè)置元素透明

使用opacity屬性來設(shè)置元素的透明度，值從 0.0 （完全透明）到 1.0（完全不透明）。兼容性

opacity和 rgba設(shè)置透明的區(qū)別

opacity:0.5;（0～1）使元素內(nèi)所有內(nèi)容透明度為0就像消失，但是所占據(jù)的空間還在，不會改變頁面布局,opacity屬性可繼承。
background-color: rgba(0,0,0,0.5); 這種加alpha通道值設(shè)透明度只能對元素的顏色或者背景色設(shè)置透明度，rgba設(shè)置的透明屬性無法繼承。

title和 alt屬性的區(qū)別

title是補充的額外信息即鼠標懸停標簽上的額外說明信息。alt則是替代信息而不是提供額外說明，alt可以用來替換說明加載失敗時的img或a鏈接。