2020CSS3面試題有哪些

2020CSS3面試題有哪些？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

1.盒模型

·標(biāo)準(zhǔn)盒模型 border, padding, content, margin
·IE盒模型 border, padding, content
·通過(guò) box-sizing屬性改變?cè)氐暮心Ｐ?/pre>
2.CSS選擇符
·id選擇器（#myId）·類選擇器（.myClassName）·標(biāo)簽選擇器（p, h2, p）·后代選擇器（h2 p）·相鄰后代選擇器（子）選擇器（ul > li）·兄弟選擇器（li~a）·相鄰兄弟選擇器（li+a）·屬性選擇器（a[rel="external"]）·偽類選擇器（a:hover, li:nth-child）·偽元素選擇器（::before, ::after）·通配符選擇器（*）
3.::before 和 :after 中雙冒號(hào)和單冒號(hào)的區(qū)別？這2個(gè)偽元素的作用？
·在 CSS3 中 : 表示偽類， :: 表示偽元素·想讓插入的內(nèi)容出現(xiàn)在其他內(nèi)容前，使用::befroe。否則，使用::after
4.CSS中哪些屬性可以繼承？
·每一個(gè)屬性在定義中都給出了這個(gè)屬性是否具有繼承性，一個(gè)具有繼承性的屬性會(huì)在沒(méi)有指定值的時(shí)候，會(huì)使用父元素的同屬性的值
來(lái)作為自己的值。
·一般具有繼承性的屬性有，字體相關(guān)的屬性，font-size和font-weight等。
·文本相關(guān)的屬性，color和text-align等。
·表格的一些布局屬性、列表屬性如list-style等。
·還有光標(biāo)屬性cursor、元素可見(jiàn)性visibility。
·當(dāng)一個(gè)屬性不是繼承屬性的時(shí)候，我們也可以通過(guò)將它的值設(shè)置為inherit來(lái)使它從父元素那獲取同名的屬性值來(lái)繼承。
5.如何居中p
-水平居中1：給 p 設(shè)置一個(gè)寬度，然后添加 margin:0 auto; 屬性
p{
  width: 200px;
  margin: 0 auto;}
-水平居中2：利用 text-align:center 實(shí)現(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;}
-讓絕對(duì)定位的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 布局實(shí)際使用時(shí)應(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é)點(diǎn)）·圓角（border-radius: 8px;）·多列布局（multi-columnlayout）·陰影和反射（Shadow/Reflect）·文字特效(text-shadow)·文字渲染(Text-decoration)·線性漸變(gradient)·旋轉(zhuǎn)(transform)·縮放，定位，傾斜，動(dòng)畫，多背景
7.解釋一下 Flexbox (彈性盒布局模型)？及適用場(chǎng)景？
·任何一個(gè)容器都可以指定為 flex 布局。行內(nèi)元素也可使用 flex 布局。
·一下6個(gè)屬性設(shè)置在容器上
  flex-direction  定義主軸的方向
  flex-wrap  定義“如果一條軸線排不下，如何換行”
 flex-flow  上述2個(gè)屬性的簡(jiǎn)寫
  justify-content  定義項(xiàng)目在主軸上對(duì)齊方式
  align-items  定義項(xiàng)目在交叉軸上如何對(duì)齊
  align-content  定義多根軸線的對(duì)齊方式

·flex 布局是CSS3新增的一種布局方式，
我們可以通過(guò)將一個(gè)元素的display屬性設(shè)置為flex 從而使他成為一個(gè)flex容器，
他對(duì)我所有子元素都會(huì)稱謂他的項(xiàng)目。
·一個(gè)容器默認(rèn)有兩條軸，一個(gè)是水平的主軸，一個(gè)是與主軸垂直的交叉軸。
我們可以使用flex-direction來(lái)指定主軸的方向。
我們可以使用justify-content來(lái)指定元素在主軸上的排列方式，
使用align-items來(lái)指定元素在交叉軸上的排列方式。
還可以使用flex-wrap來(lái)規(guī)定當(dāng)一行排列不下時(shí)的換行方式。
8.用純 CSS 創(chuàng)建一個(gè)三角形？
/* 
  采用的是相鄰邊框鏈接處的均分原理  將元素的寬高設(shè)為0，只設(shè)置 border ,  將任意三條邊隱藏掉（顏色設(shè)為 transparent ）,剩下的就是一個(gè)三角形 */#demo{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;}
9.一個(gè)滿屏“品”字布局如何設(shè)計(jì)？
·上面的 p 寬100%
·下面的兩個(gè) p 分別寬50%
·然后用 float 或者 inline 使其不換行
10.瀏覽器兼容性有哪些？*****
① 瀏覽器默認(rèn)的 margin 和 padding 不同
解決：加一個(gè)全局 *{ margin: 0; padding: 0; }來(lái)統(tǒng)一
② 谷歌中文界面下默認(rèn)會(huì)將小于12px 的文本強(qiáng)制按照12px顯示
解決：使用-webkit-transform:scale(.75);收縮的是整個(gè)span盒子大小，這時(shí)候，必須將span準(zhǔn)換成塊元素。
③ 超鏈接訪問(wèn)過(guò)后hover樣式就不會(huì)出現(xiàn)了，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover 和active 了
解決：改變css 屬性的排列順序L-V-H-A
11.width: auto 和 width: 100% 的區(qū)別
·width: 100% 會(huì)使元素box的寬度等于父元素的contentbox的寬度
·width: auto 會(huì)時(shí)元素?fù)螡M整個(gè)父元素，margin, border, padding, content 區(qū)域會(huì)自動(dòng)分配水平空間
12.使用 base64 編碼的優(yōu)缺點(diǎn)
·base64編碼是一種圖片處理格式，通過(guò)特定的算法將圖片編碼成一長(zhǎng)串字符串，
在頁(yè)面上顯示時(shí)可用該字符串來(lái)代替圖片的url屬性
·使用base64的優(yōu)點(diǎn)：
① 減少一個(gè)圖片的 HTTP 請(qǐng)求
·使用base64的缺點(diǎn)：
① 根據(jù)base64的編碼原理，編碼后的大小會(huì)比源文件大小大1/3，如果把大圖片編碼到html/css中，
不僅會(huì)造成文件體積增加，影響文件的加載速度，還會(huì)增加瀏覽器對(duì)html或css文件解析渲染的時(shí)間。
② 使用base64無(wú)法直接緩存，要緩存只能緩存包含base64的文件，比如HTML 或CSS，
這相比于直接緩存圖片的效果要差很多。
③ ie8以前的瀏覽器不支持
一般一些網(wǎng)站的小圖標(biāo)可以使用base64圖片引入
13.為什么要清除浮動(dòng)？清除浮動(dòng)的方式？
·清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們頁(yè)面后面的布局不能正常顯示。① 額外標(biāo)簽法（在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽，給其設(shè)置clear: both;）(不推薦)優(yōu)點(diǎn)：通俗易懂，方便缺點(diǎn)：添加無(wú)意義標(biāo)簽，語(yǔ)義化差② 父級(jí)添加 overflow 屬性（父元素添加 overflow: hidden）(不推薦)優(yōu)點(diǎn)：代碼簡(jiǎn)潔缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行，導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示要溢出的元素③ 使用 after 偽元素清除浮動(dòng) （推薦使用）.clearfix::after{
  /* 偽元素是行內(nèi)元素，正常瀏覽器清除浮動(dòng)方法 */
  content: "";
  dispaly: block;
  height: 0;
  clear: both;
  visibility: hiden;}.clearfix{
  /* *ie6清除浮動(dòng)的方式 *號(hào)只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行 */
  *zoom: 1; }優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確缺點(diǎn)：IE6-7不支持偽元素：after,使用zoom：1觸發(fā)hasLayout④ 使用before 和 after 雙偽元素清除浮動(dòng).clearfix::after, .clearfix::before{
  content: "";
  display: table;}.clearfix::after{
  clear: both;}.clearfix{
  *zoom: 1;}
14.CSS優(yōu)化，提高性能的方法有哪些？
·加載性能：
① CSS 壓縮：將寫好的CSS 進(jìn)行打包壓縮，可以減少很多的體積。
② CSS單一樣式：當(dāng)需要下邊距和左邊距的時(shí)候，很多時(shí)候選擇：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;執(zhí)行的效率更高。
·選擇器性能：
① 關(guān)鍵選擇器。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。