碼上歡樂
相關內容    簡體    繁體

2019年前端面試題 | CSS篇 （更新於4月15日）

本文轉載自   查看原文   2019-04-16 01:01   1965    html+css/ CSS3

雖說刷面試題有走捷徑之嫌，但我發現，對於我這樣沒有工作經歷的人來說，其實是拓展自己實戰技能和加深知識理解的一個好機會。

分享出來，也希望大家不要背完了事，正經的去細細琢磨各種原由。

本篇是一個題目合集，部分答案我會整理后用自己的話說的盡量簡單，部分網絡現成的好答案我就直接貼鏈接了，也尊重大家的勞動成果，希望各位不會太介意。

如有bug，歡迎指出👏👏

1. 什么是盒子模型？

盒子模型包括content+padding+border+margin

標准盒子模型：寬度=內容的寬度（content）

低版本IE盒子模型：寬度=content+border+padding

2. CSS常用選擇器有哪些？

segmentfault.com/a/119000001…

3. CSS3新增偽類有哪些？

p:first-of-type 選擇屬於其父元素的首個元素

p:last-of-type 選擇屬於其父元素的最后元素

p:only-of-type 選擇屬於其父元素唯一的元素

p:only-child 選擇屬於其父元素的唯一子元素

p:nth-child(2) 選擇屬於其父元素的第二個子元素

:enabled :disabled 表單控件的禁用狀態。

:checked 單選框或復選框被選中

4. CSS3有哪些新增特性

這個問題賊大，作為一個新聞專業出身的人，這種問題簡直是腦殘，新特性那么多，難道需要我背一遍文檔你聽嗎？

但是，顯然面試官並不care你答不答的全，他自己都不定記得，對吧～

我們完全可以從個人項目經驗出發，比如我自己，在做小程序時用過flex布局，就可以以這個為主，再列舉三四個其他的就行了。

為了方便大家，這里先列幾個出來：

(1)CSS3 彈性盒（ Flexible Box 或 flexbox）

是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

具體使用參考 www.jianshu.com/p/5856c4ae9…

注意：一定要分清主軸和側軸（交叉軸），flex-direction設置的是row，水平就是主軸，垂直就是側軸；設置為colume，垂直就是主軸，水平就是側軸，而justify-content是設置主軸排列方式的，align-items是設置側軸排列方式的。知道這些就大概能用啦～

(2)偽類選擇器，參考上面的第三條，列表渲染修改單個列表樣式時，上面的nth-child()超好用

(3)邊框圓角：border-radius：3px

(4)@font-face，可以引入客戶端沒有的字體

(5)媒體查詢@meida，具體用法：www.cnblogs.com/yan-ck/p/58…

其他參考：blog.csdn.net/lxcao/artic…

5. CSS優先級計算規則

important Infinity

行間樣式 1000

id 100

class/屬性/偽類 10

標簽選擇器/偽元素 1

通配 0

6. 如何使用自定義字體

@font-face可以實現，具體使用方法：www.jianshu.com/p/976d95fb8…

7. CSS有哪些繼承屬性

參考：www.cnblogs.com/thislbq/p/5…

8. CSS單行省略和多行省略

單行：

overflow: hidden;//隱藏溢出
text-overflow:ellipsis;//省略號
white-space: nowrap;//不換行

 

9. 如何去除inline-blcok元素間隙？

空隙產生原因：HTML中的換行符、空格符、制表符等空白符，字體大小不為0的情況下，空白符占據一定寬度，使用inline-block會產生元素間的空隙。

解決辦法：

  1. 把所有的子元素寫在一行；
  2. 子元素設置浮動；
  3. 父元素的font-size設置為0，子元素的font-size設置為實際大小；
  4. 使用注釋：
<div class="parent"> 
&emsp;&emsp;&emsp; <div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div>
</div>

 

10. display屬性？

block: 指定元素為塊級元素，可以設寬高，元素前后自帶換行符，比如div、p。 inline：指定元素為內聯元素，不能設置寬高，元素不帶換行符，會顯示在同一行，比如span。 inline-block：行內塊元素，兼具前兩者的特點，元素前后不帶換行符，但又可以設置寬高，比如input\img。 none：可以隱藏元素。 常用的還有2個，我個人認為非常實用，就是table和table-cell，結合使用在父子元素身上，子元素如果有大段文字，只要再加一個vertical-align:middle，就能輕松將文字垂直居中。 CSS3新增了一個非常適合移動端使用的flex，能很好的適應不同屏幕大小。

11. box-sizing屬性

用來控制元素的盒子模型的解析模式，默認為content-box。

context-box：W3C的標准盒子模型，設置元素的height/width屬性指的是content部分的高/寬；border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬。

12. display:none與visibility:hidden

很多前端的同學認為visibility: hidden和display: none的區別僅僅在於display: none隱藏后的元素不占據任何空間，而visibility: hidden隱藏后的元素空間依舊保留 ，實際上沒那么簡單，visibility是一個非常有故事性的屬性

1、visibility具有繼承性，給父元素設置visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設置visibility: visible,則子元素又會顯示出來。這個和display: none有着質的區別

2、visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，但是其計數器仍在運行。這和display: none完全不一樣。

13.visibility屬性的collapse屬性值

collapse屬性很有意思，當一個元素的 visibility 屬性被設置成 collapse 值后，對於一般的元素，它的表現跟 hidden 是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現會和瀏覽器不同而變化。

在谷歌瀏覽器里，使用 collapse 值和使用 hidden 值沒有什么區別。

在火狐瀏覽器和IE8里，使用 collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。效果類似於display：none。

14. em\px\rem區別

px：絕對單位，頁面按精確像素展示。

em：相對單位，基准點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

PX特點：

  1. IE無法調整那些使用px作為單位的字體大小；

  2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位；

  3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。

EM特點 ：

  1. em的值並不是固定的；

  2. em會繼承父級元素的字體大小。

rem特點：

rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

position有哪些值？

1、static（靜態定位）：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設置相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級。元素位置變換以后，不會脫離文檔流。 

3、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級，會脫離文檔流。

4、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。

如何讓非文字類元素實現水平垂直居中？

普通div的水平居中

margin: 0 auto;
height: 50px;
width: 80px;

 

絕對定位的水平居中：

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

 

浮動元素的水平垂直居中：

border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

 

利用絕對定位元素的自動伸縮特性水平垂直居中

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

 

利用flex布局水平垂直居中（回答這個顯得更高端）

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}

 

在不知道圖片大小的情況下，如何設置樣式讓圖片不變形？

max-width: 100%

如何清除浮動？

www.cnblogs.com/hanqingtao/…

請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？

www.cnblogs.com/lixuemin/p/…

用純CSS創建一個三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

 

rgba和opacity的透明有何不同？

opacity會繼承父元素的opacity 屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性。簡單來說就是opacity作用於元素和元素所有內容的透明

rgba相對於opacity還是技高一籌的，當然只要是涉及顏色的，都可以用rgba來設置。

對BFC規范(塊級格式化上下文：block formatting context)的理解

BFC有以下特性：

1、內部的Box會在垂直方向，從頂部開始一個接一個地放置。 2、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加 3、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。 4、BFC的區域不會與float box疊加。 5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。 6、計算BFC的高度時，浮動元素也參與計算。

那么我們怎樣做就可以觸發BFC呢

  • float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ）
  • display (table-cell，table-caption，inline-block, flex, inline-flex)
  • position值為（absolute，fixed） fieldset元素
  • fieldset元素 在以上情況下可以創建BFC

BFC可以解決的問題

  • margin疊加的問題，我們將某個元素放到我們新建的BFC里面就可以避免margin疊加、
  • 對於左右布局的元素，我們可以給右側的元素添加overflow:hidden或者auto，左側的是float:left
  • 可以清除浮動，計算BFC高度，浮動元素不會撐開父元素的高度，我們可以讓父元素觸發BFC,即使用overflow:hidden

媒體查詢

語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

 

案例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 

聖杯布局和雙飛翼布局

 

 

 

 

www.cnblogs.com/imwtr/p/444…

瀏覽器解析CSS選擇器

自右向左

響應式設計

怎么讓瀏覽器支持小於12px 的文字？

.Num{
    display: inline-block;
    font-size: 14px;
    transform: scale(0.8);
 }

 

link和@import的區別

  1. link屬於XHTML標簽，而@import是CSS提供的。
  2. 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
  3. import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。
  4. link方式的樣式權重高於@import的權重。
  5. 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。

重排和重繪

www.cnblogs.com/zichi/p/472…

CSS優化與性能提高

www.cnblogs.com/xiaoloulan/…

純屬個人記錄，未完待續……


作者：梭梭醬加油鴨
鏈接：https://juejin.im/post/5ca80d366fb9a05e3345dccf
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 2021年前端面試題-CSS篇 2019年前端面試題 2021年前端面試題-webpack篇 2021年前端面試題-HTML篇 2021年前端面試題-HTML篇 2021年前端面試題-javaScript篇 2021年前端面試題-vue篇 2021年前端面試題——JS 2021年前端面試題-瀏覽器及http篇 2020年前端面試題及答案
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM