1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素?

行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素；其中img是行元素
塊級元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；
行元素轉(zhuǎn)換為塊級元素方式：display：block；

專題推薦：2020年CSS面試題匯總（最新）

2.將多個(gè)元素設(shè)置為同一行?清除浮動有幾種方式?

將多個(gè)元素設(shè)置為同一行：float，inline-block
清除浮動的方式：方法一：添加新的元素 、應(yīng)用 clear：both；
方法二：父級p定義 overflow: hidden；
方法三：利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪異盒模型box-sizing？彈性盒模型|盒布局?

在標(biāo)準(zhǔn)模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型下，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;
box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。
當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算；
當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算。

4.簡述幾個(gè)css hack?

(1) 圖片間隙
在p中插入圖片，圖片會將p下方撐大3px。hack1：將<p>與<img>寫在同一行。hack2：給<img>添加display：block；
dt li 中的圖片間隙。hack：給<img>添加display：block；
(2) 默認(rèn)高度，IE6以下版本中，部分塊元素，擁有默認(rèn)高度（低于18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden；
表單行高不一致
hack1：給表單添加聲明：float：left；height： ；border： 0；
鼠標(biāo)指針
hack：若統(tǒng)一某一元素鼠標(biāo)指針為手型：cursor：pointer；
當(dāng)li內(nèi)的a轉(zhuǎn)化塊元素時(shí)，給a設(shè)置float，IE里面會出現(xiàn)階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；

5.href和src區(qū)別? title和alt

href (Hypertext Reference)指定網(wǎng)絡(luò)資源的位置（超文本引用），從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點(diǎn)或資源之間定義一個(gè)鏈接或者關(guān)系，在 link和a 等元素上使用。
src (Source)屬性僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標(biāo)簽，又是html屬性，title作為屬性時(shí)，用來為元素提供額外說明信息.
alt：alt是html標(biāo)簽的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息.

6.transform？animation？區(qū)別?animation-duration

Transform:它和width、left一樣，定義了元素很多靜態(tài)樣式實(shí)現(xiàn)變形、旋轉(zhuǎn)、縮放、移位及透視等功能，通過一系列功能的組合我們可以實(shí)現(xiàn)很炫酷的靜態(tài)效果（非動畫)。
Animation:作用于元素本身而不是樣式屬性,屬于關(guān)鍵幀動畫的范疇，它本身被用來替代一些純粹表現(xiàn)的javascript代碼而實(shí)現(xiàn)動畫,可以通過keyframe顯式控制當(dāng)前幀的屬性值.
animation-duration：規(guī)定完成動畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

7.nth-of-type | nth-child?

舉例說明：
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二個(gè)li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二個(gè)元素（找不到）。
建議一般使用nth-of-type，不容易出問題。

8. :before 和 ::before 區(qū)別?

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。 對于CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。

9.如何讓一個(gè)p 上下左右居中?

答：有三種方法。

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <p class="p1"></p> 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <p class="p2"></p> 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <p class="p3"></p>

10.css2.0 和css3.0

答：css3加強(qiáng)了css2的功能，增加了新的屬性和新的標(biāo)簽，并且刪除了一些冗余的標(biāo)簽，在布局方面減少了代碼量。以前比較復(fù)雜的布局現(xiàn)在一個(gè)屬性就搞定了（columns之類的屬性）。在效果方面加入了