今天我們來學(xué)習(xí) 1.一個塊級元素水平和垂直居中的方法；2.什么是雪碧圖，他的缺點與優(yōu)點力喷；

3.什么是行盒，他的特征演训，尺寸和位置弟孟。

首先如何讓一個塊級元素水平和垂直居中他有很多種方法，我就一一舉例仇祭。

1，我們可以用 margin auto 就是外邊距自動居中來實現(xiàn) 只需要在需要的地方輸入代碼就行颈畸。

2乌奇，我們還可以使用padding邊距來隔開 使用 top上 ? right右 ? left左? bottom下? 但是你得提前知道距離不然不建議使用，

3眯娱，當(dāng)然我們還可以用定位? 關(guān)于定位就有很多種我就簡單說三個吧礁苗，我們一般使用定位體系有? 相對定位? 絕對定位? 固定定位? 其實我們也只會用兩種來讓塊級元素水平垂直居中； 首先我們要用絕對定位? position:absolute 徙缴，他的作用是以boby的X Y 坐標(biāo)來將一個元素放在一個地方试伙，他的默認(rèn)坐標(biāo)為X為0 Y為0 我們可以把相對定位 position:relative 放在需要居中地方的父級然后讓絕對定位的起點在父級的X Y坐標(biāo)0上，然后可以在絕對定位設(shè)置位置于样，這樣就可以達到想要的位置讓他居中疏叨。其實這幾種定位也不要亂用，他的作用是可以在一些元素重疊的時候使用穿剖。

2蚤蔓，什么是雪碧圖，他的優(yōu)缺點是什么糊余？

1秀又，什么是雪碧圖呢单寂？可以叫做圖像合拼技術(shù)，sprite吐辙。就是將一些圖片合到一起宣决，然后要用其中一些圖片的時候就可以讓他分離出來，

2昏苏，他的優(yōu)點：減少圖片的字節(jié)尊沸。

減少網(wǎng)頁的http請求，從而大大的提高頁面的性能捷雕。

解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾椒丧，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名救巷，從而提高了網(wǎng)頁的制作效率壶熏。

3，他的一些缺點：

1.在圖片合并的時候浦译，你要把多張圖片有序的合理的合并成一張圖片棒假，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景精盅；這些還好帽哑，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面叹俏，你的圖片如果不夠?qū)捚拚恚苋菀壮霈F(xiàn)背景斷裂；

? 2.CSS Sprites在維護的時候比較麻煩粘驰，如果頁面背景有少許改動屡谐，一般就要改這張合并的圖片，無需改的地方最好不要動蝌数，這樣避免改動更多的css愕掏，如果在原來的地方放不下，又只能（最好）往下加圖片顶伞，這樣圖片的字節(jié)就增加了饵撑，還要改動css

3：行盒是什么，他有什么特征唆貌，他的尺寸與位置

1滑潘，行盒屬性為display默認(rèn)值是inline的元素，其實大部分文字元素和圖片與多媒體都是行盒類锨咙。他們默認(rèn)生成都是行盒众羡，還有一些規(guī)則，文字必須放在行盒里，否則會自動生成行盒粱侣。圖片與多媒體也會默認(rèn)生成行盒羊壹，

2，行盒的特征齐婴，1油猫，行盒可被折斷，因為內(nèi)容可被折斷換行柠偶，2情妖，連續(xù)的多個行盒水平依次排列? 3，空白折疊的規(guī)則僅適用于行盒內(nèi)部與行盒之間诱担，4毡证，可使用水平方向的margin盒padding設(shè)置內(nèi)容之間的距離。

3蔫仙，行盒的尺寸料睛，他可以分為可替換元素，非可替換元素摇邦。第一可替換元素：他可以替換圖片與多媒體恤煞，對于圖片與視頻僅設(shè)置寬高中一個時，另一個會自動按比例適應(yīng)施籍。但是如果同時設(shè)置寬高的話可以通過object-fit屬性設(shè)置適應(yīng)方式居扒，當(dāng)然還有可以有一些值也可以取，他們分別是丑慎，fill:可以無視寬高比例縮放喜喂，充滿設(shè)置的尺寸 ? contain：保持寬高比例縮放，并且保證不超出內(nèi)容盒? cover：保持寬高比例縮放竿裂，充滿設(shè)置的尺寸玉吁，某些部分會被隱藏 ? none：不會進行任何縮放。2铛绰，非可替換元素诈茧，是文字類元素产喉。他在垂直方向上的margin,border,padding不占據(jù)布局空間捂掰，寬與高會自動數(shù)值無效，可以使用line-height來設(shè)置一行文字的高度曾沈。

4这嚣，行盒的位置，1塞俱，他與其他行盒水平依次排列姐帚，排列方式會受到父元素text-align的影響。