1.行內(nèi)元素和塊級(jí)元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級(jí)元素?
行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素；其中img是行元素
塊級(jí)元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；
行元素轉(zhuǎn)換為塊級(jí)元素方式：display：block；
專題推薦：2020年css面試題匯總（最新）
2.將多個(gè)元素設(shè)置為同一行?清除浮動(dòng)有幾種方式?
將多個(gè)元素設(shè)置為同一行：float，inline-block
清除浮動(dòng)的方式：方法一：添加新的元素 、應(yīng)用 clear：both；
方法二：父級(jí)p定義 overflow: hidden；
方法三：利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。
.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.簡(jiǎn)述幾個(gè)css hack?
(1) 圖片間隙
在p中插入圖片，圖片會(huì)將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里面會(huì)出現(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)前文檔元素定義的位置，是頁(yè)面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標(biāo)簽，又是html屬性，title作為屬性時(shí)，用來(lái)為元素提供額外說(shuō)明信息.
alt：alt是html標(biāo)簽的屬性，alt屬性則是用來(lái)指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁(yè)中圖片無(wú)法正常顯示時(shí)給用戶提供文字說(shuō)明使其了解圖像信息.
6.transform？animation？區(qū)別?animation-duration
transform:它和width、left一樣，定義了元素很多靜態(tài)樣式實(shí)現(xiàn)變形、旋轉(zhuǎn)、縮放、移位及透視等功能，通過一系列功能的組合我們可以實(shí)現(xiàn)很炫酷的靜態(tài)效果（非動(dòng)畫)。
animation:作用于元素本身而不是樣式屬性,屬于關(guān)鍵幀動(dòng)畫的范疇，它本身被用來(lái)替代一些純粹表現(xiàn)的javascript代碼而實(shí)現(xiàn)動(dòng)畫,可以通過keyframe顯式控制當(dāng)前幀的屬性值.
animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
7.nth-of-type | nth-child?
舉例說(shuō)明：
<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ū)別?
單冒號(hào)(:)用于css3偽類，雙冒號(hào)(::)用于css3偽元素。 對(duì)于css2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::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之類的屬性）。在效果方面加入了更多的效果(圓角，動(dòng)畫之類的)，還有在盒子模型和列表模塊都進(jìn)行了改進(jìn)。不過css3兼容性不好，只有一些高級(jí)版本的瀏覽器支持。
11.彈性盒子模型?flex|box區(qū)別?
(1) 引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的條目進(jìn)行排列、對(duì)齊和分配空白空間。
即便容器中條目的尺寸未知或是動(dòng)態(tài)變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會(huì)根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來(lái)最好地填充所有可用的空間。
當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時(shí)，其中包含的條目也會(huì)被動(dòng)態(tài)地調(diào)整。比如當(dāng)容器尺寸變大時(shí)，其中包含的條目會(huì)被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時(shí)，條目會(huì)被縮小以防止超出容器的范圍。彈性盒布局是與方向無(wú)關(guān)的。
在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；
而 inline 布局則是在水平方向來(lái)排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。
(2) flex和box的區(qū)別: display：box 是老規(guī)范，要兼顧古董機(jī)子就加上它； 父級(jí)元素有display:box;屬性之后。他的子元素里面加上box-flex屬性?？梢宰屪釉匕凑崭冈氐膶挾冗M(jìn)行一定比例的分占空間。 flex是最新的，董機(jī)老機(jī)子不支持的；
父元素設(shè)置display:flex后，子元素寬度會(huì)隨父元素寬度的改變而改變，而display:box不會(huì)。 android uc瀏覽器只支持display: box語(yǔ)法；而ios uc瀏覽器則支持兩種方式。
12.viewport 所有屬性 ？
(1)width :設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串'device-width';
(2)initial-scale:設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶