1.塊級元素水平和垂直居中的方法。
水平居中（margin:0 auto;）
水平居中（text-align：center;）
這個屬性在沒有浮動的情況下，我們可以將其轉換為inline/inline-block，然后其父元素加上text-align:center;屬性就可以將其居中
水平垂直居中（一） 子元素相對於父元素絕對定位，並且margin值減去自己寬高的一半
該方法具有一定的局限性，因為其必須要知道子元素本身的寬高
水平垂直居中（二） 子元素相對於父元素絕對定位，並且margin值位auto
該方式不受元素寬高所限制，比較好用（推薦使用
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
水平垂直居中（三） diplay：table-cell
該方式是將元素轉換成表格樣式，再利用表格的樣式來進行居中（推薦）
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
item{
margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
水平垂直居中（四） 絕對定位和transfrom
該方法用最能裝逼，用到了css3變形，面試者看到你代碼里面有這樣的 ，你的逼格瞬間就上去了，當然了 你知道的，逼格的東西是有兼容性問題的
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
item{
width: 100px;
height: 100x;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
2.什么是雪碧圖以及優缺點。
CSS雪碧圖即CSS Sprite（精靈），在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題
優點；
①減少加載網頁圖片時對服務器的請求次數；
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
②提高頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多sprite時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
缺點；
①在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
②CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合並的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css
3什么是行盒。
行盒的盒模型
常見的行盒：包含具體內容的元素
span、strong、em、i、img、video、audio
顯著特點
盒子沿着內容沿伸
行盒不能設置寬高
調整行盒的寬高，應該使用字體大小、行高、字體類型，間接調整。
內邊距（填充區）
水平方向有效，垂直方向不會實際占據空間。
邊框
水平方向有效，垂直方向不會實際占據空間。
外邊距
水平方向有效，垂直方向不會實際占據空間。
行塊盒
display：inline-block 的盒子
不獨占一行
盒模型中所有尺寸都有效
空白折疊
空白折疊，發生在行盒（行塊盒）內部 或 行盒（行塊盒）之間
設置為pre，則不進行空白折疊
可替換元素 和 非可替換元素
大部分元素，頁面上顯示的結果，取決於元素內容，稱為非可替換元素
少部分元素，頁面上顯示的結果，取決於元素屬性，稱為可替換元素
可替換元素：img、video、audio
絕大部分可替換元素均為行盒。
可替換元素類似於行塊盒，盒模型中所有尺寸都有效。
————————————————
版權聲明：本文為CSDN博主「once_again_Morn」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42661269/article/details/100401396