1.盒模型

·標準盒模型 border, padding, content, margin ·IE盒模型 border, padding, content ·通過 box-sizing屬性改變元素的盒模型

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

2.CSS選擇符

·id選擇器（#myId）·類選擇器（.myClassName）·標簽選擇器（p, h1, p）·后代選擇器（h1 p）·相鄰后代選擇器（子）選擇器（ul > li）·兄弟選擇器（li~a）·相鄰兄弟選擇器（li+a）·屬性選擇器（a[rel="external"]）·偽類選擇器（a:hover, li:nth-child）·偽元素選擇器（::before, ::after）·通配符選擇器（*）

3.::before 和 :after 中雙冒號和單冒號的區(qū)別？這2個偽元素的作用？

·在 CSS3 中 : 表示偽類， :: 表示偽元素·想讓插入的內(nèi)容出現(xiàn)在其他內(nèi)容前，使用::befroe。否則，使用::after

4.CSS中哪些屬性可以繼承？

·每一個屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值 來作為自己的值。 ·一般具有繼承性的屬性有，字體相關(guān)的屬性，font-size和font-weight等。 ·文本相關(guān)的屬性，color和text-align等。 ·表格的一些布局屬性、列表屬性如list-style等。 ·還有光標屬性cursor、元素可見性visibility。 ·當一個屬性不是繼承屬性的時候，我們也可以通過將它的值設(shè)置為inherit來使它從父元素那獲取同名的屬性值來繼承。

5.如何居中p

-水平居中1：給 p 設(shè)置一個寬度，然后添加 margin:0 auto; 屬性

p{   width: 200px;   margin: 0 auto;}

-水平居中2：利用 text-align:center 實現(xiàn)

.container{   background: rgba(0, 0, 0, .5);   text-align: center:   font-size: 0;}.box{   display: inline-block;   width: 500px;   height: 400px;   background-color: pink;}

-讓絕對定位的p居中

p{   positionn: absolute;   width: 300px;   height: 300px;   margin: auto;   top: 0;   left: 0;   bottom: 0;   right: 0;   background-color: pink; /* 方便看效果 */}

-水平垂直居中1

/* 確定容器的寬高，寬500高300 */p{   position: absolute;   width:500px;   height: 300px;   top: 50%;   left: 50%;   margin: -150px 0 0 -250px;   background-color: pink;}

-水平垂直居中2

/* 未知容器寬高，利用 transform 屬性 */p{   position: absolute;   width: 500px;   height: 300px;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   background-color: pink;}

-水平垂直居中3

/* 利用 flex 布局實際使用時應(yīng)考慮兼容性 */.container{   display: flex;   align-items: center; /* 垂直居中 */   justify-content: center; /* 水平居中 */}.container p{   width: 100px;   height: 100px;   background-color: pink;}

6.CSS3有哪些新特性

·新增各種CSS選擇器（:not(.input) 所有class不是“input”的節(jié)點）·圓角（border-radius: 8px;）·多列布局（multi-columnlayout）·陰影和反射（Shadow/Reflect）·文字特效(text-shadow)·文字渲染(Text-decoration)·線性漸變(gradient)·旋轉(zhuǎn)(transform)·縮放，定位，傾斜，動畫，多背景

7.解釋一下 Flexbox (彈性盒布局模型)？及適用場景？

·任何一個容器都可以指定為 flex 布局。行內(nèi)元素也可使用 flex 布局。 ·一下6個屬性設(shè)置在容器上   flex-direction  定義主軸的方向   flex-wrap  定義“如果一條軸線排不下，如何換行”  flex-flow  上述2個屬性的簡寫   justify-content  定義項目在主軸上對齊方式   align-items  定義項目在交叉軸上如何對齊   align-content  定義多根軸線的對齊方式  ·flex 布局是CSS3新增的一種布局方式， 我們可以通過將一個元素的display屬性設(shè)置為flex 從而使他成為一個flex容器， 他對我所有子元素都會稱謂他的項目。 ·一個容器默認有兩條軸，一個是水平的主軸，一個是與主軸垂直的交叉軸。 我們可以使用flex-direction來指定主軸的方向。 我們可以使用justify-content來指定元素在主軸上的排列方式， 使用align-items來指定元素在交叉軸上的排列方式。 還可以使用flex-wrap來規(guī)定當一行排列不下時的換行方式。

8.用純 CSS 創(chuàng)建一個三角形？

/*    采用的是相鄰邊框鏈接處的均分原理  將元素的寬高設(shè)為0，只設(shè)置 border ,  將任意三條邊隱藏掉（顏色設(shè)為 transparent ）,剩下的就是一個三角形 */#demo{   width: 0;   height: 0;   border-width: 20px;   border-style: solid;   border-color: transparent transparent red transparent;}

9.一個滿屏“品”字布局如何設(shè)計？

·上面的 p 寬100% ·下面的兩個 p 分別寬50% ·然后用 float 或者 inline 使其不換行

10.瀏覽器兼容性有哪些？*****

① 瀏覽器默認的 margin 和 padding 不同 解決：加一個全局 *{ margin: 0; padding: 0; }來統(tǒng)一 ② 谷歌中文界面下默認會將小于12px 的文本強制按照12px顯示 解決：使用-webkit-transform:scale(.75);收縮的是整個span盒子大小，這時候，必須將span準換成塊元素。 ③ 超鏈接訪問過后hover樣式就不會出現(xiàn)了，被點擊訪問過的超鏈接樣式不再具有hover 和active 了 解決：改變css 屬性的排列順序L-V-H-A

11.width: auto 和 width: 100% 的區(qū)別

·width: 100% 會使元素box的寬度等于父元素的contentbox的寬度 ·width: auto 會時元素撐滿整個父元素，margin, border, padding, content 區(qū)域會自動分配水平空間

12.使用 base64 編碼的優(yōu)缺點

·base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串， 在頁面上顯示時可用該字符串來代替圖片的url屬性 ·使用base64的優(yōu)點： ① 減少一個圖片的 HTTP 請求 ·使用base64的缺點： ① 根據(jù)base64的編碼原理，編碼后的大小會比源文件大小大1/3，如果把大圖片編碼到html/css中， 不僅會造成文件體積增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。 ② 使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML 或CSS， 這相比于直接緩存圖片的效果要差很多。 ③ ie8以前的瀏覽器不支持 一般一些網(wǎng)站的小圖標可以使用base64圖片引入

13.為什么要清除浮動？清除浮動的方式？

·清除浮動是為了清除使用浮動元素產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。① 額外標簽法（在最后一個浮動標簽后，新加一個標簽，給其設(shè)置clear: both;）(不推薦)優(yōu)點：通俗易懂，方便缺點：添加無意義標簽，語義化差② 父級添加 overflow 屬性（父元素添加 overflow: hidden）(不推薦)優(yōu)點：代碼簡潔缺點：內(nèi)容增多的時候容易造成不會自動換行，導(dǎo)致內(nèi)容被隱藏掉，無法顯示要溢出的元素③ 使用 after 偽元素清除浮動 （推薦使用）.clearfix::after{   /* 偽元素是行內(nèi)元素，正常瀏覽器清除浮動方法 */   content: "";   dispaly: block;   height: 0;   clear: both;   visibility: hiden;}.clearfix{   /* *ie6清除浮動的方式 *號只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行 */   *zoom: 1; }優(yōu)點：符合閉合浮動思想，結(jié)構(gòu)語義化正確缺點：IE6-7不支持偽元素：after,使用zoom：1觸發(fā)hasLayout④ 使用before 和 after 雙偽元素清除浮動.clearfix::after, .clearfix::before{   content: "";   display: table;}.clearfix::after{   clear: both;}.clearfix{   *zoom: 1;}

14.CSS優(yōu)化，提高性能的方法有哪些？

·加載性能： ① CSS 壓縮：將寫好的CSS 進行打包壓縮，可以減少很多的體積。 ② CSS單一樣式：當需要下邊距和左邊距的時候，很多時候選擇：margin: top 0 bottom 0; 但margin-top: top;margin-bottom: bottom;執(zhí)行的效率更高。 ·選擇器性能： ① 關(guān)鍵選擇器。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標元素的部分）。

相關(guān)教程推薦：CSS視頻教程