整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          2024 高頻前端面試題匯總之CSS篇(二)

          **2024 高頻前端面試題匯總之CSS篇(二)**

          **引言:**

          在Web前端領域,CSS作為視覺呈現的靈魂,一直是各大公司面試考核的重點之一。為了幫助廣大前端開發者充分準備即將到來的面試,本文將繼續盤點2024年高頻CSS面試題目,并通過詳盡的解析與實例代碼,帶您鞏固和拓展CSS知識體系,提升面試成功率。

          ## **一、CSS布局進階**

          **題目1:Flexbox布局的基本原理與應用場景**

          **解答:**

          Flexbox布局(彈性盒布局)是一種現代化的CSS布局方式,通過`display: flex`聲明父元素為彈性容器,然后通過一系列相關的屬性(如`flex-direction`、`justify-content`、`align-items`等)對子元素進行靈活的定位與尺寸分配。

          ```html

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <style>

          .container {

          display: flex;

          flex-direction: row; /* 主軸方向,默認為水平 */

          justify-content: space-around; /* 主軸上的對齊方式 */

          align-items: center; /* 交叉軸上的對齊方式 */

          }

          .box {

          flex: 1; /* 子元素按比例分配空間 */

          border: 1px solid black;

          padding: 1em;

          margin: 0.5em;

          }

          </style>

          </head>

          <body>

          <div class="container">

          <div class="box">Box 1</div>

          <div class="box">Box 2</div>

          <div class="box">Box 3</div>

          </div>

          </body>

          </html>

          ```

          **題目2:Grid布局的特點與難點**

          **解答:**

          CSS Grid布局提供了一個二維網格系統,用于定義行與列,并精確放置和對齊項目。相較于Flexbox,Grid布局更適合處理復雜的二維布局問題。

          ```html

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <style>

          .grid-container {

          display: grid;

          grid-template-columns: repeat(3, 1fr); /* 創建3等寬的列 */

          grid-gap: 10px; /* 設置行與列之間的間距 */

          }

          .grid-item {

          border: 1px solid black;

          padding: 1em;

          }

          </style>

          </head>

          <body>

          <div class="grid-container">

          <div class="grid-item">Item 1</div>

          <div class="grid-item">Item 2</div>

          <div class="grid-item">Item 3</div>

          <!-- ... 更多網格項 -->

          </div>

          </body>

          </html>

          ```

          ## **二、CSS選擇器與優先級**

          **題目3:CSS選擇器的層級關系與權重計算**

          **解答:**

          CSS選擇器的優先級由內聯樣式(1000)、ID選擇器(100)、類選擇器(10)、屬性選擇器(10)、偽類(10)、元素選擇器(1)和通用選擇器(0)依次遞減。當多個選擇器應用于同一元素時,優先級高的規則生效。

          ```css

          /* 例子:優先級比較 */

          #id .class[attr] p:hover {

          color: red; /* 優先級:1013 */

          }

          .class p {

          color: blue; /* 優先級:11 */

          }

          ```

          ## **三、CSS單位與響應式設計**

          **題目4:rem、em與vw/vh單位在響應式設計中的應用**

          **解答:**

          - `rem`是相對于根元素(通常是`html`)的字體大小的單位,便于實現整體布局的響應式調整。

          - `em`是相對于父元素字體大小的單位,常用于局部相對單位的設定。

          - `vw/vh`分別代表視窗寬度和高度的百分比,適合創建完全依賴視口大小的響應式設計。

          ```css

          /* 示例 */

          html {

          font-size: 16px; /* 根元素字體大小 */

          }

          .container {

          width: 80%; /* 百分比單位 */

          }

          .title {

          font-size: 2rem; /* 相對于根元素字體大小 */

          }

          .subtitle {

          font-size: 1.2em; /* 相對于父元素字體大小 */

          }

          .hero-image {

          width: 100vw; /* 占滿整個視口寬度 */

          height: 50vh; /* 占視口高度的一半 */

          }

          ```

          ## **四、CSS性能優化**

          **題目5:如何優化CSS以提高渲染性能?**

          **解答:**

          - 減少CSS文件體積,通過合并、壓縮和精簡CSS代碼。

          - 采用現代CSS特性替代舊有的布局和定位方式,如Flexbox和Grid布局。

          - 避免過于復雜的選擇器,減少CSS解析時間和渲染性能損耗。

          - 使用媒體查詢優化不同設備的加載與渲染,實現按需加載CSS。

          - 利用CSS3硬件加速屬性(如`transform`和`will-change`)提高動畫性能。

          以上只是部分CSS高頻面試題的解析與示例,希望能幫助您在面試前全方位地復習和掌握CSS的核心知識點。持續關注本系列教程,我們將持續提供更多有價值的前端面試攻略,助您在職業生涯中乘風破浪,披荊斬棘!

          一篇文章,小編結合自己的實際和各種面試經歷總結整理了一些比較重點和常用的CSS知識點,大伙可以邊看邊動手寫一寫,實踐是檢驗真理的唯一標準嘛。

          一、px,em,rem、vw、vh

          1.px (pixel,像素)

          是一個虛擬長度單位,是計算機系統的數字化圖像長度單位,如果px要換算成物理長度,需要指定精度DPI(Dots Per Inch,每英寸像素數),在掃描打印時一般都有DPI可選。Windows系統默認是96dpi,Apple系統默認是72dpi。

          2.em(相對長度單位,相對于當前對象內文本的字體尺寸)

          是一個相對長度單位,最初是指字母M的寬度,故名em。現指的是字符寬度的倍數,用法類似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

          3.rem(root em,根em)

          rem是一個相對單位,1rem等于html元素上字體設置的大小。我們只要設置html上font-size的大小,就可以改變rem所代表的大小。這樣我們就有了一個可控的統一參考系。我們現在有兩個目標:

          • rem單位所代表的尺寸大小和屏幕寬度成正比,也就是設置html元素的font-size和屏幕寬度成正比
          • rem單位和px單位很容易進行換算,方便我們按照標注稿寫css

          rem與em的區別:

          • rem是相對于根元素(html)的字體大小,而em是相對于其父元素的字體大小
          • em最多取到小數點的后三位

          4.vw、vh

          css3中引入了一個新的單位vw/vh,與視圖窗口有關,vw表示相對于視圖窗口的寬度,vh表示相對于視圖窗口高度,除了vw和vh外,還有vmin和vmax兩個相關的單位。各個單位具體的含義如下:

          這里我們發現視窗寬高都是100vw/100vh,那么vw或者vh,下簡稱vw,很類似百分比單位。vw和%的區別為:

          二、圣杯布局-雙飛翼布局

          圣杯布局與雙飛翼布局針對的都是三列左右欄固定中間欄邊框自適應的網頁布局

          • 三列布局,中間寬度自適應,兩邊定寬
          • 中間欄要在瀏覽器中優先展示渲染
          • 允許任意列的高度最高

          1.相對布局

          .container { width: 100%; min-height: 300px; padding: 0 60px; box-sizing: border-box;}
          .container > div { position: relative; float: left;}
          .left, .right { width: 60px; height: 100%;}
          .left { left: -60px; margin-left: -100%;}
          .right { right: 0; margin-right: -100%;}
          .main { width: 100%; height: 100%;}
          

          2.flex布局

          .container {
           width: 100%;
           min-height: 300px;
           display: flex;
          }
          .main {
           flex-grow: 1;
          }
          .left {
           order: -1;
           flex-basis: 60px;
          }
          .right {
           flex-basis: 60px;
          }
          

          3.絕對布局

          .container {
           width: 100%;
           min-height: 300px;
           position: relative;
          }
          .container > div {
           position: absolute;
          }
          .left, .right {
           width: 60px;
           height: 100%;
          }
          .main {
           width: calc(100% - 120px);
           height: 100%;
           left: 60px;
          }
          .left {
           left: 0;
          }
          .right {
           right: 0;
          }
          

          三、流式布局與響應式布局

          流式布局使用非固定像素來定義網頁內容,也就是百分比布局,通過盒子的寬度設置成百分比來根據屏幕的寬度來進 行伸縮,不受固定像素的限制,內容向兩側填充。

          響應式開發利用CSS3 中的 Media Query(媒介查詢),通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

          • 超小屏幕(移動設備) 768px 以下
          • 小屏設備 768px-992px
          • 中等屏幕 992px-1200px
          • 寬屏設備 1200px 以上

          由于響應式開發顯得繁瑣些,一般使用第三方響應式框架來完成,比如 bootstrap 來完成一部分工作,當然也 可以自己寫響應式。

          四、CSS優先級算法

          • 元素選擇符: 1
          • class選擇符: 10
          • id選擇符:100
          • 元素標簽:1000
          1. !important聲明的樣式優先級最高,如果沖突再進行計算。
          2. 如果優先級相同,則選擇最后出現的樣式。
          3. 繼承得到的樣式的優先級最低。

          五、CSS3新增偽類有那些?

          1. p:first-of-type 選擇屬于其父元素的首個元素
          2. p:last-of-type 選擇屬于其父元素的最后元素
          3. p:only-of-type 選擇屬于其父元素唯一的元素
          4. p:only-child 選擇屬于其父元素的唯一子元素
          5. p:nth-child(2) 選擇屬于其父元素的第二個子元素
          6. :enabled :disabled 表單控件的禁用狀態。
          7. :checked 單選框或復選框被選中。

          六、CSS3新特性

          1. RGBA和透明度
          2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
          3. word-wrap(對長的不可分割單詞換行)word-wrap:break-word
          4. 文字陰影:text-shadow: 5px 5px 5px #FF0000;(水平陰影,垂直陰影,模糊距離,陰影顏色)
          5. font-face屬性:定義自己的字體
          6. 圓角(邊框半徑):border-radius 屬性用于創建圓角
          7. 邊框圖片:border-image: url(border.png) 30 30 round
          8. 盒陰影:box-shadow: 10px 10px 5px #888888
          9. 媒體查詢:定義兩套css,當瀏覽器的尺寸變化時會采用不同的屬性

          七、CSS優化、提高性能的方法有哪些?

          1. 避免過度約束
          2. 避免后代選擇符
          3. 避免鏈式選擇符
          4. 使用緊湊的語法
          5. 避免不必要的命名空間
          6. 避免不必要的重復
          7. 最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像
          8. 避免!important,可以選擇其他選擇器
          9. 盡可能的精簡規則,你可以合并不同類里的重復規則

          八、CSS動畫

          CSS 中的 transform,transition 和 animation 是分開的三部分內容,其中 transfrom 主要是控制元素變形,并沒有一個時間控制的概念,而 transition 和 animation 才是動畫的部分,它們可以控制在一個時間段里,元素在兩個或以上的狀態切換的效果。

          1.transition

          transition 屬性:

          • transition-delay 延遲多久后開始動畫
          • transition-duration 過渡動畫的一個持續時間
          • transition-property 執行動畫對應的屬性,例如 color,background 等,可以使用 all 來指定所有的屬性
          • transition-timing-function 隨著時間推進,動畫變化軌跡的計算方式,常見的有:linear,ease,ease-in,ease-out,cubic-bezier(...) 等。

          transition 相關的事件

          transitionend 事件會在 transition 動畫結束的時候觸發。通常我們會在動畫結束后執行一些方法,例如繼續下一個動畫效果或者其他。Zepto.js 中的動畫方法都是使用 CSS 動畫屬性來處理,而其中動畫運行后的回調便應該是使用這個事件來處理。

          2.animation

          雖然 transition已經提供了很棒的動畫效果了,但是我們只能夠控制從一個狀態到達另外一個狀態,沒法來控制多個狀態的不斷變化,而 animation 而幫助我們實現了這一點。使用 animation 的前提是我們需要先使用 @keyframes 來定義一個動畫效果,@keyframes 定義的規則可以用來控制動畫過程中的各個狀態的情況,語法大抵是這個樣子:

          @keyframes test {
           from { left: 0; top: 0; }
           to { left: 100%; top: 100%; }
          }
          

          @keyframes 關鍵詞后跟動畫的名字,然后是一個塊,塊中有動畫進度的各個選擇器,選擇器后的塊則依舊是我們常見的各個 CSS 樣式屬性。

          animation 屬性:

          • animation-name 你需要的動畫效果的 @keyframes 的名字。
          • animation-delay 和 transition-delay 一樣,動畫延遲的時間。
          • animtaion-duration 和 transition-duration 一樣,動畫持續的時間。
          • animation-direction 動畫的一個方向控制。
          • 默認是 normal,如果是上述的 left 從 0% 到 100%,那么默認是從左到右。如果這個值是 reverse,那么便是從右到左

          由于 animation 提供了循環的控制,所以還有兩個值是 alternate 和 alternate-reverse,這兩個值會在每次循環開始的時候調轉動畫方向,只不過是起始的方向不同。

          animation 相關事件

          可以通過綁定事件來監聽 animation 的幾個狀態,這些事件分別是:

          • animationstart 動畫開始事件,如果有 delay 屬性的話,那么等到動畫真正開始再觸發,如果是沒有 delay,那么當動畫效果應用到元素時,這個事件會被觸發。
          • animationend 動畫結束的事件,和 transitionend 類似。如果有多個動畫,那么這個事件會觸發多次,像上邊的例子,這個事件會觸發三次。如果 animation-iteration-count 設置為 infinite,那么這個事件則不會被觸發。
          • animationiteration 動畫循環一個生命周期結束的事件,和上一個事件不一樣的是,這個在每次循環結束一段動畫時會觸發,而不是整個動畫結束時觸發。無限循環時,除非 duration 為 0,否則這個事件會無限觸發

          九、BFC

          BFC全稱是Block Formatting Context,即塊格式化上下文。它是CSS2.1規范定義的,關于CSS渲染定位的一個概念。要明白BFC到底是什么,首先來看看什么是視覺格式化模型。

          視覺格式化模型

          視覺格式化模型(visual formatting model)是用來處理文檔并將它顯示在視覺媒體上的機制,它也是CSS中的一個概念。

          視覺格式化模型定義了盒(Box)的生成,盒主要包括了塊盒、行內盒、匿名盒(沒有名字不能被選擇器選中的盒)以及一些實驗性的盒(未來可能添加到規范中)。盒的類型由display屬性決定。

          怎樣才能形成BFC

          根元素或其它包含它的元素;

          浮動 (元素的float不為none);

          絕對定位元素 (元素的position為absolute或fixed);

          行內塊inline-blocks(元素的 display: inline-block);

          表格單元格(元素的display: table-cell,HTML表格單元格默認屬性);

          overflow的值不為visible的元素;

          彈性盒 flex boxes (元素的display: flex或inline-flex);

          但其中,最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說,每次看到這些屬性的時候,就代表了該元素已經創建了一個BFC了。

          瀏覽器對BFC區域的約束規則:

          1. 生成BFC元素的子元素會一個接一個的放置。
          2. 垂直方向上他們的起點是一個包含塊的頂部,兩個相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素的外邊距會折疊(Mastering margin collapsing)。
          3. 生成BFC元素的子元素中,每一個子元素左外邊距與包含塊的左邊界相接觸(對于從右到左的格式化,右外邊距接觸右邊界),即使浮動元素也是如此(盡管子元素的內容區域會由于浮動而壓縮),除非這個子元素也創建了一個新的BFC(如它自身也是一個浮動元素)。

          BFC是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面元素,反之亦然。我們可以利用BFC的這個特性來做很多事。

          十、flex 布局

          基本概念

          采用 Flex 布局的元素,稱為 Flex 容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為 Flex 項目(flex item),簡稱"項目"。

          容器默認存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。

          項目默認沿主軸排列。單個項目占據的主軸空間叫做main size,占據的交叉軸空間叫做cross size。

          容器的屬性:

          1.flex-direction: 屬性決定主軸的方向(即項目的排列方向)

          • row(默認值):主軸為水平方向,起點在左端。
          • row-reverse:主軸為水平方向,起點在右端。
          • column:主軸為垂直方向,起點在上沿。
          • column-reverse:主軸為垂直方向,起點在下沿。

          2.flex-wrap :默認情況下,項目都排在一條線(又稱"軸線")上

          • nowrap(默認):不換行。
          • wrap:換行,第一行在上方。
          • wrap-reverse:換行,第一行在下方。

          3.flex-flow:是flex-direction屬性和flex-wrap屬性的簡寫形式

          4.justify-content:定義了項目在主軸上的對齊方式

          • flex-start(默認值):左對齊
          • flex-end:右對齊
          • center: 居中
          • space-between:兩端對齊,項目之間的間隔都相等。
          • space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。

          5.align-items:定義項目在交叉軸上如何對齊

          • flex-start:交叉軸的起點對齊。
          • flex-end:交叉軸的終點對齊。
          • center:交叉軸的中點對齊。
          • baseline: 項目的第一行文字的基線對齊。
          • stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

          6.align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用

          • flex-start:與交叉軸的起點對齊。
          • flex-end:與交叉軸的終點對齊。
          • center:與交叉軸的中點對齊。
          • space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
          • space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
          • stretch(默認值):軸線占滿整個交叉軸。

          項目的屬性

          1. order屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。
          2. flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。
          3. flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。
          4. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。
          5. align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。

          該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。

          十一、Grid 布局總結

          grid 布局是 css 中的一種新的布局方式,對盒子和盒子內容的位置及尺寸有很強的控制能力。與 flex 不同,flex 著重于單軸,而 grid 適應于多軸,下面就來做個簡單的介紹。

          flex 布局示意

          grid 布局示意

          基本概念

          設置 display: grid; 的元素稱為容器,它的直接子元素稱為項目,但注意子孫元素不是項目。

          • grid line:網格線,構成 grid 布局的結構,分為水平和豎直兩種。
          • grid track:兩條相鄰網格線之間的空間,可以認為是一行或者一列。
          • grid cell:兩條相鄰行和相鄰列之間分割線組成的空間,是 grid 布局中的一個單元。
          • grid area:四條網格線包裹的全部空間,任意數量的 grid cell 組成一個 grid area。

          容器屬性

          grid 容器的屬性還是有點多的,一共有 18 個,但是很多可以通過簡寫完成,所以也不用太緊張。

          • grid-template 系列
          1. grid-template-columns
          2. grid-template-rows
          3. grid-template-areas
          • grid-gap 系列
          1. grid-column-gap
          2. grid-row-gap
          • place-items 系列
          1. justify-items
          2. align-items
          • place-content 系列
          1. justify-content
          2. align-content
          • grid 系列
          1. grid-auto-columns
          2. grid-auto-rows
          3. grid-auto-flow

          十二、box-sizing

          設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content,而IE盒模型包括border和padding,box-sizing屬性可以為三個值之一:

          • content-box,默認值,只計算內容的寬度,border和padding不計算入width之內
          • padding-box,padding計算入寬度內
          • border-box,border和padding計算入寬度之內

          十三、硬件加速

          有時候動畫可能會導致用戶的電腦卡頓,你可以在特定元素中使用硬件加速來避免這個問題:

          .block {
           transform: translateZ(0);
          }
          

          你并不會察覺有什么不同,但瀏覽器會為這個元素進行3D硬件加速,在will-change這個特殊屬性未被全面支持之前,這個方法還是很有用的。

          小結

          這里總結CSS中比較常用也是比較重要的十三個知識點,內容比較多,希望大伙能多看多寫,好的程序員是寫出來的,這也算是小編對自己的激勵吧。


          oder

          背景

          這是接上一篇JS篇的內容,沒有看到的朋友可以關注我們,在找對應的文章。

          吐槽幾句:前幾天自己在掘金發布了倆篇自己畢業找工作的面試總結,小火了一把之后...沒想到評論區炸開了,有diss我的,也有支持我的。更有的伙伴們特地到我們的公眾號(IT面試填坑小分隊)留言謝謝我們,這讓我保持了動力,因為每次文章的更新對于我來說都是一次鞭策,讓我寫了一天需求回家之后沒有懈怠,繼續保持學習狀態。

          我的掘金:https://juejin.im/user/5b4ca7c76fb9a04fd55ac00d/posts

          有經驗、想指導的:可以留言指導,你的指導都可以幫助我和看官們少走一些彎路,我們都會由衷感謝您,

          和我一樣剛畢業的童鞋們: 我們可以一塊交流,不同的見解可能碰撞出美妙的答案。

          準備入行、準備面試的童鞋們,希望你們不要單純的去背面試題,學會理解知識,行業浮躁但是行業中的我們不要浮躁。背一道題你只會一道,理解一道題、一個知識點可以幫你會做一個類型的題,后者更累可是效率也更高,希望馬上要實習或者校招的你們有一個好的未來。加油!

          話不多說~~

          你好CSS面試(依舊基礎)

          • 1 請說一下什么是盒子模型(真·基礎問題)
          • 2 什么是塊級格式化上下文(BFC)? 什么樣的元素會生成BFC? BFC的布局規則是怎樣的?

          BFC的內容需要好好理解、一般會結合實際問題:比如margin重疊問題。

          • 3 width與height設置的百分比是相對誰來計算的?padding與margin呢?
          • 4 如何設置一個邊長等于瀏覽器寬度一半的正方形?

          結合上個問題。元素的padding是相對于父元素的寬度來計算的,那么答案是不是一目了然。還有一個答案可以參考下一個問題。

          • 5 請問你了解vm vh這個單位嗎?
          • 6 如何實現一個元素的垂直居中?
          • 7 對flex布局有所了解嗎?請用flex布局實現一個三列布局
          • 8 可以不用flex實現一個三列布局嗎?

          針對于萬一讓你說兩種情況或者flex布局你緊張的遺忘了,請大膽使用圣杯布局與雙飛燕布局大法。

          • 9 position屬性有幾個值?哪些值會脫離文檔流?absolute是相對于誰來定位的?relative呢?
          • 10 rem與em了解嗎?分別是相對于誰來計算的?
          • 11 了解移動端的適配嗎?請問什么是rem布局?在移動端的1px問題該如何解決。

          親身經歷過一小段時間的rem布局,可以了解一下Retina屏,以及一些物理像素的知識,淘寶的無限適配可以了解一下,媒體查詢也不要忘記。

          • 12 對于css3的transform有了解嗎?
          • 13 對于css3的動畫有了解嗎?必填屬性有哪些?
          • 14 在實現一個div移動的動畫,使用translate、top(代指定位)、margin之間有什么性能上的不同?

          這個問題涉及一個渲染層的內容。如果回答出來可能順勢就問到如何創建一個渲染層。

          • 15 cpu與gpu有了解嗎?區別是什么?如何調用gpu渲染。

          對于瀏覽器重拍重繪問題不再這里討論了,我還得捋一捋忘的厲害,在以后繼續學習瀏覽器性能方面一定會再拿出來討論。

          • 16 最后一籮筐:如何清除浮動? 什么是css樣式初始化?為什么要這么做?css選擇器的權重都是什么?什么是偽類與偽元素?

          上面這個小籮筐問題相對來說,見的應該已經很多了。而且是真的出現在自己平時的學習與做的小項目中,我也就就不多提了,也不確定面試會不會問。

          這些css問題在我看來使用率是真的很高的。移動端rem布局、flex布局、css動畫、高度寬度百分比問題。尤其是在接觸與vue、react這種框架一塊使用的UI庫比如element-ui以及ant-desgin你沒有這些知識,沒有這些知識的儲備想要修改這些UI庫的樣式達到自己想要的效果就很難了。css是一個黑魔法,知識可以說是無窮無盡,希望大家正視它。

          總結與雞湯

          雖然做的是面試題的總結。但是每每回想這些面試題的內容,我就在考慮這些知識是不是很難一蹴而就、一學就會的?好像是。 做為一名剛入行的小白菜前端,每天做著產品經理給的需求,除了周六日(雙休的公司還蠻幸福的)已經很難找到大塊時間去學習了,周六周天想要打磨自己的基礎,但是一想上了五天班看什么書,玩去咯。每一項基礎知識都在改變你寫代碼的習慣。當你知道translate會創建新的層的時候,不考慮兼容的話,你就會更多的使用它。當你了解了重排重繪的原因,你有意回避這些的出現,你的項目流暢性就會越來越好,扎實的基礎真的可以幫助你更合理的考慮問題與編碼。扯遠了扯遠了,愿每一位看官看完這一段雞湯有一個好心情。


          主站蜘蛛池模板: 精品乱子伦一区二区三区| 亚洲一区二区三区高清| 日韩在线不卡免费视频一区 | 日韩精品一区二区三区色欲AV | 久久亚洲综合色一区二区三区| 无码人妻精一区二区三区| 国产av一区二区三区日韩| 国产一区二区三区高清视频| 波多野结衣一区二区三区高清在线| 日韩一区二区三区射精| 97精品一区二区视频在线观看| 日韩人妻一区二区三区免费| 天堂资源中文最新版在线一区 | 成人区人妻精品一区二区不卡| 人妻无码第一区二区三区 | 亚洲熟妇无码一区二区三区| 久久综合亚洲色一区二区三区| 久久精品国产一区二区三| 风间由美性色一区二区三区| 亚洲成AV人片一区二区密柚| 亚洲色大成网站www永久一区| 国产一区二区四区在线观看| 久久久久女教师免费一区| 国产成人无码AV一区二区| 国精产品一区一区三区免费视频 | 国产成人精品视频一区二区不卡| 中文字幕一区二区人妻性色| 国产精品视频一区二区三区四| 亚洲老妈激情一区二区三区| 无码精品一区二区三区在线| 91精品乱码一区二区三区| 国产日韩一区二区三区在线播放| 乱码人妻一区二区三区| 国内精品视频一区二区八戒| 视频一区二区三区人妻系列| 中文字幕一区二区三区视频在线| 久久精品一区二区三区日韩 | 精品一区二区三区水蜜桃| 亚洲日韩国产一区二区三区 | 亚洲国产欧美一区二区三区 | 亚洲一区二区三区四区视频|